Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Created February 18, 2013 18:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save wboykinm/4979555 to your computer and use it in GitHub Desktop.
Save wboykinm/4979555 to your computer and use it in GitHub Desktop.
Download ZIP
Vector Drawing in Leaflet
Raw
index.html
<!DOCTYPE html>
<!-- saved from url=(0039)http://leaflet.github.com/Leaflet.draw/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Leaflet Draw</title>
<link rel="stylesheet" href="http://geosprocket.com/assets/leaflet/dist/leaflet.css">
<link rel="stylesheet" href="http://geosprocket.com/assets/leaflet/dist/leaflet.draw.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="lib/leaflet/leaflet.ie.css" />
<link rel="stylesheet" href="leaflet.draw.ie.css" />
<![endif]-->
<script src="http://geosprocket.com/assets/leaflet/dist/leaflet.js"></script>
<script src="http://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="http://leaflet.github.com/Leaflet.draw/#" title="Zoom in">+</a><a class="leaflet-control-zoom-out leaflet-bar-part leaflet-bar-part-bottom" href="http://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="http://leaflet.github.com/Leaflet.draw/#" title="Draw a polyline"></a><a class="leaflet-control-draw-polygon leaflet-bar-part" href="http://leaflet.github.com/Leaflet.draw/#" title="undefined"></a><a class="leaflet-control-draw-rectangle leaflet-bar-part" href="http://leaflet.github.com/Leaflet.draw/#" title="Draw a rectangle"></a><a class="leaflet-control-draw-circle leaflet-bar-part" href="http://leaflet.github.com/Leaflet.draw/#" title="Draw a circle"></a><a class="leaflet-control-draw-marker leaflet-bar-part leaflet-bar-part-bottom" href="http://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="http://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('http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment