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 = '© <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?
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).