Crater Lake National Park

NPMap

Digital maps for the National Park Service

ArcGisServerRest Layer (Identify Related Records)

This example demonstrates how to bring in related data from an ArcGIS Server REST service and display it in the InfoBox.

This functionality is still a bit rough around the edges and needs some work. We will be adding support for asynchronous identify operations in a future release of the library.

 

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.config = {
        api: api,
        div: 'example-map',
        events: {
          init: function(callback) {
            NPMap.Map.toBounds({
              e: -86.70556640625,
              n: 49.5519638501678,
              s: 45.85752097181702,
              w: -94.26416015625
            });
            callback();
          }
        },
        layers: [{
          identify: {
            content: function(data) {
              reqwest({
                success: function(response) {
                  var html = null;

                  if (response.relatedRecordGroups) {
                    var group = response.relatedRecordGroups[0];

                    if (group) {
                      var records = group.relatedRecords;

                      if (records) {
                        html = '<ul style="height:228px;">';

                        _.each(records, function(record) {
                          var attributes = record.attributes;

                          html += '<li>' + attributes.LIST_ID + '<ul><li>' + attributes.IMPAIRMENT_DESCRIPTION + '</li><li>' + attributes.CYCLE + '</li><li>' + attributes.Category + '</li></ul></li>';
                        });

                        html += '</ul>';
                      }
                    }
                  }

                  if (!html) {
                    html = '<div style="height:228px;">No related records found.</div>';
                  }

                  document.getElementById('npmap-infobox-content').innerHTML = html;
                },
                type: 'jsonp',
                url: 'http://irmaservices.nps.gov/ArcGIS/rest/services/NRSS/HIS/MapServer/3/queryRelatedRecords?&objectIds=' + data.OBJECTID + '&relationshipId=3&outFields=*&f=json'
              });

              return '<div style="height:236px;">Loading...</div>';
            },
            simpleTree: true,
            title: '{{Entity_ID}}'
          },
          layers: '3',
          name: 'Water Bodies',
          type: 'ArcGisServerRest',
          url: 'http://irmaservices.nps.gov/ArcGIS/rest/services/NRSS/HIS/MapServer'
        }]
      };
      
      (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>