Get Marker Feature Instance in MapBox

Question

I'm new to mapbox GL JS and am following this example: Add custom markers in Mapbox GL JS https://www.mapbox.com/help/custom-markers-gl-js/

Let's say I modify the example above to include 100 different animal markers. How do I change the draggable property of a specific marker after it has been added to the map?

Example: Change the draggable property of the dog marker.

It would be nice to do something like this: map.getMarker('dog').setDraggable(true);

I don't see a way to query any of the markers added to my map or modify a specific marker's properties like setLatLng, setDraggable after they have been added to a map. There is no method to get the collection of markers added to a map. Thanks for any help!

Answer 1

For change marker property like draggable check its api. IE https://www.mapbox.com/mapbox-gl-js/api/#marker#setdraggable

Mapbox custom marker is build by html element. If you want to change visual display of custom marker element, you should update Its inside html. For example, here are 2 functions I use to create a div with image background then return it as a image marker

    /**
     *  @function CustomMarkerWithIcon(): constructor for CustomMarker with image icon specify
     *  @param lnglat: (LngLat) position of the marker
     *            map: (Map) map used on
     *           icon: (image) object for custom image
     */
    function CustomMarkerWithIcon(lnglat, map, icon) {
        var el = document.createElement('div');
        el.className = 'marker';
        el.style.backgroundImage = 'url("' + icon.url + '")';
        el.style.backgroundSize = 'cover';
        el.style.width = icon.size.width;
        el.style.height = icon.size.height;
        el.style.zIndex = icon.zIndex;

        return new mapboxgl.Marker(el)
                    .setLngLat(lnglat)
                    .addTo(map);
    }


    /**
     *  @function ChangeMarkerIcon(): change marker icon
     *  @param marker: (marker) marker
     *           icon: (image) object for custom image
     */
    function ChangeMarkerIcon(marker, icon) {
        var el = marker.getElement();
        el.style.backgroundImage = 'url("' + icon.url + '")';
    }

Answer 2

You're right: Mapbox GL JS doesn't store references to markers. However, you can store your own references to the markers in an array at the time that you generate them.

In this example below, I am looping over a set of GeoJSON point features and creating a custom HTML marker for each:

let markersArray = [];

geojson.features.forEach(feature => {
  // create a HTML element for each feature
  let el = document.createElement("div");
  el.className = "marker";
  el.innerHTML = `
    <img src="custom-marker.png" height="20px" width="20px" />
    <span class="marker-label">${feature.properties.name}</span>
  `;

  // make a marker for each feature and add to the map
  let marker = new mapboxgl.Marker({
    element: el,
    anchor: "top"
  })
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);

  // add to my own array in an object with a custom 'id' string from my geojson
  markersArray.push({
    id: feature.properties.id,
    marker
  });
});

This id string can be whatever you want. You can even store other parameters if you want to be able to query other things, like latitude/longitude:

markersArray.push({
  id: feature.properties.id,
  coordinates: feature.geometry.coordinates,
  marker
});

Then, if I want to access the marker's instance members (like setDraggable), I can use Array.find() to return the first instance that matches my search parameters in markersArray:

let someIdQuery = "some-id";

let queriedMarkerObj = markersArray.find(
  marker => marker.id === someIdQuery
);
queriedMarkerObj.marker.setDraggable(true);

(Note that Array.find() just returns the first instance in the array that matches your condition. Use something like Array.filter() if you want to be able to query for more than one marker.)