Mapbox GL JS with Maki icons by Marker

Question

I generated a list of Maki Icons I want to use via the original icon editor.

drawMarkers() {
  let self = this;
  const mapboxgl = require("mapbox-gl");
  let data = this.draw.getAll();

  data.features.forEach((feature) => {
    if (feature.geometry.type == "Point") {
    
      var icon = feature.properties.icon;

      var title = feature.properties.title;
      if (typeof title === "undefined") {
        title = "Info";
      } else {
      var popup = new mapboxgl.Popup({ offset: 25 }) // add popups
          .setHTML(`<h3>${title}</h3>`);

      var marker = new mapboxgl.Marker({
        color: '#333',
        draggable: false,
        scale: 1,
      })
        .setLngLat(feature.geometry.coordinates)
        .setPopup(popup)
        .addTo(self.map);
    }
  });

The Markers are showed correctly on the Mapbox.

The GeoJSON is like this:

"type":"FeatureCollection",
    "features":[
      {
         "id":"c749de6a6eac6b1cfdda890e7c665e0d",
         "type":"Feature",
         "properties":{
            "icon":"ferry",
            "title":"This should show a Ferry icon",
            "portColor":"#d9eb37"
         },
         "geometry":{
            "coordinates":[
               6.12,
               22.44
            ],
            "type":"Point"
         }
      },

I want the Maki Icons also added in the Marker, but I cannot find any documentation of how icons can be used inside the Mapbox Marker.

Who can help me out? I'm using the Mapbox GL JS for Web.

Answer 1

It depends on how you've created your map. You can either:

• Create your own map style using the Maki icons you've generated. This is done using the Mapbox studio to create your custom map style, then adding it to your application.

• Create custom markers that use the maki .svg files you've created. This can be done by passing a custom element to the new mapboxgl.Marker() function. So, instead of:

    var marker = new mapboxgl.Marker({
      color: '#333',
      draggable: false,
      scale: 1,
    })
  

  you would pass:

    var marker = new mapboxgl.Marker(customElement)
  

  where customElement uses the data from your icons variable. I'm not sure if you're using plain JS here, but there's some examples on the mapbox docs of ways you can do this.

  Because you've generated your own list of Maki icons, I'd suggest downloading them and maybe host them somewhere so that you can get away with creating your markers with <img src="link to hosted maki marker"/> or something of the sort