javascriptjsonleafletleaflet.draw

geoJson layer to save [for send DB] the features drawn on the map-Leaflet-Draw


I used this method, but

var features = [];
map.on('draw:created', function (e) {
  drawnItems.addLayer(e.layer);
  var layers = drawnItems._layers;
  for (var key in layers) features.push(layers[key].toGeoJSON());
  console.log(drawnItems)
});

But the following error appears in the console log:

Object { options: Object, _layers: Object, _initHooksCalled: true, _leaflet_id: 24, _map: Object, _leaflet_events: Object }

And when I try the following code:

        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
            osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
            map = new L.Map('map', {layers: [osm], center: new L.LatLng(-37.7772, 175.2756), zoom: 15 });

        var drawnItems = L.geoJson();
        map.addLayer(drawnItems);

        var drawControl = new L.Control.Draw({
            draw: {
                position: 'topleft',
                polygon: {
                    title: 'Draw a sexy polygon!',
                    allowIntersection: false,
                    drawError: {
                        color: '#b00b00',
                        timeout: 1000
                    },
                    shapeOptions: {
                        color: '#bada55'
                    },
                    showArea: true
                },
                polyline: {
                    metric: false
                },
                circle: {
                    shapeOptions: {
                        color: '#662d91'
                    }
                }
            },
            edit: {
                featureGroup: drawnItems
            }
        });
        map.addControl(drawControl);

        var geojson_for_FeatureCollection = drawnItems.toGeoJSON();

//to get the drawn item geo data--for poly line
//initialize the array for collect drawn items.
var features = [];


map.on('draw:created', function (e) {

    var type = e.layerType,
        layer = e.layer;

    if (type === 'polyline') {
        // structure the geojson object
        var geojson = {};
        geojson['type'] = 'Feature';
        geojson['geometry'] = {};
        geojson['geometry']['type'] = "Polyline";

        // export the coordinates from the layer
        coordinates = [];
        latlngs = layer.getLatLngs();
        for (var i = 0; i < latlngs.length; i++) {
            coordinates.push([latlngs[i].lng, latlngs[i].lat])
        }

        // push the coordinates to the json geometry
        geojson['geometry']['coordinates'] = [coordinates];

        // Finally, show the poly as a geojson object in the console
        console.log(JSON.stringify(geojson));

    }
    else if 
//to get the drawn item geo data--for polygon   
    (type === 'polygon') {
        // structure the geojson object
        var geojson = {};
        geojson['type'] = 'Feature';
        geojson['geometry'] = {};
        geojson['geometry']['type'] = "Polygon";

        // export the coordinates from the layer
        coordinates = [];
        latlngs = layer.getLatLngs();
        for (var i = 0; i < latlngs.length; i++) {
            coordinates.push([latlngs[i].lng, latlngs[i].lat])
        }

        // push the coordinates to the json geometry
        geojson['geometry']['coordinates'] = [coordinates];

        // Finally, show the poly as a geojson object in the console
       // console.log(JSON.stringify(geojson));
var down = JSON.stringify(geojson);
var a = document.createElement('a');
a.href = 'data:' + down;
a.download = 'down.json';
a.innerHTML = 'download JSON';

var container = document.getElementById('container');
container.appendChild(a);

console.log(down);
    }

    drawnItems.addLayer(layer);

});

//testing.........for featureGroup geo json once  download
map.on('draw:edited', function (e) {
  var layers = drawnItems._layers;
  for (var key in layers) features.push(layers[key].toGeoJSON());
  console.log(drawnItems)
});

map.on('draw:created', function (e) {
  drawnItems.addLayer(e.layer);
  var layers = drawnItems._layers;
  for (var key in layers) features.push(layers[key].toGeoJSON());
  console.log(JSON.stringify(geojson_for_FeatureCollection));
});`enter code here`

    </script>

The console shows:

{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[175.26536464691162,-37.77241087974657],[175.26291847229004,-37.778007869815774],[175.273175239563,-37.77410698208879]]]}}

{"type":"FeatureCollection","features":[]}

What i want to know is how can I append the drawn items to a geojson object to send it to a database?


Solution

  • L.LayerGroup, L.FeatureGroup and L.GeoJSON have a method called toGeoJSON which returns a GeoJSON FeatureCollection:

    var collection = drawnItems.toGeoJSON();
    

    Returns a GeoJSON representation of the layer group (GeoJSON FeatureCollection).

    http://leafletjs.com/reference.html#layergroup-togeojson