Skip to content

Instantly share code, notes, and snippets.

@tomasholderness

tomasholderness/leaflet_poly_selection.html

Last active July 30, 2018 16:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tomasholderness/6546650 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tomasholderness/6546650 to your computer and use it in GitHub Desktop.
Download ZIP
Use Leaflet.draw to generate polygon WKT for interactive map selection
Raw
leaflet_poly_selection.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Leaflet &middot; Selection</title>
<!-- Tom Holderness - 2013 -->
<!--Styles -->
<link href="resources/css/leaflet.css" rel="stylesheet"/>
<link href="resources/css/leaflet.draw.css" rel="stylesheet"/>
</head>
<body>
<div id="map" style="width:800px;height:600px;"></div>
<script src = "resources/js/leaflet.js"></script>
<script src = "resources/js/leaflet-providers.js"></script>
<script src = "resources/js/leaflet.draw.js"></script>
<script>
var latlon = new L.LatLng(-33.8683, 151.2086); // Centre around Sydney
var map = L.map('map').setView(latlon, 14);
// layers
var mapnik = L.tileLayer.provider('OpenStreetMap.BlackAndWhite').addTo(map);
draw_options = {
draw:{
polyline:false,
rectangle:false,
circle:false,
marker:false
}
}
var drawControl = new L.Control.Draw(draw_options);
map.addControl(drawControl);
//Show message window with WKT of polygon.
map.on('draw:created', function(e){
var type = e.layerType;
var layer = e.layer;
if (type == 'polygon'){
var wkt_poly = "POLYGON(('"
var latlngs = layer.getLatLngs();
for (var i=0;i<latlngs.length;i++){
if (i != 0){
wkt_poly += ','
}
wkt_poly += latlngs[0].lng+' '+latlngs[0].lat
}
wkt_poly +="')),4326";
window.alert(wkt_poly);
map.addLayer(layer);
}
});
</script>
</body>
</html>
@mattijn
Copy link
Copy Markdown

mattijn commented Apr 3, 2017

I'd to do the following to make it work

   	if (type == 'polygon'){
   	
	   	var wkt_poly = "POLYGON(('"
	   	var latlngs = layer.getLatLngs();
   	
	   for (var i=0;i<latlngs[0].length;i++){
	   		if (i != 0){
		   		wkt_poly += ','
	   		}
		   wkt_poly += latlngs[0][i].lng+' '+latlngs[0][i].lat
	   }
	   wkt_poly +="')),4326";
	   console.log(wkt_poly);
	};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment