search

Wildhoney / Leaflet.FreeDraw

:earth_asia: FreeDraw allows the free-hand drawing of shapes on your Leaflet.js map layer – providing an intuitive and familiar UX for creating geospatial boundaries similar to Zoopla and others. Included out-of-the-box is the concaving of polygons, polygon merging and simplifying, as well as the ability to add edges and modify existing shapes.
https://freedraw.herokuapp.com/
MIT License
544 stars 103 forks source link

Why is there no edit point? #183

Open trowa1234 opened 3 years ago

trowa1234 commented 3 years ago

leaflet: 1.7.1 leaflet-freedraw: 2.13.2

createDraw() {
      this.freeDrawInstance = new FreeDraw({
        mode: CREATE | EDIT | DELETE
      });
      this.MAP.addLayer(this.freeDrawInstance);
      this.freeDrawInstance.on('markers', event => {
        console.log(event.latLngs);
      });
    }

my screenshot: image

Example screenshot: image

thucvu97 commented 1 year ago

it works import FreeDraw, { ALL} from 'leaflet-freedraw'; const freeDraw = new FreeDraw({ mode: ALL });

update css

.leaflet-container { height: 400px; width: 90%; margin: 0 auto; }

path.leaflet-line { stroke: #50622b; stroke-width: 2; }

div.leaflet-edge { background-color: #95bc59; box-shadow: 0 0 0 2px white, 0 0 10px rgba(0, 0, 0, 0.35); border-radius: 50%; cursor: move; outline: none; transition: background-color 0.25s; }

div.leaflet-edge.disabled { pointer-events: none; background-color: #bbb; }

path.leaflet-polygon { fill: #b4cd8a; stroke: #50622b; stroke-width: 2; fill-opacity: 0.75; }

.map.mode-create { cursor: crosshair; }

.checkboxContainer { display: flex; flex-direction: column; margin: 40px 40px; }