Using pins for markers

[rarkins]

Is it still the case that Mapbox GL JS doesn't support simple "pin" markers like in Mapbox.js/Leaflet?

I want:

I do not want:

I understand that #656 was closed but I don't think it does what I'm describing here (or what many described in that discussion).

[jhurlb]

There are a few ways you can achieve what you are describing.

Simplest: Markers. example

Using markers will allow you to have your own images. However, since markers are divs on top of the canvas using many of them isn't performant. If you would like to render many pins you may want to look at one of the next two solutions.

Moving on: Symbols single layer example

I know you said you don't want this but I think you don't want the style of marker, the solution works perfectly for what you are describing. Using Mapbox Studio you can manage your own style with your own sprites. With the single layer approach you can create symbol layers and then style them using layer properties.

One step further: Symbols two layers

Much the same as the above, we split the symbol of the pin to it's own layer so you only have 1 sprite for the pin background, and many sprites for the icon. This way you can have more sprites than you could with first sprite solution. (Sprite sheets are limited in size)

Important note

When working with pins always remember since the centroid of the marker is at the bottom you will need to use offsets to align the pin with the correct location.

I hope this helps.

[mollymerp]

Thanks @rarkins for your issue and @justinhurlburt for the detailed response. Here is a guide for uploading custom markers to studio https://www.mapbox.com/help/custom-images/ Closing as this feature is already supported

[rarkins]

Should I open a separate issue requesting a working example of "traditional" map markers then?

For instance: has the problem been solved to make sure the "pin" is positioned correctly ("above" the coordinates) and not centered on them?

Leaflet/Mapbox.js and almost every other map library that exists makes markers so easy to customise and use. Strange to see so much pushback when users hope for the same from Mapbox GL.

[rarkins]

BTW @mollymerp, the only "Example" on the URL you pasted here is the rather ugly looking one I added a screenshot of in this issue. Maybe that example should be fixed/updated if pin markers are in fact supported.

[andrewharvey]

@rarkins What about the 1st Markers approach @justinhurlburt posted? It supports an offset so the tip of the marker can be set using this offset.

If you use the 2nd Symbols approach, in Mapbox Studio you can set the offset/translate to ensure the marker pin is at the coordinates of the feature.

You might want to take a look at this example https://bl.ocks.org/andrewharvey/db2e3421b8f0c58be06cdfff156527ae

[rarkins]

@andrewharvey thank you very much for posting your bl.ocks example

[aidanlister]

I've just done the journey of going through all the interlinking github threads about this issue.

Am I understanding it correctly that the best mapbox has to offer (without using Mapbox Studio, and for a larger number of pins) is something like this:

http://jsfiddle.net/2y8t3m1b/

That feels like a significant step back from what we had with mapbox.js? Wouldn't markers on the map the most common use case and something that should be nice out of the box?

[andrewharvey]

@aidanlister see https://github.com/mapbox/mapbox-gl-js/issues/4322#issuecomment-282080798 it describes the two main approaches of Symbols vs Markers, one approach you're using HTML to draw divs on the map the other you're using Mapbox GL to render images as part of your map style.

[aidanlister]

@andrewharvey thanks - I understand the two options, I've gone with the first option but as I mentioned it's not performant.

I'd like to go with the second option, but there's no example showing what I think would be the most common use case (markers). The jsfiddle I linked shows the two layers with markers and numbers, but it's not very attractive and neither the marker nor number can be coloured?

Surely that's not the best we can do as an example?

[andrewharvey]

@andrewharvey thanks - I understand the two options, I've gone with the first option but as I mentioned it's not performant.

I'd like to go with the second option, but there's no example showing what I think would be the most common use case (markers). The jsfiddle I linked shows the two layers with markers and numbers, but it's not very attractive and neither the marker nor number can be coloured?

Surely that's not the best we can do as an example?

Depends what you mean by "marker". In GL JS "Marker" is an HTML element with a lng,lat which GL JS will position on your map for you. In the cartographic sense marker is just a pin/icon on the map.

Did you see the example at Did you see the example https://docs.mapbox.com/mapbox-gl-js/example/cluster-html/ you get the performance of clustering but the styling flexibility of using HTML/CSS.

If you use a Symbol layer, you can still do a lot in terms of the style. You can colour the text with a similar approach to https://docs.mapbox.com/mapbox-gl-js/example/display-and-style-rich-text-labels/, you can even now stretch your icon to fit your text https://docs.mapbox.com/mapbox-gl-js/example/add-image-stretchable/ and you can set a dynamic colour for your symbol icon https://docs.mapbox.com/mapbox-gl-js/example/add-image-generated/.

You should be able to use the latter approach to generate custom pins with custom colours and custom text inside the pin.

[aidanlister]

That's all great except I just want a marker out of the box, like every other mapping product has ...

There needs to be an example with nice looking markers like this:

I spent so long trying to replicate this we've actually started stripping mapbox out of our app going back to plain old google maps.