<style>
#map {
height: 350px;
position: relative;
width: 100%;
}
</style>
<div id="map"></div>
<script>
var NPMap = {
center: {
lat: 44.617844,
lng: -110.541687
},
div: 'map',
editControl: true,
overlays: [{
attribution: 'Yellowstone National Park',
events: [{
fn: function () {
var layers = this.getLayers();
var map = NPMap.config.L;
map.editControl._modes.marker.handler.setOptions({guideLayers: layers});
map.on('draw:created', function (e) {
var marker;
if (e.layerType && e.layerType === 'marker') {
marker = e.layer;
}
if (marker) {
marker.snap = new window.L.Handler.MarkerSnap(map, marker);
for (var i = 0; i < layers.length; i++) {
marker.snap.addGuideLayer(layers[i]);
}
marker.snap.enable();
}
});
},
type: 'ready'
}],
name: 'Yellowstone Roads',
tooltip: '{{name}}',
type: 'geojson',
url: 'https://carto.nps.gov/user/nps-yell/api/v2/sql?q=SELECT * FROM roads&format=geojson'
}],
plugins: [{
js: 'https://www.nps.gov/lib/npmap.js/4.0.0/plugins/Leaflet.GeometryUtil/0.7.1/plugin.min.js'
}, {
js: 'https://www.nps.gov/lib/npmap.js/4.0.0/plugins/Leaflet.Snap/0.4.0/plugin.min.js'
}],
zoom: 9
};
(function () {
var s = document.createElement('script');
s.src = 'https://www.nps.gov/lib/npmap.js/4.0.0/npmap-bootstrap.js';
document.body.appendChild(s);
})();
</script>