How to change color of first vertex while drawing polygon using Leaflet.Draw?

user_3530081 0
Viewed 1807

I am using Leaflet and Leaflet.Draw, and I am letting the user from my code to draw polygon (NOT using the Leaflet Draw Controls).

While the user is drawing the polygon I need to change the color of its first vertex, for example: green, so that user knows that he needs to click on the first point in order to close the polygon and finish drawing.

How can I change color of first vertex while drawing polygon using Leaflet.Draw?

The following image for elaboration, meaning it's fixed with a Paint Software.

This image for elaboration, meaning it's fixed with a Paint Software

P.S. Here is my code

var map = L.map('mapid',
            {
                minZoom: -1,
                maxZoom: 4,
                center: [0, 0],
                zoom: 1,
                crs: L.CRS.Simple
                });

var polygonDrawer = new L.Draw.Polygon(map);

map.on('draw:created', function (e) {
var type = e.layerType, layer = e.layer;
 layer.editing.enable();
  layer.addTo(map);

  });

$(document)ready(function(){
polygonDrawer.enable();
});
leaflet.draw leaflet maps javascript
4 Answers

This is worked for me:

map.on("editable:vertex:dragend", function (e) {

  // Set GREEN color for Vertex START (First) Point
  $(".leaflet-marker-icon.leaflet-div-icon.leaflet-vertex-icon.leaflet-zoom-animated.leaflet-interactive.leaflet-marker-draggable:nth-child(1)").css({ 'background-color': 'green' });

  // Set RED color for Vertex END (Last) Point
  $(".leaflet-marker-icon.leaflet-div-icon.leaflet-vertex-icon.leaflet-zoom-animated.leaflet-interactive.leaflet-marker-draggable:nth-child(2)").css({ 'background-color': 'red' });

});
user_1347390
Related