nationalparkservice / symbol-library

National Park Service map symbols optimized for the web.

NPMap Symbol Library

National Park Service map symbols optimized for the web.

 aed

 airboat

 airfield

 airport

 alcohol

 all-terrain-trail

 amphitheater

 aquatic-invasive-species-decontamination-station

 aquatic-invasive-species-inspection-sticker

 archery

 art

 ash-disposal

 assistive-listening-systems

 assistive-listening-systems-t-coil-compatible

 atm

 audio-description

 audio-tour

 automated-entrance

 automobiles

 baby-changing-station

 backcountry-camping-permit

 baseball

 beach-access

 bear-box

 bear-canister-rentals

 bear-spray

 bear-spray-purchase

 bear-spray-rental

 bear-spray-return-recycling

 bear-viewing

 benches-seating

 bicycle-trail

 bike-rack

 bike-rental

 bike-repairs

 birding-wildlife-viewing

 boating

 boating-permit

 boat-launch

 boat-tour

 boat-trailer-parking

 book-and-souvenir-shop

 bookstore

 bottle-filling-station

 bottles

 braille

 breastfeeding-station

 bridge

 brochure

 bus-stop

 cabin

 calendar-events

 campfire

 campground

 campsite

 cannon

 canoe-access

 canoe-portaging

 cans-or-bottles

 caving

 cellular-signal

 chair-lift-ski-lift

 chapel

 climbing

 closed-captioning

 coffee

 community-garden

 construction

 cross-country-ski-trail

 customs

 dam

 deer-viewing

 directions

 diving

 dog-sledding

 dot

 downhill-skiing

 drinking-water

 driving-tour

 electrical-hookup

 electric-car-charging

 elevator

 emergencies

 emergency-telephone

 entrance

 entrance-station

 event-facility

 exercise-fitness

 falling-rocks

 family-restroom

 fire-extinguisher

 fire-grate

 firewood

 firewood-cutting

 first-aid

 first-come-first-served

 fish-cleaning

 fish-hatchery

 fishing

 fishing-license

 fishing-pier

 fish-ladder

 flagpole

 floating-dump-station

 flower-viewing

 flush-toilets

 food-cache

 food-service

 four-wheel-drive-road

 gasoline-diesel

 gas-station

 generators

 geyser

 golfing

 grill

 guided-tours

 hand-launch-small-boat-launch

 hang-gliding

 historic-feature

 hold-hand-rail

 horseback-riding

 hospital

 hunting

 ice

 ice-cream

 ice-fishing

 ice-skating

 incident

 information

 in-line-skating

 interpretive-exhibit

 junior-ranger-program

 kayaking

 kennel

 large-print

 laundry

 library

 lifeguard

 life-jackets

 lighthouse

 litter-receptacle

 live-audio-description

 lock

 lock-bikes

 lockers-storage

 lodging

 lookout-tower

 lounge

 low-vision-access

 maps

 marina

 mechanic

 mens-restroom

 metal-detecting

 metro-station

 mobile-device-charging

 monument

 motor-bike-trail

 motorboating

 museum

 newspaper

 no-mobile-devices

 open-captioning

 open-to-the-public

 paddle-boating

 park-film

 parking

 passes-and-fees

 passport-stamps

 pedestrian-crossing

 personal-watercraft

 pets-off-leash

 pets-on-leash

 photography

 picnic-area

 picnic-shelter

 pit-toilet

 playground

 point-of-interest

 post-office

 propane

 propane-bottle-recycling

 quagga-mussel-decontamination-station

 quiet

 radiator-water

 radios

 rail-station

 ranger-led-events

 ranger-station

 rattlesnakes

 recycling

 rentals

 reservations

 restrooms

 river-rafting

 rock-collecting

 rowboating

 rr-xing

 rv-campground

 rv-trailer-hookup

 safety-caution-alerts

 sailing

 sanitary-disposal-station

 scenic-viewpoint

 scuba-diving

 sea-lion-viewing

 sea-plane

 self-guiding-trail

 sewer-hookup

 shelter

 shipwreck

 showers

 shuttle-service

 sign

 sign-language-interpretation

 silence-mobile-devices

 skateboarding

 ski-jumping

 sledding

 sleeping-shelter

 slippery-ramp

 slippery-steps

 smoking-area

 snack-bar

 snorkeling

 snowboarding

 snowmobile-trail

 snow-shoeing

 souvenir-shop

 spring

 stable

 stagecoach-rides

 star-gazing

 statue

 stay-back-from-edge-cliff

 stay-back-from-edge-shore

 stay-on-trail

 store

 strollers

 sunny

 supplies

 surfing

 swimming

 table-service

 tactile-exhibit

 technical-rock-climb

 telephone

 tennis

 text-telephone-service

 theater

 theatre-arts

 things-to-do

 ticket-sales

 tidepooling

 tornado-shelter

 towing

 trailer-site

 trailhead

 trailhead-information

 tram-tour

 tramway

 trash-dumpster

 trucks

 tubing

 tunnel

 uneven-walkways

 utv

 vehicle-ferry

 vending-machine

 video-surveillance

 viewing-area

 visitor-center

 volleyball

 volume-control-telephone

 wading

 walking

 walk-on-boardwalk

 watch-for-falling-ice

 waterfall

 waterfowl

 water-hookup

 waterskiing

 webcam

 whale-viewing

 wheelchair-accessible

 wi-fi

 wilderness

 wind-surfing

 wine

 winter-recreation-area

 womens-restroom

 wood-gathering

 young-scientist-program

 zebra-mussel-decontamination-station

