Skip to content

Instantly share code, notes, and snippets.

@d3noob

d3noob/index.html

Last active May 9, 2020
Embed
What would you like to do?
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

This comment has been minimized.

Copy link

@DrSquib 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

This comment has been minimized.

Copy link
Owner Author

@d3noob d3noob commented May 8, 2020

@d3noob

This comment has been minimized.

Copy link
Owner Author

@d3noob 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

This comment has been minimized.

Copy link

@DrSquib 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