protomaps
feat(example): interactive rules example
I was interested to see how rules could work interactively, so I created an example which other people may find useful too (or feel free to close if you'd prefer to keep key examples only).
In this example, clicking on a road feature highlights it. This is achieved by adding the clicked feature to an array which is used by clickedRule to be highlighted in red. The default paint_rules apply, apart from all rules applied to the road layer which are replaced with a single rule to show roads in grey.
@zhibek thanks for the example, it works pretty well!
I was meaning to do a big refactor of the examples into a live code system at demo/, but haven't gotten around to it yet unfortunately, so I'm taking a look at this now -
My general thinking about interaction and protomaps.js is that it is often better left to DOM layers above the basemap, such as those loaded from Leaflet geoJSON. The reason is that usually when people want some level of interactivity such as click highlighting a feature, they want a host of other things things as well, like:
- Hover states - moving cursor over the element changes the display state
- Cursors - moving cursor over the element changes to a pointer element
- a11y - if something is interactive, the element should interact with a screen reader
Because protomaps.js seeks to be as "web native" as possible, I would prefer to see people use web-native DOM to achieve interaction instead of rules on canvas. There may be a way to achieve hover states and a11y a different way without resorting to leaflet DOM layers, but I haven't played with this yet - is this something you're experimented with for your use case?
