Add support for markers

[tomaspinho]

I want to use this library in conjunction with the Mapbox service for a game I am currently developing. However, we need support for custom markers like the Google Maps JavaScript API provides. We need markers with custom images, bindable events and a similar simple API.

[mourner]

This is possible already with the GeoJSON support — you can add markers to the map with it, style it just like you would style the OSM POIs, and add interactivity using source.featuresAt method.

But we definitely should make a simple example for this. So more of a docs task.

[jfirebaugh]

Added an example, but this is not as easy or nice as it should be. The markers don't look like the familiar Mapbox.js markers. With a SDF icon and multiple layers, you could make it look more like that, but if you are using a default GL style, you are limited to the markers and SDF icons provided by that style.

One approach would be to supply a built-in sprite sheet with an SDF marker background and maki SDFs, and a default stylesheet for markers that layers the maki icon on top of the background and supports standard tokens from GeoJSON properties -- marker-color, marker-symbol, etc. This would require support for multiple stylesheets / multiple sprites.

[mourner]

I like the markers sprite + stylesheet approach, but the problem with it is that in a style that uses maki icons for POIs, we would duplicate most of the sprite. Maybe we should find some middle ground first — e.g. push multiple sprites and/or individual images, then reference a marker sdf in the stylesheet, and add stylesheet code that overlays maki icons in the example style (not doing it built-in yet).

Other tasks for the example:

• figure out why the points collide with other symbols (e.g. "Mapbox SF" colliding with "San Francisco" label
• add some interactivity — make markers clickable or hoverable, add some basic tooltip

[tomaspinho]

Would it also be possible for you to add a simple example on how to add interactivity using the featurestAt method? Thank you very much!

[alanmclean]

Also would love to see an example for how to make markers interactive. I'm trying to reposition a marker within the map as the user drags.

[PeterPablo]

The link to the example by @jfirebaugh gives a 404. Was the page moved?

[jfirebaugh]

Yeah, sorry about that. I updated the link.

[incanus]

I like the markers sprite + stylesheet approach, but the problem with it is that in a style that uses maki icons for POIs, we would duplicate most of the sprite.

On native, this is less likely to need to support Mapbox-style markers and/or Maki and more likely to need arbitrary client-provided imagery for markers. So we should probably focus on an approach that works in this generalized case — probably multiple sprite sheets.

[easinewe]

I would love to see some more documentation on the styling markers and initiating pop-ups. Api is somewhat limited without that feature.

[jescalan]

An example of how to make markers with custom images would be wonderful. I'm tinkering with this a bit and am nowhere close to figuring it out, to be honest. Happy to help out with working on this slash documenting it if you guys need!

[jescalan]

Any progress here? This is the only thing preventing me from moving forward with mapbox at the moment...

[tomaspinho]

@Jenius try this: https://www.mapbox.com/mapbox-gl-style-spec/#sprite
with this: https://github.com/mapbox/mapbox-gl-js#sprite-generation
It does the job, even though it requires quite a bit of setup

[jescalan]

Woah, ok. So once I have generated a sprite sheet and provided it through that option, how do i make one of the sprites into a custom marker?

[jescalan]

Hey @theburdencarrier -- do you know any more about how to go about doing this? It seems like you need specific sizes for the sprites, do you know what they are supposed to be? It also seems like you need to run an icon generation afterwards with some sort of positions json file to map names to sprite positions if you want them to line up. Any more info on this second task would be great too.

Even just a short writeup that walked through how to do this would be really quite useful!

Also, is there no way to do the interactively? For example, if I were making a map that I wanted to plot peoples' faces on, and I could pull the face images with the map data, is there a way to map that image to a location where I'm going to drop a marker? Running a bunch of build scripts in that context isn't really feasible.

[hawaiikaos]

Adding my voice to this request for better documentation. Customising icons should be something that's super simple (and is in Google Maps). Using the maki sprites are just totally inadequate for most use cases. MapBox should at least have a well documented example.

[michito]

I'm with @hawaiikaos here. Please add a good example. I'd love to implement Mapbox GL for a project but I'm struggeling to add custom markers.

[robschley]

Is handling map labels that show up on mouse hover within the scope Mapbox GL or is that something that should be handled in HTML/JS? I tried to use some trickery to get the current hover point and bind the GeoJSON properties to a separate symbols layer to dynamically show labels when you mouse over certain GeoJSON polygons but it doesn't work fluidly. I'm using the GeoJSON source setData() API but the layer doesn't seem to be redrawn until I change the zoom level of the map. When I start zooming in and out, it sometimes works but it appears to also cache previously rendered points as well.

Edit - My issue was fixed by switching to master build after I saw this commit: 998a543

[jfirebaugh]

Lately I've been thinking of "Markers" as being more of a series of incremental improvements and additions than as a monolithic feature. These include:

• Data-driven styling (support per-feature style attributes #146). This is in itself a collection of features:
  • Data-driven functions (a.k.a. "scales" -- Stop functions based on arbitrary properties (not zoom) mapbox-gl-style-spec#226)
  • Arithmetic operators (Allow arbitrary expressions in functions, filters, and cluster aggregators mapbox-gl-style-spec#47)
  • Tokens in number/color properties (Support tokens in number properties mapbox-gl-style-spec#105)
• Highlight individual features (Support "hover" and "active" styles for features #200)
• Style-aware hit testing (style-property-aware hit testing #316)
• Popups (Popups #325)
• Make adding GeoJSON easier (Make adding GeoJSON easier (skipping style modifications) #327)
• Default layers for data overlays (Allow developers to add GeoJSON source and style layer in one step mapbox-gl-style-spec#162)
• Multiple sprites and individual images in style (Allow styles to use multiple sprites and individual images #358)
• Sort symbols by y-axis (Sort point features by y-axis #470)
• Get unprojected geometry from featuresAt (Accessing street line data #723) / in fact just GeoJSON (featuresAt should return GeoJSON #1010)
• "per-layer" mouse events + automatically provide target feature in event (Add a "layers" parameter to "Evented#on"  #1002)

There is one marker related thing that's major enough to disqualify as "incremental" in my book, and that's clustering (#837).

[incanus]

Awesome, great way to break the progression down @jfirebaugh.

As I showed in chat the other day with @kkaefer @1ec5, on the native side, we have a high bar for markers to "just work" in the way that devs expect.

Note how selection changes despite the gesture location not changing, so that obscured markers can be cycled through. Also, the selected marker temporarily moves to the front. These are the absolute barebones, simple pins without styling, added to an Apple map.

As we think about how this builds out on JS and native, taking a staged approach lets us focus on the things we need to ship for an MVP, then the rest of what people might expect of a toolkit, then the things that no one expects because it's brand new territory.

And agree on clustering.

[stepankuzmin]

Crossposting this question.

Is there are any plans for leaflet-like markers styling? It could be something like L.divIcon which deals with gl context. It would be nice to have ability to style markers with all webgl power. Also it is not so simple to build custom markers using sprites, if marker display depends on it's content. I mean that I must have sprite icon for every possible marker view. So instead of that I want to handle marker displaying by myself.

[mirraj2]

All I want are good looking static markers. I literally just switched to google maps from mapbox because google maps lets me use whatever static image I want for my markers. On mapbox, it is HELL to use a basic PNG image as a marker.

The example you gave me uses built-in marker images that look like complete crap. I want to use actual good looking markers.

[Randgalt]

Well, @lucaswoj the old JS library did perfect markers. All we want is what your other product already supports.

[ttoni]

Couple of points that where key to a map marker in my mapbox-js projects and fully possible with leaflet html markers:

• Background image (f.e. png with shape of marker)
• Font image (f.e. user avatar that was fetched from s3 and replaced a default user icon at)
• Text overlay that has css styling (f.e. place name, user name, badge)

That´s not possible with static image markers or I couldn´t find a good documentation on how to achive this. Some map projects of mine are really stalled now because of this missing feature.

[mtin79]

@lucaswoj :
I can't see how to easily (or at all) create your own markers (styling e.g.: with images like animated gifs, png, ...) via GeoJSONSource#setData as you mentioned above "Add marker in source #2552".
For me this issue is not closed.

[n1ghtie]

@mtin79 follow this guide #822 (look at what @peterqliu says), I found this useful. Although I agree there should be an easier way to do this.
Also this is useful. https://www.mapbox.com/help/custom-markers/
Simply upload your custom svg's and reference them as "marker-symbol" in your "FeaturesCollection"

[lucaswoj]

@mtin79 Adding new icons/images/sprites at runtime is a separate issue: #358

[zo0m]

@n1ghtie Hello, I have issue with adding custom markers. I read help article from your link but I cant find button "Add SVG Images".
It should be here:

I dont see it:

Could you please help me. Thanks

[tristen]

@zo0m the dialog appears when you click the text input field (to the right of the "image" label), not the edit by zoom level link.

[mourner]

Pushed a basic implementation in #2725.

[tomaspinho]

Wow, thanks @mourner and the rest of the Mapbox team!

[samvermette]

I tried adding my own SVGs to the icon library of a custom mapbox style (based off the Streets style) and was never able to link to them.. every other icon worked, but not the ones I uploaded. I published the style, made sure I was linking my Mapbox to it... tried different names...

Ended up downloading the style's json and switching the sprite reference to a custom json which only contains the icons I initially wanted to show, but now I lost every other icon too (highway shields, park, etc). Can't believe how painful it was to show custom images on the map. Any clue on why my custom icons aren't working as part of an existing style?

[n1ghtie]

How do you reference them? It should be like this

var markers = {
    "type": "FeatureCollection",
    "features": [{
      "type": "Feature",
      "properties": {
        "marker-symbol": "Volcano" // name of symbol in your sprite sheet
      },
      "geometry": {
        "type": "Point",
        "coordinates": [-155.24917602539062,
          19.326046963894633
        ]
      }
    }]
}
  map.addSource("markers", {
    "type": "geojson",
    "data": markers
  });
  map.addLayer({
    "id": "markers",
    "type": "symbol",
    "source": "markers",
    "layout": {
      "icon-image": "{marker-symbol}" //important to have it!
    }
 });

If you upload your images under mapbox studio and reference the name correctly you will get an image on your map :)

[achalnexus]

How to dynamic market not set in map box. I am list of data get and one by one marker set in mapbox but not successfully set marker.
I m wrote code this type of code..

var MarkerDatalist=[];
map.addSource("markers", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [MarkerDatalist]
}
});

map.addLayer({
    "id": "markers-layers",
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.3],
        "text-anchor": "top"
    }
});

function CreateMarker(pID, pointlong, pointLat, icon1, InfoHTML, bDraggable, sTitle, ParkName, Parksize) {
var MapMarkerset = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [pointlong, pointLat]
        },
        "properties": {
            "id": pID,
            "title": sTitle,
            "description": InfoHTML,
            "parksize": Parksize,
            "marker-symbol": "monument"
        }
    }]
}
MarkerDatalist.push(MapMarkerset);
//map.getSource('markers').setData(MapMarkerset);

}

and other issue is zoom in out page reload in asp.net..?
Give me some help.

[kylebebak]

Adding markers to a map is really basic functionality. I put it to the Mapbox devs that most people, if they knew how difficult it was to render a few hundred markers with custom styles to a map, wouldn't even consider using Mapbox for a project.

The attitude I've seen in these issues regarding markers is really disconcerting, and will ensure that a lot of users migrate to Google Maps.

Better documentation is needed, with an example showing exactly how to handle this use case. It's a really common use case. It's probably the most common use case.

[ryanbaumann]

@kylebebak See https://www.mapbox.com/mapbox-gl-js/example/add-image/ for a great example of adding a custom icon / marker at runtime.

[Rajavelu]

Hi, any examples for handling mouseover, click events on markers which are created as symbol layer?

[fallenartist]

Such an example can be found in examples: https://www.mapbox.com/mapbox-gl-js/example/center-on-symbol/ 😃

[melroy89]

I know this is closed, but I still miss the basic marker by using geojson.

How cool would it be to have addLayer({ "type": "marker" (which implements mapboxgl.Marker()). So I do not need to create my own sprites and images, png and whatever!

This really drove my crazy today###.
So now I even need to convert to SDF in order to color my markers again :\