Crater Lake National Park

NPMap

Digital maps for the National Park Service

ArcGisServerRest Toggle SubLayers

This example shows how you can easily add an ArcGisServerRest layer to a Bing Maps-based NPMap web map with a simple legend that allows the user to toggle the layer's sublayers on and off. When you add an ArcGisServerRest layer to an NPMap web map, you get basic display and identify support, out of the box.

 

Related resources:

Map

Code


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="example-map" style="height:500px;position:absolute;width:500px;">
    </div>
    <script>
      var NPMap = NPMap || {};

      NPMap.YOSE = {
        toggleSubLayer: function(el) {
          NPMap.Layer.ArcGisServerRest.toggleSubLayer(NPMap.config.layers[0], el.id.slice(el.id.length - 1, el.id.length), $(el).is(':checked'));
        }
      };
      NPMap.config = {
        api: 'bing',
        center: {
          lat: 37.83958,
          lng: -119.53974
        },
        div: 'example-map',
        events: {
          init: function(callback) {
            var legend = document.createElement('div');
            
            legend.id = 'npmap-legend';
            legend.innerHTML = '<div style="background-color:white;cursor:pointer;padding:15px;position:absolute;right:15px;top:15px;z-index:1;"><table><tr><td><input type="checkbox" id="1" onclick="NPMap.YOSE.toggleSubLayer(this);" checked></td><td><label for="1">Locations</label></td></tr><tr><td><input type="checkbox" id="2" onclick="NPMap.YOSE.toggleSubLayer(this);" checked></td><td><label for="2">Boundaries</label></td></tr><tr><td><input type="checkbox" id="3" onclick="NPMap.YOSE.toggleSubLayer(this);" checked></td><td><label for="3">Tracts</label></td></tr></table></div>';

            NPMap.Map.addControl(legend);
            callback();
          }
        },
        layers: [{
          identify: {
            content: function(data) {
              var html = '<ul>';

              for (var prop in data) {
                html += '<li>' + prop + ': ' + data[prop] + '</li>';
              }

              html += '</ul>';

              return html;
            }
          },
          layers: '1,2,3',
          name: 'NPS Tracts and Boundaries',
          opacity: 0.7,
          tiled: false,
          type: 'ArcGisServerRest',
          url: 'http://mapservices.nps.gov/ArcGIS/rest/services/LandResourcesDivisionTractAndBoundaryService/MapServer'
        }],
        zoom: 9
      };

      (function() {
        var s = document.createElement('script');
        s.src = 'http://www.nps.gov/npmap/1.0.0/bootstrap.js';
        document.body.appendChild(s);
      })();
    </script>
  </body>
</html>