5

I want to create a simple web page, where user can create features (with Leaflet.Draw), add attributes (ex. name/description) and save created features to file, ex. geojson. So far creating, adding attributes and saving is working, but saved geojson files does not have added attributes. Maybe they are not added or mayby I need to update drawnItems in some way... I have learned from these resources:

Adding comments using leaflet draw

Leaflet Draw - add title to marker or shape?

Here is my code:

<div id="map"></div>
<a href='#' id='export'>Export Features</a>

//Leaflet.draw
var drawnItems = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
 draw: {
  circle: false,
  rectangle: false,
  polyline: false,
  polygon: false
 },
 edit: {featureGroup: drawnItems}
}).addTo(map);

map.on('draw:created', function(e) {
  var type = e.layerType;
  var layer = e.layer;
  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(layer.getLatLng());
  idIW.openOn(map);
  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', 'drawnItems.geojson');
}

I have created a http://jsfiddle.net/falqn/svha4bpt/ but I do not know why 'save' button do nothing and there is an error: 'Uncaught ReferenceError: saveIdIW is not defined'. I'm new to jsfiddle, maybe I'm doing something wrong. On my test page (local) 'save' button is closing the popup and everything seems to be OK, but in saved geojson file there is no 'Name' and 'Description' attributes in it. I think I'm very close to really easy way to create/edit/save features with Leaflet.Draw. Please help.

3

As for populating the GeoJSON output by drawnItems.toGeoJSON(), you have to explicitly add data to your layers as type and within properties.

See SO post: update properties of geojson to use it with leaflet

In short:

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";
    drawnItems.addLayer(layer);
});

As for the error in your JSFiddle, it is because JSFiddle does not exactly behave like a normal webpage regarding inline JS (your <input onclick="saveIdIW()"/> will not work)

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.