Skip to content

Instantly share code, notes, and snippets.

@nk9

nk9/leaflet.draw-error.html

Last active May 25, 2019 16:05
Show Gist options
  • Save nk9/8418b2ad4b89b1b5372edb43a1c67853 to your computer and use it in GitHub Desktop.
Save nk9/8418b2ad4b89b1b5372edb43a1c67853 to your computer and use it in GitHub Desktop.
Download ZIP
When you parse a GeoJSON string containing a MultiPolygon, leaflet.draw throws exceptions when you try to edit the resulting layer.
Raw
leaflet.draw-error.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
</head>
<body>
<div id="map" style="width: 500; height: 500"></div>
<script type="text/javascript">
/******** Setup ********/
var TILE_URL = "https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.png"
var drawnItemsLayer = new L.FeatureGroup();
var drawControl = new L.Control.Draw({ draw: false, edit: { featureGroup: drawnItemsLayer }});
mymap = L.map('map');
mymap.addControl(drawControl);
mymap.addLayer(drawnItemsLayer);
L.tileLayer(TILE_URL).addTo(mymap);
/******** Error ********/
// Works
// var geoJsonString = '{"type":"Feature","properties":{},"geometry":{"type":"Polygon","coordinates":[[[-0.122187, 51.513081], [-0.119675, 51.508924], [-0.113677, 51.511347], [-0.116673, 51.51469], [-0.122187, 51.513081]]]}}';
// Fails
var geoJsonString = '{"type": "Feature", "geometry": {"type": "MultiPolygon", "coordinates": [[[[-0.122187, 51.513081], [-0.119675, 51.508924], [-0.113677, 51.511347], [-0.116673, 51.51469], [-0.122187, 51.513081]]]]}, "properties": {}}';
// layers created here throw exceptions when edited…
// https://github.com/Leaflet/Leaflet.draw/issues/257#issuecomment-62920651
var existingItems = L.geoJson(JSON.parse(geoJsonString));
existingItems.eachLayer(function(layer) {
drawnItemsLayer.addLayer(layer);
});
mymap.fitBounds(drawnItemsLayer.getBounds(), {padding: [20, 20]});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment