Maps | National Park Service

<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>
Plugins
