NPMap logo

Digital maps for the
National Park Service

https://www.nps.gov/npmap/slides/foss4gna-2016/

Jim McAndrew

NPMap Developer,
CSU Research Associate

Taylor Long

NPMap Cartographer,
CSU Research Associate

National Park Service Arrowhead
NPMap Logo

A team of developers, data wranglers, and cartographers…

NPMap Logo

with the goal of creating multi-scale maps for web and mobile use.

The National Park Service preserves and protects more than 400 special places

Yellowstone National Park

Acadia National Park

Denali National Park

Statue of Liberty

Jefferson Memorial

The agency is made up of 22,000+ employees, partners, and contractors

Many of these employees do not have any experience with GIS

These employees are an incredible resource

  • They are dedicated and passionate
  • They have a wealth of local, on-the-ground knowledge
  • The have a vested interest in the NPS' digital products

We need to make it easy for these employees to contribute their knowledge

We use the tools behind OpenStreetMap to create an Open Source solution

Places

Screenshot of Places Editor

We also have data created by Park and Regional GIS Departments

We include these sources through our sync tool

From Places
to Park Tiles

           ,--.  ,--.        ,--.,--.    ,--.       ,--.                   ,--.
           |  ,'.|  |,--.,--.|  ||  |    |  | ,---. |  | ,--,--.,--,--,  ,-|  |
           |  |' '  ||  ||  ||  ||  |    |  |(  .-' |  |' ,-.  ||      \' .-. |
           |  | `   |'  ''  '|  ||  |    |  |.-'  `)|  |\ '-'  ||  ||  |\ `-' |
           `--'  `--' `----' `--'`--'    `--'`----' `--' `--`--'`--''--' `---'

,--.  ,--.          ,--.  ,--.                       ,--.    ,------.                ,--.
|  ,'.|  | ,--,--.,-'  '-.`--' ,---. ,--,--,  ,--,--.|  |    |  .--. ' ,--,--.,--.--.|  |,-.
|  |' '  |' ,-.  |'-.  .-',--.| .-. ||      \' ,-.  ||  |    |  '--' |' ,-.  ||  .--'|     /
|  | `   |\ '-'  |  |  |  |  |' '-' '|  ||  |\ '-'  ||  |    |  | --' \ '-'  ||  |   |  \  \
`--'  `--' `--`--'  `--'  `--' `---' `--''--' `--`--'`--'    `--'      `--`--'`--'   `--'`--'
            
╔═════════════════════════════════════════════════════════╗
║             .▄▄▄  ▄• ▄▌▄▄▄ ..▄▄ ·▄▄▄▄▄                  ║
║             ▐▀•▀█ █▪██▌▀▄.▀·▐█ ▀.•██                    ║
║             █▌·.█▌█▌▐█▌▐▀▀▪▄▄▀▀▀█▄▐█.▪                  ║
║             ▐█▪▄█·▐█▄█▌▐█▄▄▌▐█▄▪▐█▐█▌·                  ║
║             ·▀▀█.  ▀▀▀  ▀▀▀  ▀▀▀▀ ▀▀▀                   ║
╟─────────────────────────────────────────────────────────╢
║         The President has signed a bill declaring       ║
║          Null Island National Park as the newest        ║
║          Unit of the National Park Service!             ║
║                                                         ║
║         Your team, NPMap, has been tasked with          ║
║         collecting data for this park and making        ║
║        a beautiful online map for visitors using        ║
║          only Open Source Tools and services.           ║
╚═════════════════════════════════════════════════════════╝
            
Player Select
╔═════════════════════════════════════════════════════════╗
║ Full Name: Jimmy Rocks                                  ║
║ Position: Developer                                     ║
╟────────┬────────────────────────────────────────────────╢
║ Skills │                                                ║
╟────────┘                                                ║
║                                                         ║
║ Node.js....................░░░▒▒▒▒▒▒▓▓▓          4/5    ║
║                                                         ║
║ Bourne Again Shell.........░░░▒▒▒▒▒▒             3/5    ║
║                                                         ║
║ Sequential Query Language..░░░▒▒▒▒▒▒▓▓▓          4/5    ║
║                                                         ║
║ OpenStreetMap..............░░░▒▒▒▒▒▒▓▓▓███       5/5    ║
║                                               ♥︎ ♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
╔═════════════════════════════════════════════════════════╗
║               ________  ___  _    __                    ║
║                | |/ / \/ / \| |  ( (`                   ║
║                |_|\_\_/\_\_/|_|___)_)                   ║
╟─────────────────────────────────────────────────────────╢
║                                                         ║
║ Mapbox:   Provides hosting for our vector tiles         ║
║                                                         ║
║ CartoDB:   Online Database with fast dynamic querying   ║
║                                                         ║
║ OpenStreetMap:    iD Editor & JOSM for collecting data  ║
║                                                         ║
║ Internal:   Park, Regional, and Federal GIS Departments ║
║                                               ♥︎ ️♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
╔═════════════════════════════════════════════════════════╗
║ Where Is Null Island National Park?                     ║
╟─────────────────────────────────────────────────────────╢
║                                                         ║
║ Player #3 (Chad Lawlis) is on the task!                 ║
║                                                         ║
║   Chad works with the legislative & interpretive        ║
║     boundaries.                                         ║
║                                                         ║
║   He determines a boundary to be used on the web map.   ║
║                                                         ║
║   This boundary will be stored in a PostGIS database    ║
║     that is synchronized to CartoDB every evening.      ║
║                                               ♥︎ ♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
Park Boundary
╔═════════════════════════════════════════════════════════╗
║                 Gathering the Features                  ║
╟─────────────────────────────────────────────────────────╢
║                                                         ║
║                         Roads                           ║
║                                                         ║
║                        Trails                           ║
║                                                         ║
║                                               ♥︎ ♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
╔═════════════════════════════════════════════════════════╗
║                 Gathering the Features                  ║
╟─────────────────────────────────────────────────────────╢
║ NPMap has a great tool called Places                    ║
║                                                         ║
║ Places allows people in the National Park Service to    ║
║   Create-Read-Update-Delete data displayed on the map   ║
║   within Parks.                                         ║
║                                                         ║
║ Rangers at Null Island National Park took GPS tracks    ║
║   of Roads and Trails within the Park, and used the     ║
║   iD Editor to digitize the data.                       ║
║                                               ♥︎ ♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
              
Park Lines
Park Lines
╔═════════════════════════════════════════════════════════╗
║                 Gathering the Features                  ║
╟─────────────────────────────────────────────────────────╢
║                                                         ║
║                   Building Footprints                   ║
║                                                         ║
║                      Parking Lots                       ║
║                                                         ║
║                    Points Of Interest                   ║
║                                               ♥︎ ️♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
╔═════════════════════════════════════════════════════════╗
║          ___           _   _  _                         ║
║         | _ ) __ _  __| | | \| | ___ __ __ __ ___       ║
║         | _ \/ _` |/ _` | | .` |/ -_)\ V  V /(_-<       ║
║         |___/\__,_|\__,_| |_|\_|\___| \_/\_/ /__/       ║
╟─────────────────────────────────────────────────────────╢
║                                                         ║
║    The features are stored in an closed source format!  ║
║                                                         ║
║   You will need to convert to the OpenStreetMap format. ║
║                                                         ║
║                     Lose One Health                     ║
║                                                 ♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
╔═════════════════════════════════════════════════════════╗
║           Building a Synchronization Tool               ║
╟─────────────────────────────────────────────────────────╢
║                                                         ║
║ You must:                                               ║
║   Determine "TRANSLATIONS" in order to use closed       ║
║   source data alongside OpenStreetMap data.             ║
║                                                         ║
║ Convert data from closed source into a format           ║
║   compatible with OpenStreetMap.                        ║
║                                                         ║
║ Keep a detailed log track of all updates to make sure   ║
║   changes are replicated .                              ║
║                                                   ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
╔═════════════════════════════════════════════════════════╗
║________   __   _     __  _     __ ______  ___  _     __ ║
║ | || |_) / /\ | |\ |( (`| |   / /\ | || |/ / \| |\ |( ('║
║ |_||_| \/_/--\|_| \|_)_)|_|__/_/--\|_||_|\_\_/|_| \|_)_)║
╟─────────────────────────────────────────────────────────╢
║   You are required to spend many many months working    ║
║  with standards committees and stakeholders in Parks.   ║
║                                                         ║
║  You must use these resources to determine how to use   ║
║  OpenStreetMap tags to represent everything needed for  ║
║               National Park Service Map.                ║
║                                                       ♥︎ ║
╚═════════════════════════════════════════════════════════╝
          
╔═════════════════════════════════════════════════════════╗
║       ___               _   _  _                        ║
║      / __| ___  ___  __| | | \| | ___ __ __ __ ___      ║
║     | (_ |/ _ \/ _ \/ _` | | .` |/ -_)\ V  V /(_->      ║
║      \___|\___/\___/\__,_| |_|\_|\___| \_/\_/ /__/      ║
╟─────────────────────────────────────────────────────────╢
║                                                         ║
║   The Closed Source Data Format has a featured called   ║
║      "Editor Tracking", it will keep a log when         ║
║                    changes are made.                    ║
║                                                         ║
║   The Closed Source company offers a tool to convert    ║
║      their data to into the GeoJSON format called       ║
║      Terraformer, this will make it easy to use!        ║
║                                                     ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
╔═════════════════════════════════════════════════════════╗
║      _,, __, _ _,_,___, _,_, _ ____,_,___ _ _,_, _      ║
║     (_ \ ||\ |/ `|_||_)/ \|\ | |` //_\ |  |/ \|\ |      ║
║     , ) \|| \|\ ,| || \\ /| \| | / | | |  |\ /| \|      ║
║      ~   )~  ~ ~ ~ ~~ ~ ~ ~  ~ ~~~~~ ~ ~  ~ ~ ~  ~      ║
║         ~'                                              ║
╟─────────────────────────────────────────────────────────╢
║                                                         ║
║         You can get to work building a process!         ║
║                                                         ║
║     You will read all data updated from the source      ║
║             source since the last sync.                 ║
║                                                         ║
║    You will then compare these updates with data that   ║
║      has already been synchronized to determine if      ║
║                 any records were deleted.               ║
║                                                   ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
╔═════════════════════════════════════════════════════════╗
║      _,, __, _ _,_,___, _,_, _ ____,_,___ _ _,_, _      ║
║     (_ \ ||\ |/ `|_||_)/ \|\ | |` //_\ |  |/ \|\ |      ║
║     , ) \|| \|\ ,| || \\ /| \| | / | | |  |\ /| \|      ║
║      ~   )~  ~ ~ ~ ~~ ~ ~ ~  ~ ~~~~~ ~ ~  ~ ~ ~  ~      ║
║         ~'                                              ║
╟─────────────────────────────────────────────────────────╢
║                                                         ║
║    1)  Remove deleted records                           ║
║    2)  Convert the Updates to the correct format        ║
║        (OpenStreetMap XML)                              ║
║    3)  push the records into the database               ║
║                                                 ♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
Park Lines
╔═════════════════════════════════════════════════════════╗
║              ·▄▄▄▄• ▄▌▄▄▄▄▄▄• ▄▌▄▄▄  ▄▄▄ .              ║
║              ▐▄▄·█▪██▌•██  █▪██▌▀▄ █·▀▄.▀·              ║
║              ██▪ █▌▐█▌ ▐█.▪█▌▐█▌▐▀▀▄ ▐▀▀▪▄              ║
║              ██▌.▐█▄█▌ ▐█▌·▐█▄█▌▐█•█▌▐█▄▄▌              ║
║              ▀▀▀  ▀▀▀  ▀▀▀  ▀▀▀ .▀  ▀ ▀▀▀               ║
║           • ▌ ▄ ·. ▪  .▄▄ · .▄▄ · ▪         ▐ ▄         ║
║           ·██ ▐███▪██ ▐█ ▀. ▐█ ▀. ██ ▪     •█▌▐█        ║
║           ▐█ ▌▐▌▐█·▐█·▄▀▀▀█▄▄▀▀▀█▄▐█· ▄█▀▄ ▐█▐▐▌        ║
║           ██ ██▌▐█▌▐█▌▐█▄▪▐█▐█▄▪▐█▐█▌▐█▌.▐▌██▐█▌        ║
║           ▀▀  █▪▀▀▀▀▀▀ ▀▀▀▀  ▀▀▀▀ ▀▀▀ ▀█▄▀▪▀▀ █▪        ║
╟─────────────────────────────────────────────────────────╢
║                                                         ║
║                      REPEAT OFTEN                       ║
║                                                 ♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
╔═════════════════════════════════════════════════════════╗
║  ___         _           ___            _               ║
║ |   \  __ _ | |_  __ _  | _ \ ___ __ __(_) ___ __ __ __ ║
║ | |) |/ _` ||  _|/ _` | |   // -_)\ V /| |/ -_)\ V  V / ║
║ |___/ \__,_| \__|\__,_| |_|_\\___| \_/ |_|\___| \_/\_/  ║
╟─────────────────────────────────────────────────────────╢
║                                                         ║
║ Sources:                                                ║
╟─────────────────┬─────────────────┬─────────────────────╢
║  Other Players  │ Digitized in iD │ Sync'ed from Source ║
╟─────────────────┼─────────────────┼─────────────────────╢
║ Park Boundaries │ Trails          │ Buildings           ║
║                 │ Roads           │ Parking Lots        ║
║                 │                 │ Points of Interest  ║
╟─────────────────┴─────────────────┴─────────────────────╢
║                                                         ║
║                                               ♥︎ ♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
Park Lines
╔═════════════════════════════════════════════════════════╗
║   #####                                            ###  ║
║  #     # #    #  ####   ####  ######  ####   ####  ###  ║
║  #       #    # #    # #    # #      #      #      ###  ║
║   #####  #    # #      #      #####   ####   ####   #   ║
║        # #    # #      #      #           #      #      ║
║  #     # #    # #    # #    # #      #    # #    # ###  ║
║   #####   ####   ####   ####  ######  ####   ####  ###  ║
╟─────────────────────────────────────────────────────────╢
║  Next Steps:                                            ║
║                                                         ║
║ * Use an all-SQL version of OpenStreetMap’s osm2pgsql   ║
║   to convert the OpenStreetMap data into PostGIS.       ║
║                                                         ║
║ * Use Mapbox Studio Classic to render the Line and      ║
║   Polygon Data into Vector Tiles.                       ║
║                                               ♥︎ ♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            
╔═════════════════════════════════════════════════════════╗
║   #####                                            ###  ║
║  #     # #    #  ####   ####  ######  ####   ####  ###  ║
║  #       #    # #    # #    # #      #      #      ###  ║
║   #####  #    # #      #      #####   ####   ####   #   ║
║        # #    # #      #      #           #      #      ║
║  #     # #    # #    # #    # #      #    # #    # ###  ║
║   #####   ####   ####   ####  ######  ####   ####  ###  ║
╟─────────────────────────────────────────────────────────╢
║  Next Steps:                                            ║
║                                                         ║
║ * Use the same sync tool load data from PostGIS into    ║
║   CartoDB, who will now host the Point Data.            ║
║                                                         ║
║ * Allow the Cartography team to transform the raw       ║
║   data into a visitor facing multiscale map.            ║
║                                               ♥︎ ♥︎ ♥︎ ♥︎ ♥︎ ║
╚═════════════════════════════════════════════════════════╝
            

