Search code examples
mapboxmapbox-gl-jsmapbox-marker

Interactivity of mapbox markers/points depending on the rendering method selected


AFAIK, when plotting markers on mapbox map (Mapbox GL JS), you have two options:

(a) to plot them as point and layer styles (in which case they are rendered into the final <canvas> element, they are not inspectable, they cannot receive :hover states

(b) to add them as markers, which then remain individually inspectable HTML elements. The downside of this method though is that they don't zoom/scale as smoothly and quickly as the map so that a little of inertia is noticable.

Both methods support interaction (if you supply interactive: true in the (a) option) although you handle it in different ways.

Are there any other limitations of any of those methods that I should consider when building interactive map?


Solution

  • That's a pretty broad question. But generally I see the upsides of each method as:

    • Layers: part of the map, so you get collision detection, data-driven styling, zoom-driven styling, etc.
    • Markers: part of the DOM, so you get CSS, Javascript events, easy integration of images and fonts, and simpler mouse event handling, like :hover.

    It's not quite true to say that layers don't support :hover. You can detect mouseOver then do map.setFeatureState() to set a hover property on the feature. It's just that you don't get it for free.