javascript - How to change color of first vertex while drawing polygon using Leaflet.Draw? - Stack Overflow

admin管理员组

文章数量:1022516

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.

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

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.

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

• javascript
• maps
• leaflet
• leaflet.draw

Share Improve this question Follow edited Aug 14, 2017 at 13:46 Mahdi Alkhatib asked Aug 14, 2017 at 13:37 Mahdi AlkhatibMahdi Alkhatib 1,98211 gold badge3232 silver badges4343 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

While I was hacking with the Leaflet.Draw and on the creation of polygon I have e 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.

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

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

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

});

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.

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

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.

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

• javascript
• maps
• leaflet
• leaflet.draw

Share Improve this question Follow edited Aug 14, 2017 at 13:46 Mahdi Alkhatib asked Aug 14, 2017 at 13:37 Mahdi AlkhatibMahdi Alkhatib 1,98211 gold badge3232 silver badges4343 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

While I was hacking with the Leaflet.Draw and on the creation of polygon I have e 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.

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

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

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

});

本文标签： javascriptHow to change color of first vertex while drawing polygon using LeafletDrawStack Overflow