New symbols

Development on new symbol artwork is temporarily suspended, but we intend to have a completely revised procedure in place later in 2020.

Symbol Library is changing

The information below is now outdated. We are revising how the symbol library is organized and how it interfaces with other tools in the NPMap suite.

Versioning

The Symbol Library uses a semantic versioning scheme:

• 0.0.z: Bugfixes and modifications
• 0.y.0: Icons added
• x.0.0: Icons removed, sprite scheme changed, or major features added

Changelog

• 1.0.0
• 2.0.0
• 2.1.0
• 2.2.2
• 2.2.3
• 2.3.0
• 2.4.0
• 2.5.0

File structure

This repository was originally forked from Mapbox's Maki project, so the file structure is similar.

src

Source SVG files are in the src subdirectory. Each symbol is designed at three pixel-perfect sizes (max dimensions 14, 22, and 30 pixels square) and in black and white versions to support different use cases. These can be found in the src/standalone directory. In addition, a subset of 94 symbols are designed at 12, 18, and 24 pixels square for use in NPMap Builder.

renders

PNG renders of all of the SVGs are in the renders directory. High-resolution (aka Retina) versions of each icon are present as well, named using the common @2x convention.

render.sh

You can use the SVGs and PNGs in this repository as they are without building anything, however a render script is included to assist designers/developers who want to modify or create new icons. It will render SVGs to PNGs at 100% and 200% resolution, create sprites used by NPMap.js, NPMap Builder, and the Places Editor, and generate corresponding CSS styles for the sprites.

The script requires Node, Bash, Inkscape, and ImageMagick. In addition, each icon must have an appropriate entry in www/npmap-symbol-library.json to be rendered correctly.

After installing the required prerequisites, you can run the script like this:

cd npmap-symbol-library
npm install
bash render.sh

symbol-library's Issues

Railroad Crossing

Originally part of this issue.

Create scenic viewpoint symbol

Statue (generic)

Originally part of this issue

Create laundry icon

Rename/rebrand our icon set(s)

We agree that "NPMaki" doesn't quite work as a name for our web map icons. Prior to a formal release complete with a landing page in the Tools section of the website, we need to come up with a succinct and original name.

Write and publish documentation

More in-depth instruction on how to use NPMap Symbol Library (?)

Setup our own Maki server

This will allow us to add more shapes (circles, etc.) and sizes.

Natural Resource Icon: Water Drop

NCCN intended use: Symbolize water quality protocol monitoring sites.

Already available via Mapbox Maki icon set, but thought I'd open up discussion whether or not the Maki one fits into the NPMap Symbol Library / NPS graphic identity.

Merge latest version of Maki

Natural Resource Icon: Climate

NCCN intended use: Symbolize climate protocol monitoring sites.

Some ideas / inspiration: Lightning, Snowflake, Rain, Cloud(s)

Font Awesome library has a cloud icon.

Natural Resource Icon: Mountain

NCCN intended use: Symbolize glacier protocol monitoring sites.

Some ideas / inspiration: Triangle with a snow cap peak.

Release checklist

• Landing page at http://www.nps.gov/npmap/tools/npmaki/
• Deploy script to push new versions out to http://www.nps.gov/lib/npmaki/
• Version up, and tag version here in GitHub
• Publish new version to NPM
• Integration with NPMap.js
• Integration with Builder
• Integration with all versions of Park Tiles
• Blog post

Create food box icon

Shared, bear-safe food storage at campgrounds. See this issue.

Create hiking icon

Natural Resource Icon: Elk / Deer

NCCN intended use: Symbolize Elk protocol monitoring sites.

Some ideas / inspiration: John Deere Logo, deer hoof print (even-toed), track-way

Add symbol for spring feature

This might be outside the scope of this repository, but some I&M networks monitor springs, and I've also seen them symbolized on some unigrid maps I have.

See here how NPS HFC symbolizes spring features (look under Misc. Symbols). It does not explain the difference between the circle vs. the circle with short irregular line nor the hollow circle vs. filled circle. My guess would be non-flowing vs. flowing and perennial vs. year-round, respectively. But perhaps we could get HFC to comment on this topic?

Some quick research shows that there does not seem to be a standard for hydrologic features. USGS Topos and National Map use the circles for wells. All three sources use the circle with short irregular line to symbolize springs, but NPS seems to use circle and circle with short irregular line interchangeably.

Interestingly there was a standard put forth by USGS back in 1906!

Symbolize campgrounds vs. campsites

In updating Park Tiles with a new POI overlay, we realized we were using the "Campground" symbol for both large campgrounds, like Cades Cove (which can accommodate up to 120 campers), and backcountry campsites that accommodate perhaps three tents, at the most. See Park Tiles issue no.148

@jimmyrocks has updated our rendering to provide us with both campgrounds and campsites as FCategories in our Mapbox sources. Now we need to find a way to visually differentiate between these categories. In my initial web search, I couldn't find much in terms of precedents. In the attached image, I propose using our existing single "tent" icon (small version) for backcountry campsites, and one of at least three larger, more complex symbols for campgrounds that graphically indicate multiple sites within a campground. Three initial concepts are found along the central axis of the image. From left to right, we have a "cluster" of four tents, a "row" of three tents, and a large tent with four squares. Let me know what think of these options and the more general prospect of supporting these categories.

Natural Resource Icon: Forest

NCCN intended use: Symbolize forest vegetation and subalpine vegetation monitoring sites.

Already available via Mapbox Maki icon set (i.e. "Park" icon), but thought I'd open up discussion whether or not the Maki one fits into the NPMap Symbol Library / NPS graphic identity.

The maki park icons are just a single tree, makes me think more "landscaped" park instead of a forest, maybe somehow incorporate more than one tree or a tree and understory bushes to make it more forest-like.

Flagpole symbol

Originally part of this issue.

Create tunnel symbol

Will support BLRI Live map development.

Write a "release" checklist

Natural Resource Icon: Bird

NCCN intended use: Symbolize Landbird protocol monitoring sites.

Some ideas / inspiration: Twitter bird/logo, silhouette of soaring bird, feather

Develop scripts for generating multiple versions of symbol svg artwork

For example, if we want to add a new symbol to the library, we will begin by designing four versions of the symbol in black, optimized for four sizes (32px, 24px, 16px, and 12px). Scripts would then handle the creation of additional versions: black with shadows, white without shadows, white with shadows, off-white without shadows, and off-white with shadows. Resulting symbols can be deployed in a range of maps, tools, and websites, including Park Tiles and Builder. See issue 17.

Should this repo still be a fork of mapbox/maki?

I understand that this repo borrows much from the mapbox/maki setup, but is there intention to ever merge? Since github is restrictive with forks, it makes working with both mapbox/maki and this repo hard (forking this repo in the GitHub GUI just points to my mapbox/maki fork).

Revise symbols and place-markers used in Builder

