CODEWITHSUNDEEP
mapboxmapbox-gl-jsmapbox-glmapbox-markermapbox-gl-draw
Viraj Amarasinghe
Viraj Amarasinghe

Reputation: 941

Is there a way to draw different icons for draw points in Mapbox GL js?

In Mapbox GL js, is there a way to draw different draw_point icons in same map. I'm going to add drawing tools and there are different icons. After selecting one icon, the user can be able to draw the map. Ex: user can select tree icon and place that icon on the map. Then the user can select a house icon and put a house on the map.

Upvotes: 2

Views: 1537

Answers (1)

sepideh sh
sepideh sh

Reputation: 1

const mapBoxDrawOptions = {
  displayControlsDefault: false,
  controls: {},
  styles: [
    {
      id: 'gl-draw-point',
      type: 'symbol',
      filter: ['all', ['==', '$type', 'Point'], ['!=', 'mode', 'static']],
      layout: {
        'icon-image': 'custom-icon',
        'icon-size': 1,
        'icon-anchor': 'bottom',
      },
    },
  ],
};

Add 'mapBoxDrawOptions' to:

const draw = new MapboxDraw(mapBoxDrawOptions);

And on 'draw.create', Add this part:

map.on('draw.create', () => {
    if (draw.getMode() === 'draw_point') {
      map.loadImage('Your_Icon_Is_Here', (error, image) => {
        if (error) throw error;
        image && map.addImage('custom-icon', image);
      });
    }
  });

Upvotes: 0

Related Questions