CODEWITHSUNDEEP
javascriptpythonsqliteleafletgeojson
nonothingnull
nonothingnull

Reputation: 37

(Closed) Leaflet.js: How I can Do Editing Geometry On Specific Object I Select Only?

I am very excited and lot of fun playing with Leaflet.JS on gis mapping stuff. I am newbie. I also very appreciate with bro @Grzegorz T. with the kindness and helping me on introduction me to Leaflet.JS.

Now, I am plan to do Editing geometry on specific object I select only. I already think how the flow and the result but the process???(hahahaa..). I also already know regarding DrawItems function on Leaflet.JS but I will use.

Let me describe simple flow before I do it...

A. I just using jsfiddle1 @Grzegorz T.

B. I add DrawItems

...
{ 'DrawLayer': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
...

    //Add Draw Control//
    map.addControl(new L.Control.Draw({
        edit: {
            featureGroup: drawnItems,
            poly: {
                allowIntersection: false
            }
        },
        draw: {
            polygon: {
                allowIntersection: false,
                showArea: true
            }
        }
    }));

    //Draw Objects//
    map.on(L.Draw.Event.CREATED, function (event) {
        var layer = event.layer;
        drawnItems.addLayer(layer);
    });

    //Get Leaflet Object ID 
    drawnItems.on('click', function(event) {
      console.log("from drawnItems: " + event.layer._leaflet_id);
    });
        

  //Get Geometry from Layer & ID

  //Edit Only This Objects

  //Save This Editing Back to Original Layer & ID

on this part I saw a Problem is:

1. I don't know how to copy original geometry I selected from layer to DrawLayer.

2. Hide only this geometry(id) on original layer until end of editing or cancel. (maybe change opacity to invisible)

3. After finish editing and while saving How I can save back to original layer and show the result to map.

I hope whos hardcore and whos already found the easy way on Leaflet.JS can help me for this dirty work....

Update 3/3/2022

I found how to restyle the object(geometry) I selecting and this was cover for: 2. Hide only this geometry(id) on original layer until end of editing or cancel. (maybe change opacity to invisible)

Code like below:-

  onEachFeature: function (feature, layer) {           
    //restyle the geom when display
    layer.setStyle({
      fillColor: "white",
      weight: 2,
      color: "#eb4034",
      fillOpacity: 0.7,
    });

    layer.on("mouseover", function (e) {
      // style
      this.setStyle({
        fillColor: "#eb4034",
        weight: 2,
        color: "#eb4034",
        fillOpacity: 0.7,
      });
    });
    layer.on("mouseout", function () {
      // style
      this.setStyle({
        fillColor: "#3388ff",
        weight: 2,
        color: "#3388ff",
        fillOpacity: 0.1,
      });
    });
    layer.on("click", function () {
      this.setStyle({
        fillColor: "transparent",
        weight: 0,
        color: "transparent",
        fillOpacity: 0,
      });

    });
  },

Update 4/3/2022

Anyone can help me how to passing geometry to drawnitems programmatically with editing mode? Let say I have whatever geometry like this below:-

...... {"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[16.3716,54.4414],[16.3946,54.4477],[16.4315,54.487],[16.4797,54.5164],[16.4968,54.5231],[16.5299,54.5407],[16.6145,54.5598],[16.6887,54.5696],[16.6991,54.5692],[16.7126,54.5542],[16.7392,54.5384],[16.7481,54.5276],[16.7392,54.5177],[16.7566,54.4946],[16.764,54.4861],[16.7933,54.4874],[16.8275,54.4648],[16.8211,54.4563],...... ........ ,"properties":{"id":4,"nazwa":"zachodniopomorskie"},"id":3}

How I can pass this polygon (geometry) into drawnItems layer programmatically?

Please help me and thanks you on advance for read this message.

Upvotes: 1

Views: 843

Answers (1)

nonothingnull
nonothingnull

Reputation: 37

After struggling a few days finally I found solutions to accomplish my task. It's not pretty but at least I fill ok and all I need are there.

I using

layer.on("click", function(e) {

to get the geometry and id from original layer. The original geometry I pass to drawnItems by using

geojsonLayer = L.geoJson(oriGeom);
geojsonLayer.getLayers()[0].addTo(drawnItems);

to draw back on drawing layer to do editing. On mean while I adjust the style on original geometry to invisible. The editable geometry only can see on this stage where user 'think' this is original geometry he/she do editing right now.

  onEachFeature: function (feature, layer) {           
    //restyle the geom when display
    layer.setStyle({
      fillColor: "white",
      weight: 2,
      color: "#eb4034",
      fillOpacity: 0.7,
    });

    layer.on("mouseover", function (e) {
      // style
      this.setStyle({
        fillColor: "#eb4034",
        weight: 2,
        color: "#eb4034",
        fillOpacity: 0.7,
      });
    });
    layer.on("mouseout", function () {
      // style
      this.setStyle({
        fillColor: "#3388ff",
        weight: 2,
        color: "#3388ff",
        fillOpacity: 0.1,
      });
    });
    layer.on("click", function () {
      this.setStyle({
        fillColor: "transparent",
        weight: 0,
        color: "transparent",
        fillOpacity: 0,
      });

After finish the editing I save back to original layer by using Python class by search ID and replace the original coordinates to new coordinates (editGeom) only. :)

Then I delete all object inside drawnItems layer by this trick

  document.querySelector(".leaflet-draw-edit-remove").click(); //fake click Delete
  document.querySelector("ul li:last-child a").click(); //fake click Save All

That's all.

Upvotes: 1

Related Questions