Skip to content

Instantly share code, notes, and snippets.

@d3noob
Last active November 27, 2021 16:08
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save d3noob/7730264 to your computer and use it in GitHub Desktop.
Save d3noob/7730264 to your computer and use it in GitHub Desktop.
Leaflet.draw plugin with options set.

An example of a map presented with leaflet.js and the Leaflet.draw plugin with a a range of options.

<!DOCTYPE html>
<html>
<head>
<title>Leaflet.draw Plugin</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
<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: 600px; height: 400px"></div>
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js">
</script>
<script>
var map = L.map('map').setView([-41.2858, 174.78682], 14);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var LeafIcon = L.Icon.extend({
options: {
shadowUrl:
'http://leafletjs.com/docs/images/leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
var greenIcon = new LeafIcon({
iconUrl: 'http://leafletjs.com/docs/images/leaf-green.png'
});
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
position: 'topright',
draw: {
polygon: {
shapeOptions: {
color: 'purple'
},
allowIntersection: false,
drawError: {
color: 'orange',
timeout: 1000
},
showArea: true,
metric: false,
repeatMode: true
},
polyline: {
shapeOptions: {
color: 'red'
},
},
rect: {
shapeOptions: {
color: 'green'
},
},
circle: {
shapeOptions: {
color: 'steelblue'
},
},
marker: {
icon: greenIcon
},
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
drawnItems.addLayer(layer);
});
</script>
</body>
</html>
@DrSquib
Copy link

DrSquib commented May 8, 2020

When I save this code and open the html file in a browser, I don't get the drawing options. Is there something I'm missing?

@d3noob
Copy link
Author

d3noob commented May 8, 2020 via email

@d3noob
Copy link
Author

d3noob commented May 8, 2020

Righto.... I have changed the js and css to a cdn off cloudflare and it appears to work. Try again.

@DrSquib
Copy link

DrSquib commented May 9, 2020

Righto.... I have changed the js and css to a cdn off cloudflare and it appears to work. Try again.

Works great, thanks!

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