[GIS] Adding different types of marker on the map with using Leaflet.draw

javascriptleafletleaflet-drawmaps

I am using Leafletjs with Leaflet.draw to create an interactive map on my web.

But I need to enable different types of "marker". And then when creating them I need to identify them. I tried adding a title to each marker, but then I can't get it.

attempt 1:
https://jsfiddle.net/k9w2jf05/2/


L.DrawToolbar.include({
    getModeHandlers: function (map) {
        return [
            {
                enabled: true,
                handler: new L.Draw.Marker(map, { icon: new L.Icon.Default() }),
                title: 'Place restaurant marker'
            },
            {
                enabled: true,
                handler: new L.Draw.Marker(map, { icon: new L.Icon.Default() }),
                title: 'Place gas station marker',
                innerHTML: "sdadadds"
            },
            {
                enabled: true,
                handler: new L.Draw.Marker(map, { icon: new L.Icon.Default() }),
                title: 'Place hospital marker'
            }
        ];
    }
});

attempt 2:
https://jsfiddle.net/k9w2jf05/1/

var drawPluginOptions = {
  position: 'topright',
  draw: {
    polyline: false,
    polygon: false,
    circle: false, // Turns off this drawing tool
    rectangle: false,
    circlemarker: false,
    marker: {
    title: "soyel1",
      icon: new MyCustomMarker()
    }
  },
  edit: {
    featureGroup: editableLayers, //REQUIRED!!
    remove: false
  }
};

map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;
    
    /*if(layer.title == "Place hospital marker"){
        do this...
    }*/

  editableLayers.addLayer(layer);
});

I simply need different markers to appear on the bar, with different icons and detect when one or the other is clicked, and when one or the other is deleted. To have 1 of each on the map always.

How can I do that?

Best Answer

There might be other, more 'official' ways, but the only way I could find to get some parameter from marker creation button to marker creation event, is through marker icon properties when marker is created through handler, defined with getModeHandlers option.

Before marker is created with handler new L.Draw.Marker(map, { icon: new L.Icon.Default() }), we create icon as separate object and then any custom property can be added to it. This property can be retrieved inside the marker creation event handler with e.layer.options.icon.myType, where myType can be any name, as long it does conflict with standard icon properties.

In the code below, property named myType is used to bind appropriate tooltip to the marker at the time of marker creation.

To create marker with different icon for each button, it's easy, just create marker with the desired icon.

To change draw icon to custom icon, I tried to find official way, but got lost, so I just used some standard JS HTML CSS trickery to assign the same icons that are used for marker icons to the draw icons.

var iconTitle = [
  'Place restaurant marker',
  'Place gas station marker',
  'Place hospital marker'
];

var iconUrl = [
  'img/restaurant.png',
  'img/gas-station.png',
  'img/hospital.png'      
];

function createDrawnMarker(id, type) {
  var icon = L.icon({
    iconUrl: iconUrl[id],
    iconSize: [38, 38],
    iconAnchor: [19, 37],
    tooltipAnchor: [19, -19]
  });
  icon.myType = type;
  var marker = new L.Draw.Marker(map, {icon: icon});
  return(marker);
}

L.DrawToolbar.include({
  getModeHandlers: function (map) {
    return [
      {
        enabled: true,
        handler: createDrawnMarker(0, 'Restaurant'),
        title: iconTitle[0],
      },
      {
        enabled: true,
        handler: createDrawnMarker(1, 'Gas station'),
        title: iconTitle[1],
        innerHTML: "sdadadds"
      },
      {
        enabled: true,
        handler: createDrawnMarker(2, 'Hospital'),
        title: iconTitle[2]
      }
    ];
  }
});

var drawControl = new L.Control.Draw(drawPluginOptions);
map.addControl(drawControl);

var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

map.on('draw:created', function(e) {
  var type = e.layerType,
  layer = e.layer;
  layer.bindTooltip(layer.options.icon.myType);
  editableLayers.addLayer(layer);
});

var drawButtons = document.getElementsByClassName('leaflet-draw-draw-marker');
for (var i = 0; i < drawButtons.length; i++) {
  var j = iconTitle.indexOf(drawButtons[i].title);
  drawButtons[i].style.backgroundImage ='url(' + iconUrl[j] + ')';
  drawButtons[i].style.backgroundSize = '25px 25px';
  drawButtons[i].style.backgroundPositionX = '2px';
  drawButtons[i].style.backgroundPositionY = '2px';
}
Related Question