NPMap Builder (referred to as Builder in this documentation), is an online mapping tool used to build and deploy custom web maps. Using Builder, you can add and style custom data and then save, export and share your map.
There are several advantages to using Builder to create your web maps. Maps created with Builder follow the NPS graphic identity guidelines for visual media (black bar, Arrowhead, fonts, and color palettes), are responsive (they have optimal viewing performance on any device), and are accessible (keyboard navigation, focus indicators, and more!).
In this document, we'll take a closer look at Builder's interface and components.
Learning Goals:
Dashboard
From the NPS network, visit http://insidemaps.nps.gov/builder/, which directs you to Builder's landing page. The first thing you will want to do is sign in.
Click "Sign in" on the top right-hand corner of the page's navigation bar. When prompted, enter the same credentials you use on your NPS computer.
Once signed in, you will be redirected back to your customized Builder dashboard. Any maps that you've created with Builder will be listed under "Your Maps". You can use your dashboard to create a new map, sort through maps you've already built, and edit or view each of them.
Start Building
To start building a map, click on "Start Building" from your dashboard. This will load the map building interface.
- Map Title: Once the mapping interface is loaded, you will be prompted to enter a title for your map.
- Map Description: Next, you will be asked to provide a brief description for your map. This text will display underneath the map title.
Both a title and description are required for your map. If you decide you want to change the title and description, you can do so at any time during the map building process.
- Sharing: Once you have entered a title and description, Builder will ask you to acknowledge that your map will be available publicly and may be shared with others both inside and outside of the National Park Service. To acknowledge and begin building your map, click on "Acknowledge".
Interface
There are four main components to Builder's interface: the navigation header, the settings header, the map preview, and the building tools. Each one is described below in more detail.
Navigation Header
You can navigate back to your Builder dashboard by clicking on the "NPMap Builder" logo on the left-hand side of the navigation header. The steps listed on the right-hand side of the header are quick links that can be used to jump back-and-forth through the three steps of the map building process.
Settings Header
The settings header displays the title and description of your map, and also contains a set of tools (the buttons on the right-hand side), that can be used at any time.
To change the title and/or description of your map, click on the text for either one to modify. Clicking will display the full title/description in an editable popup. Once you've modified the title and/or description, click the accept button to close the popup. You can also cancel the modifications at any time by clicking the "X" button.
The following tools are available on the right-hand side of the settings header, from left to right:
Save Your Map: Click on the Save button at any time to save and publish your map.
Update the Map Settings: This is where you can set whether or not your map is public. Currently, all maps created with Builder are public.
Reload the Map: You can click on this button at any time to reload your map. This is useful if one or more of your source datasets change and you need to view the changes on your map.
View Configuration Code: When you click on this button, a window will display showing the JavaScript configuration code for your map. You can use the checkbox at the bottom of the window to "wrap" your code in HTML, and can then copy-and-paste the code into a blank document saved with an .html extension to load the map locally. This is a good way to jumpstart your map development with Builder and then add additional functionality to your map using custom JavaScript (via NPMap.js).
Map Preview
The map portion of Builder acts as a live preview. As you make changes to your map with Builder, the map preview updates to reflect these changes. What you see in the map preview is exactly what the map will look like when embedded into an NPS.gov web page or map template. You can interact with the map like you would any other web map.
Map Building Tools
The controls available on the left-hand panel, are the ones used to customize your map. Using this panel, you will be guided through the three steps necessary to build your map:
- Set Center & Zoom
- Add & Customize Data
- Tools & Behavior
After one step is complete, you can either proceed to the next step or go back a step using the previous button in the panel. You can also use the quick links in the navigation header to jump between steps.
Set Center & Zoom
The first step in Builder is to set the center and zoom of your map. By doing so, you are telling Builder which portion of the map you want to display on initial load and how far in and out the map should be allowed to zoom.
Set Center to: Use this option to set the current map view as the center of your map (the numbers displayed are the latitude and longitude coordinates of the current map center).
Set Zoom to: This sets the initial zoom. It is the zoom that users will see when they first load the map.
Set Center & Zoom: This option allows you to use both the center and zoom of the current map as the initial center and zoom.
Restrict Bounds: If you would like to restrict the area that can be panned/dragged to a specific area of interest, use this option.
Min and Max Zoom Levels: Use the slider to restrict your map to a range of zoom levels.
You should set the properties described above to best suit your data and the story you want your map to tell. If you choose not to set any center or zoom properties, your map will default to an initial zoom of 4 (~1:36M), be zoomable to zoom 19 (~1:1K), and be centered on the contiguous United States.
Add & Customize Data
The second step in creating your map with Builder is to customize the way your map looks and add overlays.
Edit Basemaps
With the "Edit Basemaps" option, you can change the default basemap (Park Tiles), select which basemaps you want available in your map, or choose to completely turn off the basemap. All of the basemaps available in Builder are ones that are licensed for use by the NPS.
Add to map?: Use this checkbox to select which basemaps you want available in your map. If you add more than one basemap, a switcher control will appear in the upper-right hand corner of your map with all of the basemaps that you've selected.
Make default?: Use this checkbox to choose the basemap you want displayed when your map initially loads.
Turn off basemap?: If you have a custom basemap that you would like to use, or prefer no basemap at all, use this checkbox (it is unchecked by default).
Once you have made your basemap choices hit "Save" to view the changes on your map.
Add an Existing Overlay
With this option, you can choose which hosted overlay type you would like to add, give it a name and any associated metadata, and link to the overlay's URL. It is important to remember that any overlay added to your map must be hosted.
The fields described below, vary depending on which overlay type is selected. To learn more about what overlay types Builder supports and their capabilities, see the Supported Overlay Types documentation.
Fields for all overlay types:
Type: The type of overlay you want to add to your map.
Name: The name of your overlay.
Description: Any descriptive text you would like associated with your overlay (this step is optional).
Attribution: Any attribution text, such as data source, you would like associated with your overlay (this step is optional).
URL: The overlay's source URL which Builder can use to access your overlay.
Fields that appear depending on overlay type:
Is this overlay clickable?: Check this option if you would like to configure popups and/or tooltips for your overlay (this option is not available for Tiled layers).
Should points in this overlay be clustered?: Check this option if you would like your data to be clustered (only available for point overlays).
After clicking "Add to Map", your overlay will be added to the map with default symbology and the tools used to customize the overlay will be added to the left hand "Add & Customize Data" panel.
The tools available to customize your overlay, from left to right, are:
Edit: If you need to modify or update any of your overlay's properties (Type, Name, Description, URL, etc.) choose Edit to activate the "Update Overlay" window.
Configure Interactivity: Use this option to configure and customize an overlay's popups and tooltips. To learn more see Customizing Popups and Tooltips.
Change Style: Use this option to apply custom symbology to your overlay.
Delete Overlay: Use this option to remove an overlay from the map.
Overlays can also be reordered. To reorder overlays in your map, simply grab one overlay and drag it above or below another overlay in the list.
Create a Dataset
This option is under development and will be released soon.
Tools & Behavior
Using the options under "Tools & Behavior", you can make decisions about how users will interact with your map and add capabilities like geocoding, printing, and measuring.
Tools
The placement of each tool on your web map is based on both familiar web standards and graphic guidelines for web map components developed at NPMap to fit in seamlessly with NPS' graphic identity.
- Draw: This tool allows users to draw on the map in the form of points, lines, and polygons. Preview
- Fullscreen: This tool allows users to view the map in fullscreen mode (this is especially useful when a map is embedded in a larger webpage). Preview
- Geocoder: This tool adds a search bar that can be used to navigate to parks and other places by name, address, or zip code. Preview
- Home: This is the home icon that is visible on the top left hand corner of the map. When clicked, the map zooms and/or pans back to its initial center and zoom. Preview
- Locate: When clicked, this tool will zoom and/or pan the map to where the person viewing the map is located. In order for the tool to work, location sharing needs to be enabled in the viewer's browser or mobile device. Preview
- Measure: This tool enables users to measure distances on the map in miles and areas on the map in acres. Preview
- Overview: This tool places a smaller inset map within the larger map, helping users see their viewing extent. Preview
- Print: This tool gives users the option to print out an extent of the map. Preview
- Scale: Enabling this feature puts a scale bar (used to measure the relationship between distance and area on the map vs. the real world) in the bottom left corner of the map. The scale of the map updates as you pan and zoom in or out. Preview
- Zoom Buttons: These buttons allow users view a larger or smaller region of the map extent at different zoom levels. Preview
Behavior
Behaviors define the way users are able to interact with your map.
- Draggable: This is the action of dragging (or panning) the map. Preview
- Double click zoom: This is the action of using a computer mouse and double-clickng on the map to zoom in. Preview
- Scroll wheel zoom: This is the action of using a computer mouse wheel to zoom in and out of the map's viewing extent. Preview
- Box zoom: This is the action of holding down the Shift key on a computer keyboard while simultaneously drawing a box with the computer mouse around an area of interest on the map to zoom in. Preview
- Touch zoom: When viewing the map on a mobile device, this is the action of using your fingers on the device's screen too zoom in or out and pan.
Save & Export Map
After you've finished building your map with your custom data, styling, interactivity, tools and behaviors, the next step is to save and export your map.
From the "Tools & Behavior" panel, click on "Save & Export Map". At this point, Builder is saving your final map to your personal dashboard as well as assigning your map a unique id that can be used during the export process. Once the map is saved, the "Export Your Map" window is activated.
Using Builder, there are a few different ways to export your map:
Template: With this option you can use one of the pre-built map templates available in Builder and then share the URL with others.
NPS.gov: You can copy the unique map id created for your map by Builder, and paste it into a map element in the NPS content management system (CMS). For detailed instructions on how to add Builder maps to the NPS CMS click here.
The Web: With this option, you can copy the embed code and paste it into your web page, Sharepoint page, Facebook, etc.
In this tutorial we went over the basics of Builder including how to access your personal dashboard, how to start building, an overview of the interface and its components, as well as how to export your map.