CODEWITHSUNDEEP
javascriptmapsleafletleaflet.draw
Mahdi Alkhatib
Mahdi Alkhatib

Reputation: 1982

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

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();
});

Upvotes: 3

Views: 2302

Answers (4)

Nuri Akman
Nuri Akman

Reputation: 820

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' });

});

Upvotes: 0

BernieSF
BernieSF

Reputation: 1828

For me, worked this way (classes are a little bit different. leaflet 1.3.1 and draw 0.4.3)

        map.on('draw:drawvertex', function (e) {
            $(".leaflet-marker-icon.leaflet-div-icon.leaflet-editing-icon.leaflet-zoom-animated.leaflet-interactive:first").css({ 'background-color': 'green' });
        });

Upvotes: 0

Boris K
Boris K

Reputation: 3580

This is a way to do it with CSS only:

#root
    > main
    > div
    > div.col-sm-8.m-auto.p-0.flex-column.float-right
    > div.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom
    > div.leaflet-pane.leaflet-map-pane
    > div.leaflet-pane.leaflet-marker-pane
    > div:nth-child(2) {
    background: green;
}

Upvotes: 0

Mahdi Alkhatib
Mahdi Alkhatib

Reputation: 1982

While I was hacking with the Leaflet.Draw and on the creation of polygon I have come up with the following code:

    map.on('draw:drawvertex',
        function (e) {
            $(".leaflet-marker-icon.leaflet-div-icon.leaflet-editing-icon.leaflet-touch-icon.leaflet-zoom-animated.leaflet-interactive:first").css({ 'background-color': 'green' });
        });

So, there is a listener you can insert it in your code, draw:drawvertex which means whenever a vertex created I need to do something.

Then, using jQuery you're selecting the first element from this long selector, and set its background color to green or any other color.

Upvotes: 6

Related Questions