Polygon from LeafletDraw to GeoJSON

Question

This is my first attempt working with javascript and GeoJSON by using leaflet. So far, I got the desired map and the leaflet.draw plugin working in the way that I can draw a shape and it appears on my screen. I tried to write this shape to a GeoJSON that I want to use in R. Therfore I used the ideas presented here to create the GeoJSON string. I think the desired information for me is stored in the variable shape_for_db. However, using Firebug in Firefox I am not able to find this variable. Do I get something wrong here? This is the script I am using:

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
  <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />
  <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
  <script src="jquery-2.1.1.min.js"></script>
  <script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
  <style>
    #map{ width: 100%; height: 100%; }
  </style>
</head>

<body>


  <div id="map"></div>

  <script>

  // base map
  var map = L.map('map').setView([51.25,10.57], 8);

  // load a tile layer
 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    {
      attribution: 'Tiles by: OpenStreetMaps',
      maxZoom: 17,
      minZoom: 5
    }).addTo(map);

// Initialise the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

// Initialise the draw control and pass it the FeatureGroup of editable layers
        var drawnItems = new L.FeatureGroup();
        map.addLayer(drawnItems);

        var drawControl = new L.Control.Draw({
            edit: {
                featureGroup: drawnItems
            }
        });
        map.addControl(drawControl);

        map.on('draw:created', function (e) {
            var type = e.layerType,
                layer = e.layer;
            drawnItems.addLayer(layer);
        });
// Shape to GeoJSON
map.on('draw:created', function (e) {
  var type = e.layerType;
  var layer = e.layer;
  var shape = layer.toGeoJSON()
  var shape_for_db = JSON.stringify(shape);
});

  </script>
</body>
</html>

score 0 · Accepted Answer · answered May 12 '16 at 15:34

The scope for your shape_for_db is inside your second listener for draw-created. You can place on window.shape_for_db if you are doing this for a one-off experimental/playing around approach and want to use your dev console/Firebug. Or set up var shape_for_db outside the listener.

Polygon from LeafletDraw to GeoJSON

1 Answers1