Skip to content

Instantly share code, notes, and snippets.

@kyletolle

kyletolle/index.html

Created January 15, 2015 21:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kyletolle/fcbe93050c6e52050f7a to your computer and use it in GitHub Desktop.
Save kyletolle/fcbe93050c6e52050f7a to your computer and use it in GitHub Desktop.
Download ZIP
Broken leaflet toolbar draw example with node_modules
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" type="text/css" href="node_modules/leaflet-draw/dist/leaflet.draw.css" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="node_modules/leaflet-toolbar/dist/Leaflet.Toolbar.css" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="node_modules/leaflet-draw/dist/leaflet.draw-src.js"></script>
<script src="node_modules/leaflet-toolbar/dist/Leaflet.Toolbar.js"></script>
<style>
html, body, #map { margin: 0; height: 100%; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map = L.map('map').setView([39.862564285, -104.917523860], 15);
L.tileLayer("http://otile1.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.jpg", {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
}).addTo(map);
L.DrawToolbar = L.Toolbar.Control.extend({
options: {
actions: [
L.Draw.Polygon,
L.Draw.Polyline,
L.Draw.Marker,
L.Draw.Rectangle,
L.Draw.Circle
],
className: 'leaflet-draw-toolbar' // Style the toolbar with Leaflet.draw's custom CSS
}
});
new L.DrawToolbar().addTo(map);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment