Styling geodata dynamically and media queries

[jrjdavidson]

Hi
I was trying to think how I could dynamically change the styling of geodata. If the styling was html/css, I would probably create a class and add the class to the element when the style change was necessary. How would you go about it for geodata?

I also had a quick look in the docs for something similar to media queries in geodata styling but couldn't find anything. Any tricks that work like @media (hover: hover) { //style here..}.

[davidmtech]

Hi,
there is good page with examples:

https://github.com/melowntech/vts-browser-js/wiki/Examples

Related examples are:

Geodata with dynamic render

This example is showing how to combine geodata with dynamically rendered features.

Geodata - Hover events

Example showing how to work with hover events.

Geodata - Click events

Example showing how to work with click events.

Geodata - Click and hover events

Example showing how to combine click and hover events.

Geodata - Advanced hover events

Example showing how to work with advanced hover events.

Documentation for geodata styles:
https://github.com/melowntech/vts-browser-js/wiki/VTS-Geodata-Format#geo-layer-styles-structure

I hope it helps.

You can definitely change the style dynamically, for debug purpose, you can use the embedded inspector:

To access the style editor: Ctrl+Shift+D then Shift+E
More about the inspector: https://github.com/melowntech/vts-browser-js/wiki/VTS-Browser-Inspector-Mode

In addition to the davidmtech's links, I would add the following:

• https://vts-geospatial.org/tutorials/geojson.html
• https://rigel.mlwn.se/mountain-map/

Hope that helps and don't hesitate to share with us your map :)

[jrjdavidson]

Thanks for the example, that always help. However, the only type of interaction that allows you to modify geodata style in those examples are click and hover events, and even then only on the map.
However I was hoping to be able to modify geodata styles for other types of events that aren't necessarily map related (e.g. a click on a panel outside the map?). The only way I see of doing that now is by reloading the geodata with a new style definition, which seems to be a bit of a waste.

[gyenyame400]

2022, All the links are DEAD!

[jrjdavidson]

Yes it's a shame. Last time I checked, it was just the melown cloud service that was not kept up. All the rest still works. If you replace the mapconfig.json link with an instance of your own vts backend, all the links should work fine.