0

I am using “togeojson” and “Leaflet.FileLayer” for File upload in my leaflet draw using below Code:

    L.Control.FileLayerLoad.LABEL = '<img class="icon" src="folder.svg" alt="file icon"/>';
    var style = {color:'red', opacity: 1.0, fillOpacity: 1.0, weight: 2, clickable: false};
  var LoadFile =  L.Control.fileLayerLoad({
     position: 'topright',
    layer: L.geoJson,
    // See http://leafletjs.com/reference.html#geojson-options
    layerOptions: {style: {color:'red'}},
    // Add to map after loading (default: true) ?
    addToMap: true,
    // File size limit in kb (default: 1024) ?
    fileSizeLimit: 1024,
    // Restrict accepted file formats (default: .geojson, .kml, and .gpx) ?
    formats: [
        '.geojson',
        '.kml',
        '.gpx'
    ]
}).addTo(map);

How do I access upload file data so I can put it into editable layer and edit uploaded draw and save as geojson?

I have previously load geojson to leaflet draw and edite json + save to database but not success to get upload from directory.

1
  • I did this but not Work: var LoadFileoption = { position: 'topright', fileSizeLimit: 1024,} var geofile = L.Control.fileLayerLoad({ layerOptions: LoadFileoption, onEachFeature: function (feature, layer) { var layers = layer; addPopup(layer); editableLayers.addLayer(layers); } }).addTo(map); addNonGroupLayers(geofile, editableLayers); Oct 6, 2016 at 7:46

1 Answer 1

2

Firstly, Leaflet.FileLayer does not upload data. It reads it from a local file, client side, and renders it locally. Uploading to a remote database is a separate operation.

Using your code, when you add a local layer, it will emit a 'data:loaded' event (see documentation). On this event, initialize a draw control (or tweak an existing one) setting the 'edit' attribute of the draw control options to e.layer from the 'data:loaded' event. That will make that layer editable. The major gotcha here is the limitation on leaflet.draw: Leaflet.draw does not work with multigeometry features such as MultiPoint, MultiLineString, MultiPolygon, or GeometryCollection, so you may need to preprocess you data.

After editing, saving to a remote DB will depend a lot on your backend. What server are you using? If you have a server supporting WFS-T, it should be straightforward, If you are using a Node server (especially with sockets), it is also relatively easy (just export your edited layer with toGeoJson and send to the server, where you can use something like Sequelize to store in the database for instance.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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