Crater Lake National Park

NPMap

Digital maps for the National Park Service

InfoBox

The InfoBox module is a core component of NPMap. InfoBoxes in NPMap work out-of-the-box with no manual configuration. They can, however, be configured to meet advanced needs and custom use cases.

Height and Width

If you don't manually set the max-height and max-width CSS styles via the styles config (see below), NPMap will automatically set these styles to the height/width of the map, minus ~40 pixels for padding. If maximum height/width properties are assigned via the styles config, they will be honored if they are valid. If they are not valid, NPMap will overwrite them with valid values. This ensures that the InfoBox works properly even if it is manually misconfigured.

Configuration

All InfoBox configuration can be done through either the NPMap.config.infobox property (this is what you use if you want to customize the global behavior of the InfoBox) or through individual layer objects added to the NPMap.layers array (you use these to customize the way that content for a particular layer displays within the InfoBox). Both of these configuration objects are optional; your map will function just fine without them. If you do, however, decide that you need something other than the default behavior and display, NPMap accepts the customizations outlined below.

Customizing the behavior of the InfoBox

Property Type Description Supported values Default value
anchor {String} Where you want to position the InfoBox anchor in relation to the InfoBox content window. Not yet implemented. 'right'
hideActions {Boolean} Whether NPMap should skip building the default InfoBox actions. Currently the only InfoBox actions added by default are "Zoom to this location" and "Add to route" (if the route module has been added to your map). true or false false
padding {Number} The amount of padding to preserve between the edge of the InfoBox's parent (map or page) and the sides of the InfoBox. An integer or float number. 20
pan {String} The pan behavior of the InfoBox. 'none' - NPMap will never pan the map to account for an InfoBox's position. With this configuration, it is possible that the InfoBox will be positioned off the edge of its parent (either the map or the page), so you may want to to set the max-height and max-width CSS properties of the InfoBox using the styles property to ensure that this doesn't happen.

'parent' - With this configuration, NPMap will pan the map so that the entire InfoBox is shown within its parent when it is first displayed. If the user manually pans the map after this, however, the InfoBox may run off the edge of the map after the manual reposition. The InfoBox may also run off the edge of the map when the map is centered and/or zoomed via an API call. We will be enhancing the InfoBox to ensure that the InfoBox never displays off of the map in a future release.

'center' - Whenever an InfoBox is shown, NPMap will pan the map to make sure it is centered in the current map viewport.
'parent'
parent {String} The parent of the InfoBox. 'map' - The InfoBox is added as a child of the NPMap map div. The InfoBox will always be contained within the map viewport. If map is specified as the parent, the pan: 'page' config is not valid and will be ignored if specified.

'page' - The InfoBox is added as a child of the web page. The InfoBox will be able to overlap content on the page.
'map'
styles {Object} A set of key-value CSS styles to configure the NPMap InfoBox with. Any CSS properties you pass in via this object will be applied to the outer div element of the NPMap InfoBox, overriding any existing styles applied to the div by NPMap. At the moment, the only recommended style overrides are "max-height" and "max-width". We will be documenting other supported overrides in the future. null

Screenshots

Here are a few screenshots of the InfoBox in action with different NPMap.config.infobox configurations:


NPMap.config.infobox = {
  parent: 'map'
};
    

NPMap.config.infobox = {
  parent: 'page'
};
    

NPMap.config.infobox = {
  pan: 'center',
  parent: 'map' // or 'page'
};
    

NPMap.config.infobox = {
  pan: 'parent',
  parent: 'map'
};
    

NPMap.config.infobox = {
  pan: 'parent',
  parent: 'page'
};
    

Customizing what is displayed in the InfoBox

Customizing how information is displayed in the InfoBox is done by adding an identify object as a property to an individual layer config object in the NPMap.layers array specified in the NPMap.config object.

For example, if an ArcGisServerRest layer is added to a web map, via a NPMap.config object, like this:


NPMap.config = {
  layers: [{
    name: 'ARIS Parks',
    type: 'ArcGisServerRest',
    url: 'http://mapservices.nps.gov/ArcGIS/rest/services/ARIS_Navigation/MapServer'
  }]
};

It could then be customized to format the identify information for an individual geometry by adding an identify object (applicable code highlighted below):


NPMap.config = {
  layers: [{
    identify: {
      content: function(data) {
        var c = '<div style="font-weight:bold">This is ';
      
        if (data.designation != 'National Monument') {
          c += 'not ';
        }
      
        c += 'a national monument!</div>';
        return c;
      },
      footer: 'Visit the <a href="{{url}}">park web page</a>...',
      title: 'Air Quality at {{name}} {{designation}}'
    },
    name: 'ARIS Parks',
    type: 'ArcGisServerRest',
    url: 'http://mapservices.nps.gov/ArcGIS/rest/services/ARIS_Navigation/MapServer'
  }]
}

This identify object can contain all or none of the following properties. If a property isn't specified, the default text will be displayed:


The identify properties

Each of these properties can be either a {String} or a {Function}. If the property is a string, NPMap will replace any substrings surrounded by "{{}}" with the matching string value from the available data properties for the geometry the identify is being performed on. If the property is a function, this function will be called every time NPMap sets up an InfoBox. NPMap will pass the function an object with all of the available data properties for the geometry the identify is being performed on, and will expect to be returned a properly-formatted HTML string.

Expanding on the example from the code block above, the content property is a function, while the footer and title properties are strings. In the content example, a string is constructed using properties from the data object that is passed in. In the footer and title examples, a replace is performed on the string that is passed in as the property. Values from the "url", "name", and "designation" fields are used to populate the string. Given that, for a data object that looks like this:


{
  "designation": "National Park",
  "name": "Rocky Mountain",
  "url": "http://www.nps.gov/romo"
}

The different elements of the InfoBox, once constructed, would look something like this:

  • title = "Air Quality at Rocky Mountain National Park"
  • content = "This is not a national monument!"
  • footer = "Visit the park web page..."

You can additionally specify a cluster property to customize the "title" that is displayed when an identify operation returns multiple results. This behavior can only be seen when identify operations are performed on maps that contain layers that support "clustered" or "multiple result" operations: currently just ArcGisServerRest layers.