CODEWITHSUNDEEP
cssiconszurb-foundationmapbox-glmapbox-gl-js
user3226932
user3226932

Reputation: 2242

Using custom fonts and recoloring for MapboxGl markers

Is it possible to use Foundation Icon Fonts or Font Awesome icons as the markers on the map for MapboxGL, basically embedding HTML like 

"<i class="fi-marker"></i>"

into the "marker-symbol" field? Also, is there a "icon-color" or "marker-color" field for changing the color of the marker in that case? That would make it very easy to customize the color of the marker.

For mapboxgl's own marker symbols, I couldn't find a way to custom color them, I've seen "default_marker" (blue) and "secondary_marker" (red), but I want to use more colors to distinguish between certain locations.

Upvotes: 0

Views: 1287

Answers (1)

Lucas Wojciechowski
Lucas Wojciechowski

Reputation: 3802

It is not currently possible to create HTML markers on a GL map. The map is rendered in WebGL and there is no easy way to embed HTML within WebGL.

You can use custom icons in symbol layers but they cannot be recolored as if by icon-color or marker-color. You will need to generate all colored images ahead of time.

Upvotes: 0

Related Questions