Old school D3 from simpler times

All examples By author By category About

wboykinm

Full window Github gist

Vector Drawing in Leaflet

<!DOCTYPE html>

<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Leaflet Draw</title>

<link rel="stylesheet" href="https://geosprocket.com/assets/leaflet/dist/leaflet.css">
	<link rel="stylesheet" href="https://geosprocket.com/assets/leaflet/dist/leaflet.draw.css">
	
	
	
	<script src="https://geosprocket.com/assets/leaflet/dist/leaflet.js"></script>
	<script src="https://geosprocket.com/assets/leaflet/dist/leaflet.draw.js"></script>
</head>
<body class="">
	<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" class="leaflet-container leaflet-fade-anim" tabindex="0"><div class="leaflet-map-pane" style="-webkit-transform: translate3d(344px, -589px, 0);"><div class="leaflet-tile-pane leaflet-zoom-animated" style="z-index: 2;"><div class="leaflet-layer"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 420px; top: 321px;" src="./Leaflet-Draw_files/77.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 420px; top: 577px;" src="./Leaflet-Draw_files/78.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 676px; top: 577px;" src="./Leaflet-Draw_files/78(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 676px; top: 321px;" src="./Leaflet-Draw_files/77(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 420px; top: 833px;" src="./Leaflet-Draw_files/79.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 164px; top: 321px;" src="./Leaflet-Draw_files/77(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 420px; top: 65px;" src="./Leaflet-Draw_files/76.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 676px; top: 833px;" src="./Leaflet-Draw_files/79(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 932px; top: 577px;" src="./Leaflet-Draw_files/78(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 676px; top: 65px;" src="./Leaflet-Draw_files/76(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 164px; top: 577px;" src="./Leaflet-Draw_files/78(3).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 932px; top: 321px;" src="./Leaflet-Draw_files/77(3).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 932px; top: 65px;" src="./Leaflet-Draw_files/76(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 932px; top: 833px;" src="./Leaflet-Draw_files/79(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 164px; top: 65px;" src="./Leaflet-Draw_files/76(3).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 164px; top: 833px;" src="./Leaflet-Draw_files/79(3).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -92px; top: 577px;" src="./Leaflet-Draw_files/78(4).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 676px; top: -191px;" src="./Leaflet-Draw_files/75.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1188px; top: 577px;" src="./Leaflet-Draw_files/78(5).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 420px; top: 1089px;" src="./Leaflet-Draw_files/80.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 420px; top: -191px;" src="./Leaflet-Draw_files/75(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -92px; top: 321px;" src="./Leaflet-Draw_files/77(4).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 676px; top: 1089px;" src="./Leaflet-Draw_files/80(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1188px; top: 321px;" src="./Leaflet-Draw_files/77(5).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 164px; top: -191px;" src="./Leaflet-Draw_files/75(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 932px; top: 1089px;" src="./Leaflet-Draw_files/80(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -92px; top: 833px;" src="./Leaflet-Draw_files/79(4).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -92px; top: 65px;" src="./Leaflet-Draw_files/76(4).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1188px; top: 65px;" src="./Leaflet-Draw_files/76(5).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 164px; top: 1089px;" src="./Leaflet-Draw_files/80(3).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 932px; top: -191px;" src="./Leaflet-Draw_files/75(3).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1188px; top: 833px;" src="./Leaflet-Draw_files/79(5).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -92px; top: -191px;" src="./Leaflet-Draw_files/75(4).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -348px; top: 321px;" src="./Leaflet-Draw_files/77(6).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1444px; top: 577px;" src="./Leaflet-Draw_files/78(6).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1444px; top: 321px;" src="./Leaflet-Draw_files/77(7).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -348px; top: 577px;" src="./Leaflet-Draw_files/78(7).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1188px; top: -191px;" src="./Leaflet-Draw_files/75(5).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -92px; top: 1089px;" src="./Leaflet-Draw_files/80(4).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1188px; top: 1089px;" src="./Leaflet-Draw_files/80(5).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1444px; top: 833px;" src="./Leaflet-Draw_files/79(6).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -348px; top: 833px;" src="./Leaflet-Draw_files/79(7).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1444px; top: 65px;" src="./Leaflet-Draw_files/76(6).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -348px; top: 65px;" src="./Leaflet-Draw_files/76(7).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -348px; top: -191px;" src="./Leaflet-Draw_files/75(6).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1444px; top: -191px;" src="./Leaflet-Draw_files/75(7).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -348px; top: 1089px;" src="./Leaflet-Draw_files/80(6).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1444px; top: 1089px;" src="./Leaflet-Draw_files/80(7).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 676px; top: 1345px;" src="./Leaflet-Draw_files/81.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 932px; top: 1345px;" src="./Leaflet-Draw_files/81(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 420px; top: 1345px;" src="./Leaflet-Draw_files/81(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1188px; top: 1345px;" src="./Leaflet-Draw_files/81(3).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 164px; top: 1345px;" src="./Leaflet-Draw_files/81(4).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1444px; top: 1345px;" src="./Leaflet-Draw_files/81(5).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1700px; top: 833px;" src="./Leaflet-Draw_files/79(8).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1700px; top: 1089px;" src="./Leaflet-Draw_files/80(8).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1700px; top: 577px;" src="./Leaflet-Draw_files/78(8).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1700px; top: 321px;" src="./Leaflet-Draw_files/77(8).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -92px; top: 1345px;" src="./Leaflet-Draw_files/81(6).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1700px; top: 1345px;" src="./Leaflet-Draw_files/81(7).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 420px; top: 1601px;" src="./Leaflet-Draw_files/82.png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 676px; top: 1601px;" src="./Leaflet-Draw_files/82(1).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 164px; top: 1601px;" src="./Leaflet-Draw_files/82(2).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 932px; top: 1601px;" src="./Leaflet-Draw_files/82(3).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -92px; top: 1601px;" src="./Leaflet-Draw_files/82(4).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1188px; top: 1601px;" src="./Leaflet-Draw_files/82(5).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -348px; top: 1345px;" src="./Leaflet-Draw_files/81(8).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: -348px; top: 1601px;" src="./Leaflet-Draw_files/82(6).png"><img class="leaflet-tile leaflet-tile-loaded" style="height: 256px; width: 256px; left: 1444px; top: 1601px;" src="./Leaflet-Draw_files/82(7).png"></div></div><div class="leaflet-objects-pane"><div class="leaflet-shadow-pane"></div><div class="leaflet-overlay-pane"><div class="leaflet-draw-guides"></div><svg class=" leaflet-zoom-animated" style="-webkit-transform: translate3d(-1304px, 17px, 0);" width="3840" height="2198" viewBox="-1304 17 3840 2198"><g><path stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" stroke="#bada55" stroke-opacity="0.5" stroke-width="4" fill="#bada55" fill-opacity="0.2" d="M757 711L757 711z"></path></g></svg></div><div class="leaflet-marker-pane"></div><div class="leaflet-popup-pane"></div></div><div class="leaflet-tile-pane leaflet-zoom-animated" style="z-index: 1; -webkit-transform: translate3d(379px, 356.5px, 0px) scale(0.5);"></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in leaflet-bar-part leaflet-bar-part-top" href="https://leaflet.github.com/Leaflet.draw/#" title="Zoom in">+</a><a class="leaflet-control-zoom-out leaflet-bar-part leaflet-bar-part-bottom" href="https://leaflet.github.com/Leaflet.draw/#" title="Zoom out">-</a></div><div class="leaflet-control-draw leaflet-bar leaflet-control"><a class="leaflet-control-draw-polyline leaflet-bar-part leaflet-bar-part-top" href="https://leaflet.github.com/Leaflet.draw/#" title="Draw a polyline"></a><a class="leaflet-control-draw-polygon leaflet-bar-part" href="https://leaflet.github.com/Leaflet.draw/#" title="undefined"></a><a class="leaflet-control-draw-rectangle leaflet-bar-part" href="https://leaflet.github.com/Leaflet.draw/#" title="Draw a rectangle"></a><a class="leaflet-control-draw-circle leaflet-bar-part" href="https://leaflet.github.com/Leaflet.draw/#" title="Draw a circle"></a><a class="leaflet-control-draw-marker leaflet-bar-part leaflet-bar-part-bottom" href="https://leaflet.github.com/Leaflet.draw/#" title="Add a marker"></a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control">Powered by <a href="https://leafletjs.com/">Leaflet</a></div></div></div></div>
	
	<script>
		
		var map = L.map('map', { 
        zoomControl: true,
        center: [-45.8733, 170.5061],
        zoom: 13
      })
 
      // add a nice baselayer from mapbox
      L.tileLayer('https://a.tiles.mapbox.com/v3/landplanner.map-sfgqhzi1/{z}/{x}/{y}.png', {
        attribution: 'MapBox'
      }).addTo(map);

var drawControl = new L.Control.Draw({
			polygon: {
				allowIntersection: false,
				shapeOptions: {
					color: '#bada55'
				}
			}
		});
		map.addControl(drawControl);
		
		var drawnItems = new L.LayerGroup();
		map.on('draw:poly-created', function (e) {
			drawnItems.addLayer(e.poly);
		});
		map.on('draw:rectangle-created', function (e) {
			drawnItems.addLayer(e.rect);
		});		
		map.on('draw:circle-created', function (e) {
			drawnItems.addLayer(e.circ);
		});
		map.on('draw:marker-created', function (e) {
			drawnItems.addLayer(e.marker);
		});
		map.addLayer(drawnItems);
		
	</script>

</body></html>

Modified http://geosprocket.com/assets/leaflet/dist/leaflet.js to a secure url

Modified http://geosprocket.com/assets/leaflet/dist/leaflet.draw.js to a secure url

https://geosprocket.com/assets/leaflet/dist/leaflet.js

https://geosprocket.com/assets/leaflet/dist/leaflet.draw.js