I work on a project that has a form including a map, so a logged in user can enter his data and drawing features on the map and save it afterwards. The user gets a page that shows the map with the features on it. I will show how to save and restore the drawn data as geoJSON and how to save circles because that type of feature is not supported by geoJSON.
drawing the features 🔗
This is a basic map with drawing enabled
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title>Leaflet example</title>
6 <link href='http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css' rel='stylesheet' type='text/css' title='default' />
7 <script type='text/javascript' src='http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js'></script>
8 <link href='css/leaflet.draw.css' rel='stylesheet' type='text/css' title='default' />
9 <script type='text/javascript' src='js/leaflet.draw.js'></script>
10 </head>
11 <body>
12 <script>
13 $(function() {
14 var map = L.map('div#map').setView([47.5, 8.3], 12);
15
16 L.tileLayer('http://{s}.tile.cloudmade.com/de7796f726fb415a87ec97b5e4ee7db3/997/256/{z}/{x}/{y}.png', {
17 attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '+
18 ' <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,'+
19 ' Imagery © <a href="http://cloudmade.com">CloudMade</a>',
20 maxZoom: 18
21 }).addTo(map);
22
23 var drawnItems = new L.FeatureGroup();
24 map.addLayer(drawnItems);
25
26 var drawControl = new L.Control.Draw({
27 draw: {
28 position: 'topleft',
29 polygon: {
30 shapeOptions: {
31 color: 'red',
32 opacity: 0.8
33 },
34 showArea: true
35 },
36 polyline: {
37 shapeOptions: {
38 color: 'green',
39 opacity: 0.8
40 },
41 },
42 rectangle: {
43 shapeOptions: {
44 color: 'blue',
45 opacity: 0.8
46 },
47 },
48 circle: {
49 shapeOptions: {
50 color: 'orange',
51 opacity: 0.8
52 }
53 }
54 },
55 edit: {
56 featureGroup: drawnItems
57 }
58 });
59
60 map.addControl(drawControl);
61
62 function exportFeatures(featureGroup){
63 var mapdata = { center: map.getCenter(),
64 zoom:map.getZoom(),
65 geojson: }
66 for(item in featureGroup._layers) {
67 var feature = featureGroup._layers[item];
68 geoJsonFeature = feature.toGeoJSON()
69 if(feature.hasOwnProperty("_radius")) {
70 geoJsonFeature.geometry.radius = feature.getRadius();
71 }
72 geoJsonFeature.properties.color = feature.options.color;
73 mapdata.geojson[feature._leaflet_id] = geoJsonFeature;
74 }
75 $("input#mapdata").val(JSON.stringify(mapdata));
76 }
77
78 map.on('draw:created', function (e) {
79 var layer = e.layer;
80 drawnItems.addLayer(layer);
81 exportFeatures(drawnItems);
82 });
83
84 map.on('draw:edited', function (e) {
85 exportFeatures(drawnItems);
86 });
87
88 map.on('draw:deleted', function (e) {
89 exportFeatures(drawnItems);
90 });
91
92 map.on('dragend', function (e) {
93 exportFeatures(drawnItems);
94 });
95
96 map.on('zoomend', function (e) {
97 exportFeatures(drawnItems);
98 });
99
100
101 });
102 </script>
103 <form method="POST" action="/">
104 <div id="map"></div>
105 <input type="hidden" id="mapdata">
106 <input type="submit">
107 </form>
108 </body>
109</html>
Disclaimer: Somehow the article got crippled on the way through several static blog generators 😒