Park Tiles

A suite of online basemaps, designed to fit the NPS graphic identity

Park Tiles is easy to use

  • npmap.js
  • NPMap Builder
  • ArcGIS Online & Portal

Park Tiles is flexible

  • Standard
  • Imagery
  • Slate
  • Light

Park Tiles - Standard

Park Tiles - Imagery

Park Tiles - Slate

Park Tiles - Light

What's in Park Tiles?

  • OpenStreetMap outside parks
  • NPS Places inside parks

Park Tiles 2
vs.
Park Tiles 3

Park Tiles 2: OSM + NPS

Park Tiles 2 setup

Park Tiles 3: OSM / NPS

Park Tiles 3 setup

Layers upon layers upon layers...

  • Base
  • Middle
  • Overlay
  • Points of Interest

Base

Base

Middle

Middle

Overlay

Overlay

Points of Interest

Points of Interest

Together: base

Points of Interest

Together: base + middle

Points of Interest

Together: base + middle + overlay

Points of Interest

Together: base + middle + overlay + poi

Points of Interest

How we make it

Park Tiles uses:

  • Mapbox - vector tiles
  • CartoDB - POI vector overlay

Tiles: Mapbox Studio Classic + CartoCSS

Mapbox Studio Classic

Mapbox Sources

  • Streets
  • Terrain
  • Satellite


NPS Sources

  • NPS Places
  • Park Boundaries

POIs: CartoDB public tables

CartoDB
Park Tiles Overview Diagram

Park Tiles in the wild...

NPS.gov State Pages

nps.gov State Pages

Great Smoky Mountains NP / Maps

Great Smoky Mountains National Park Maps page

Rocky Mountain NP / Campgrounds

Rocky Mountain National Park Campgrounds page

Places Mobile Apps

Yellowstone National Park Places Mobile app

What's next?

  • More/better data
  • NPS Data for land and water
  • POI display improvements
  • Mapbox GL (?)

Questions?

@jimmyrocks
james_mcandrew@partner.nps.gov

@mtaylorlong
taylor_long@partner.nps.gov

https://www.nps.gov/npmap/
@npmap - npmap@nps.gov