0

I know, that this topic has been considered earlier. I have got a few examples here:

https://stackoverflow.com/questions/34738805/update-properties-of-geojson-to-use-it-with-leaflet/34740632#34740632

Leaflet.draw: add attributes and save to file

https://jsfiddle.net/ve2huzxw/314/

Adding comments using leaflet draw

and here:

Addig title to marker or shape using Leaflet Draw?

My code looks like this:

  var drawnItems = L.featureGroup().addTo(map);

  map.addControl(new L.Control.Draw({
    edit: {
        featureGroup: drawnItems,
        poly: {
            allowIntersection: false
        }
    },
    draw: {
        polygon: {
            allowIntersection: false,
            showArea: true,
    shapeOptions: {
    color: 'purple'
    },
        },
    polyline: {
    shapeOptions: {
    color: 'orange'
    },
    }
    }
}));

 map.on('draw:created', function (event) {
var layer = event.layer,
    feature = layer.feature = layer.feature || {}; // Intialize 
 layer.feature

feature.type = feature.type || "Feature"; // Intialize feature.type
var props = feature.properties = feature.properties || {}; // Intialize 
 feature.properties
props.title = "my title";
props.content = "my content";
var content = '<span><b>Shape Name</b></span><br/><input id="shapeName" 
type="text"/><br/><br/><span><b>Shape Description<b/></span><br/><textarea 
id="shapeDesc" cols="25" rows="5"></textarea><br/><br/><input type="button" 
id="okBtn" value="Save" onclick="saveIdIW()"/>';

drawnItems.addLayer(layer);
});

 function saveIdIW() {
    var sName = $('#shapeName').val();
   var sDesc = $('#shapeDesc').val();
   var drawings = drawnItems.getLayers(); //drawnItems is a container for the 
drawn objects
    drawings[drawings.length - 1].title = sName;
    drawings[drawings.length - 1].content = sDesc;
    map.closePopup();
    };

 //Export
 document.getElementById('export').onclick = function(e) {
  // Extract GeoJson from featureGroup
  var data = drawnItems.toGeoJSON();
  // Stringify the GeoJson
  var convertedData = 'text/json;charset=utf-8,' + 
  encodeURIComponent(JSON.stringify(data));
  // Create export
  document.getElementById('export').setAttribute('href', 'data:' + 
  convertedData);
   document.getElementById('export').setAttribute('download', 
  'Drawing.geojson');
  }

I was trying to replace the map.on section with:

 map.on('draw:created', function (e) {
 var idIW = L.popup();
 var content = '<span><b>Shape Name</b></span><br/><input id="shapeName" 
 type="text"/><br/><br/><span><b>Shape Description<b/></span><br/><textarea 
 id="shapeDesc" cols="25" rows="5"></textarea><br/><br/><input type="button" 
 id="okBtn" value="Save" onclick="saveIdIW()"/>';
 idIW.setContent(content);
 idIW.setLatLng(latlng); //calculated based on the e.layertype
 idIW.openOn(map);
 }

 function saveIdIW() {
 var sName = $('#shapeName').val();
 var sDesc = $('#shapeDesc').val();

 var drawings = drawnItems.getLayers();  //drawnItems is a container for the 
 drawn objects
 drawings[drawings.length - 1].title = sName;
 drawings[drawings.length - 1].content = sDesc;

 if (idIW) {
    map.closePopup();
 }

}

as per the example given:

Addig title to marker or shape using Leaflet Draw?

but unfortunately I cannot finish my polygons at the 1 node point. The console says:

Uncaught ReferenceError: latlng is not defined at i. ((index):81) at i.fire (leaflet.js:5) at i._fireCreatedEvent (leaflet.draw.js:9) at i._fireCreatedEvent (leaflet.draw.js:9) at i._finishShape (leaflet.draw.js:9) at i.fire (leaflet.js:5) at i._fireDOMEvent (leaflet.js:5) at i._handleDOMEvent (leaflet.js:5) at HTMLDivElement.s (leaflet.js:5)

There is no option to have a similar effect as per in the example given. Besides there is no saving option at all.

Is there some way to have an option to save these drawings in .geojson format (which I already have) with their additional attributes like name, description, etc?

The example with textarea provided here:

https://jsfiddle.net/ve2huzxw/314/

doesn't provide working export option.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.