(In progress--the material to be contained in this comment was initially emailed to Mamata for review Friday afternoon. In summary, I've concluded that the current Builder place-markers are not strong enough as-is, and I've developed an alternative concept with the aim of improving the legibility of Builder symbols. One aspect of this is the use of unmodified, and therefore optimal, 24px and 16px Threespot svgs, plus one additional size to be designed, 12px. Hence the link to issue #16 .)

Deploy script

Write and document a deploy script to push new versions out to http://www.nps.gov/lib/npmap-symbol-library/

Add RV Dumpstation Icon

Add RV Dumpstation Icon

Create webcam symbol

Will support BLRI Live map development.

New symbols for review

Please have a look at the attached images (72ppi and 150ppi versions available). These are my current working designs for some of the symbols in our new icon list. Submit your feedback here, and I'll develop a second iteration. Thanks!

72 ppi version

150 ppi version

Standardize and unify symbol library into single repository

Up to this point, we have handled the map symbols we use in Park Tiles and Builder separately. Worse, it can be difficult to track down current versions of symbol artwork, as some only reside, in draft form, on my local drive. This is due in part to the fact that the current NPMaki repo is forked from Maki and designed specifically to produce sprites and pngs that are compatible in Builder. A standardized library will facilitate better use of this resource.

Adding color palette to NPMaki

More than an issue, this is a thought I had... Should NPMaki encompass our color palette too? Our symbol set would include the icons and our color palette. Would love to hear any thoughts

Create icons for Places Mobile

It would be great to get NPMaki 1.0 styled icons for the following icons used in Places Mobile (there may be more in the future). The 12,18,24 sizes will be good.

• flagpole
• building entrance
• railroad crossing
• statue (generic)

I can provide the files that I've used to create the initial versions of these (outside of the NPMaki framework)

Building Entrance

Originally part of this issue.

Expose version numbers on landing page

Each symbol has been assigned to a version number; would be good to access this from the landing page.

ATM

For use with the "ATM" Places preset

All HFC Icons as Symbols in this library and builder

Instead of submitting a unique GH issue for each symbol, it would handy if ALL of the Map Symbols (http://www.nps.gov/hfc/carto/symbols/map_symbols.zip) and Other Symbols (http://www.nps.gov/hfc/carto/symbols/other_symbols.zip) were included in the npmap-symbol-library and included in Builder in the NPMaki option.

Web manager are extremely reluctant, and in some cases, simply won't embed map content in the CMS that is NOT using official HFC symbols.

Release 2.0 checklist

• Landing page at http://www.nps.gov/npmap/tools/symbol-library/
• "Unfork" repository to address #29
• Finalize artwork for new symbols tagged with milestone 1.1
• Revisit build script
• Write a "release" checklist
• Write and document a deploy script to push new versions out to http://www.nps.gov/lib/npmap-symbol-library/
• Blog post
• Tag release on GitHub
• Tweet w/link to blog post
• Email to MailChimp list
• Email to internal nps-gis list
• Write a script to generate landing page HTML, CSS, and JavaScript
• Track which version a symbol was released in somewhere in the symbol set JSON file and
• Expose this on the landing page, as well

Nice to have

• Write and publish documentation
• Create homepage feature

Natural Resource Icon: Fish

NCCN intended use: Symbolize fish assemblage protocol monitoring sites.

Some ideas / inspiration: Simple silhouette of fish body

Add Arrowhead icon

I was thinking for planning projects it would be nice to have an outline of the NPS arrowhead. The full arrowhead with all of the detail would be too messy but maybe just an outline that could be used for parks to designate the location of different projects that are happening in the park etc. As an example PEPC has an arrowhead on the project sites here: http://parkplanning.nps.gov/

Thanks!

Natural Resource Icon: Lake

NCCN intended use: Symbolize mountain lake protocol monitoring sites.

Some ideas / inspiration: Irregular shaped circle

Add waterfall icon

Add waterfall icon

All-terrain Vehicle (Trail, access point)

Related to this issue.

HFC extended, in-house set:

Support ArcMap symbolset

Create geyser icon

Now that we're working on two projects for Yellowstone, we really need a geyser icon!

Add "emergency telephone"

We have artwork for this symbol, but it hasn't been fully integrated into the library. It's the same symbol as the standard "telephone" symbol, but has a blue color applied to it (akin to the blue "H" for hospital).

Not sure if this should be added, as-is, to Builder, since its color is problematic when placed over a colored placemarker.

• add to npmap-symbol-library.json file in the standalone symbol directory
• run render.sh to create updated png and sprite files.

Landing page script to generate HTML, CSS, JS

Write a script to generate landing page HTML, CSS, and JavaScript from revised symbol set (ex., when a symbol is added in v2.1)

Create entrance symbol

This is a key POI category in the new tracing guide that currently lacks a symbol.

Add "AED" icon

From @tpcolson:

Add "AED" Icon to MAKI or NPS icon to Builder. AED symbology consists of variations of a "Heart" with a "Lightening Bolt" through it. http://blog.pacificlegal.org/wp/wp-content/uploads/2014/04/aed_sign-web.gif

Natural Resource Icon: Intertidal Zone

NCCN intended use: Symbolize Intertidal protocol monitoring sites. All networks along the Pacific Coast do intertidal zone monitoring.

Some ideas / inspiration: Seastar, Wave, Sea Life, Beach

Natural Resource Icon: Flower

NCCN intended use: Symbolize prairie vegetation protocol monitoring sites.

Some ideas / inspiration: Flower silhouette

Mapbox Maki has garden