Leaflet and Leaflet.draw save and restore

2013-11-12 · 415 words · 2 minute read

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 &copy; <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 😒