Skip to content

Instantly share code, notes, and snippets.

@Bouni
Last active January 3, 2016 20:58
Show Gist options
  • Save Bouni/8518273 to your computer and use it in GitHub Desktop.
Save Bouni/8518273 to your computer and use it in GitHub Desktop.
My solution storing and reloading features on a leaflet map edited with leaflet.draw. The features are written to a hidden text-input exportGeoJson(drawnItems, $("#mapdata")); and also loaded from there importGeoJson(drawnItems, JSON.parse($("#mapdata").val()));
$(function () {
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
function exportGeoJson(featureGroup, target) {
var mapdata = {
"map" : {
"center" : map.getCenter(),
"zoom" : map.getZoom()
},
"geoJson": {
"type":"FeatureCollection","features":[]
}
}
featureGroup.eachLayer(function(layer){
feature = layer.toGeoJSON()
if(layer._mRadius != undefined) {
feature.properties.radius = layer._mRadius;
}
feature.properties.style = {
"color" : layer.options.color
}
mapdata.geoJson.features.push(feature);
})
target.val(JSON.stringify(mapdata));
}
function importGeoJson(targetLayer, mapdata) {
if(mapdata.map && mapdata.map.center && mapdata.map.zoom) {
map.setView([mapdata.map.center.lat, mapdata.map.center.lng], mapdata.map.zoom);
} else {
map.setView([51.505, -0.09], 12);
}
if(mapdata.geoJson && mapdata.geoJson.features) {
L.geoJson(mapdata.geoJson.features,{
style: function (feature) {
return feature.properties && feature.properties.style;
},
onEachFeature: function(feature, layer) {
if(feature.properties.radius != undefined) {
L.circle([feature.geometry.coordinates[1],
feature.geometry.coordinates[0]],
feature.properties.radius,
feature.properties.style
).addTo(targetLayer);
} else {
targetLayer.addLayer(layer);
}
}
})
}
}
importGeoJson(drawnItems, JSON.parse($("#mapdata").val()));
var drawControl = new L.Control.Draw({
draw: {
polyline: {
shapeOptions: {
color: 'lime'
}
},
polygon: {
shapeOptions: {
color: 'firebrick'
}
},
circle: {
shapeOptions: {
color: 'dodgerblue'
}
},
rectangle: {
shapeOptions: {
color: 'orange'
}
},
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
exportGeoJson(drawnItems, $("#mapdata"));
});
map.on('draw:edited', function (e) {
exportGeoJson(drawnItems, $("#mapdata"));
});
map.on('draw:deleted', function (e) {
exportGeoJson(drawnItems, $("#mapdata"));
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment