Search code examples
javascriptmapboxmapbox-gl-jsmapbox-marker

Mapbox GL JS - "Flat" Marker


For a project I am currently working on, I want to use mapbox-gl-js to implement in-car navigation on a raspberry pi (using offline map data and OSRM for routing). I want to display the current position on the route using an arrow marker - just like in Google Maps (I know, this could easily be done using Mapbox markers, but...).

Is it in any way possible to add a "flat" marker that is always on the same plane as the map, even when the view is tilted/pitched (i.e. the marker image becomes squished and oval when tilted, and round when viewed from above)? This behavior in GMaps can be seen here: Maps marker - the white circle is oval and the arrow shorter compared to when viewed from above.

Searching on SO and the internet did not provide any meaningful answers (except possibly this, but the link to the example is dead). I know this could very likely be implemented using a custom GL layer, but that seems rather complicated for the problem at hand...

I also noticed that a GEOJson source of type "image" is displayed with such an effect, so as a last resort I could probably calculate the required four edge coordinates from the current position. Though I'd gladly use a simpler method.


Solution

  • Use a Symbol Layer with the layout property "icon-pitch-alignment": "map".

    An example https://jsbin.com/hoziqeb/edit?html,output