Multiple types of markers? Or how to create custom toolbar?

[Jakobud]

There needs to be a way to create multiple types of markers on the map. Is there a way to do this programmatically right now?

I know that probably the most complicated part of this is making the UI for it. So alternatively, is it possible for someone to create their own custom toolbar? The doc's don't say anything about the actual methods that are called when you click the toolbar to start dragging a marker (or drawing) to the map.

[markgibbons25]

The way I did this was when you have placed a new marker, you show a popup so the user can select what type it is.

[Jakobud]

I'm trying to figure out how to extend the marker type so that you can specify multiple types of markers. Anyone know where to start with this?

[Jakobud]

I think that the way to approach this is, when configuring the buttons to add to the toolbar, instead of specifying each button type, specify as many buttons as you want, and for each button, specify what 'type' it is. That would allow you to create as many 'marker' buttons (each with whatever icons you want), and simply specify the button types as type "marker". Anyone else have any better approaches to this?

[jacobtoye]

Sorry for taking so long to get back to you :\

Currently there isn't a nice way to do this. The draw toolbar needs to be updated to handle this type functionality. #116 is a pull to add this support but I haven't had the chance to actually integrate it. Really to support this type of behavior we need to do a decent refactor.

If you want a short term hack you could create you own draw handlers that extend from L.Draw.Marker and change the type. Then you would need to alter the L.DrawToolbar to include you new handler.

[paulcpederson]

@Jakobud

I'm no expert but maybe you could set up multiple options: (shown for a polygon or circle/radius)

var options1 =  {
    showArea: false,
    shapeOptions: {
      stroke: true,
      color: '#00b1dc',
      weight: 2,
      opacity: 0.8,
      fill: true,
      fillColor: null, //same as color by default
      fillOpacity: 0.2,
      clickable: true
    }
  };

var options2 =  {
    showArea: true,
    shapeOptions: {
      stroke: true,
      color: '#000000',
      weight: 2,
      opacity: 0.8,
      fill: true,
      fillColor: null, //same as color by default
      fillOpacity: 0.2,
      clickable: true
    }
  };

Then call them from a custom UI:

var newPolygon = new L.Draw.Polygon(map, options1);

newPolygon.enable();

var newPolygon = new L.Draw.Polygon(map, options2);

newPolygon.enable();

[Oliv05]

Here an example which works for me

   //Ajout d'un nouveau type de marker
   L.Draw.Water = L.Draw.Marker.extend({
    statics : {
        TYPE : 'water'
    },
    options : {
        icon : waterIcon,
        repeatMode : false,
        zIndexOffset : 1000
    // This should be > than the highest z-index any markers
    },

    initialize: function (map, options) {
        // Save the type so super can fire, need to do this as cannot do this.TYPE :(
        this.type = L.Draw.Water.TYPE;

        L.Draw.Feature.prototype.initialize.call(this, map, options);
    }

   });


//Redefinitions d'éléments de DrawToolbar 
   L.DrawToolbar.prototype.options={polyline: {},
        polygon: {},
        rectangle: {},
        circle: {},
        marker: {},
        water : {},
        uploadTrace: {}};


   //Redefinitions d'éléments de DrawToolbar 
   L.DrawToolbar.prototype.getModeHandlers= function (map) {
        return [
            {
                enabled: this.options.polyline,
                handler: new L.Draw.Polyline(map, this.options.polyline),
                title: L.drawLocal.draw.toolbar.buttons.polyline
            },
            {
                enabled: this.options.polygon,
                handler: new L.Draw.Polygon(map, this.options.polygon),
                title: L.drawLocal.draw.toolbar.buttons.polygon
            },
            {
                enabled: this.options.rectangle,
                handler: new L.Draw.Rectangle(map, this.options.rectangle),
                title: L.drawLocal.draw.toolbar.buttons.rectangle
            },
            {
                enabled: this.options.circle,
                handler: new L.Draw.Circle(map, this.options.circle),
                title: L.drawLocal.draw.toolbar.buttons.circle
            },
            {
                enabled: this.options.marker,
                handler: new L.Draw.Marker(map, this.options.marker),
                title: L.drawLocal.draw.toolbar.buttons.marker
            },
            {
                enabled: this.options.water,
                handler: new L.Draw.Water(map, this.options.water),
                title: L.drawLocal.draw.toolbar.buttons.water
            }

        ];
    };

And in the css

.leaflet-draw-toolbar .leaflet-draw-draw-water {
    background-position: -62px -2px;
}

.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-water {
    background-position: -60px -1px;
}

[tridip-bba]

can anyone provide full code in jsfiddle working version

[alaingilbert]

@Oliv05 Is there any way to know what type of marker was placed ?

ie (doesn't work):

map.on('draw:created', function(e) {
  console.log(e.layer instanceof L.Draw.Water);
});