Add a rectangular marker with text overlay

[megelismi]

mapbox-gl-js version: 0.46

Question

I'm trying to figure out how to add a rectangular marker that contains some dynamic data, in this case a housing price. I'm trying to achieve this using layers instead of a custom Marker. The reason is that I need to display a popup on hover, and as far as I can tell, Markers only display a popup on click.

I need the price tag to look something like this: https://i.stack.imgur.com/7wl5O.png

I've combed through the documentation and Google, but I have not found an answer. Please help.

Links to related documentation

https://www.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/
https://www.mapbox.com/mapbox-gl-js/example/data-driven-lines/
https://www.mapbox.com/mapbox-gl-js/example/display-and-style-rich-text-labels/

[ashleyclough]

You can use a symbol layer:
https://www.mapbox.com/mapbox-gl-js/style-spec#layers-symbol

Create an svg graphic of your marker for the icon-image and add the data driven text for the text-field.

[ryanhamley]

You can see an example of creating custom Markers here. The Marker class also exposes a togglePopup method which you can use in a hover listener to open and close the attached popup.

[andrewharvey]

also #6856