web map symbols for the national park service · every pixel counts web map symbols for the...

32
NPMap Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN Oct. 15, 2015

Upload: others

Post on 27-Jun-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

NPMap

Every pixel countsweb map symbols for the National Park Service

Jake Coolidge @jccartographyNACIS Annual Meeting

Minneapolis, MN Oct. 15, 2015

Page 2: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Web and mobile maps for the NPS

Page 3: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

NPS Places

Page 4: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Design Considerations

photo by Bruce Fingerhood, 2004http://www.flickr.com/photos/springfieldhomer/42195419/

Page 5: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Design ConsiderationsRecognizability

Google Maps

P. Hofmann: “bank on the learnability of a simple symbol rather than the immediate intuition of a complicated symbol”

Page 6: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Design ConsiderationsRecognizability

Mapbox Maki

J. Stevens et al: “Symbols with strong semantic relationships with their referent can be identified more quickly “

Page 7: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Design ConsiderationsRecognizability

Legibility

NPMap laundry symbol in six sizes(32px, 25px, 16px, 17px, 13px, 9px)

9 x 9px amphitheater symbol

Page 8: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Design ConsiderationsRecognizability

Legibility

Complexity

Erika Hallhttps://www.flickr.com/photos/mulegirl/99132433

Alex Valdiviahttps://thenounproject.com/search/?q=bicycle&i=16775

Page 9: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Design ConsiderationsRecognizability

Legibility

Complexity

Page 10: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Design ConsiderationsRecognizability

Legibility

Complexity

Style, look and feel

Page 11: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Design ChallengeImprove NPMap’s symbol set, 2014

Page 12: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Design ChallengeImprove NPMap’s symbol set, 2014

Page 13: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

BackgroundNPS print map symbols

33

33

22

22

89

2689

191

2689

191

26287

191287

Aerial Tramway

Y E L L O W S T O N E N A T I O N A L P A R K

JOHN D. ROCKEF ELLER, JR.

MEMORIAL PARKWAY

Park Boundary

Park Boundary

G R A N D

T E T O N

N A T I O N A L

P A R K

16mi26km

8mi13km

5mi8km

2mi3km

18mi29km

12mi19km

8mi13km

8mi13km

Jackson Lake Junction

Moran Junction

North Jenny Lake Junction

South Jenny Lake Junction

Moose Junction

Gros VentreJunction

Te t o n P a r k R o a d

one-way

Teton Park RoadClosed in winter

Road closedin winter

Road closedto trucks, RVs,and trailers

Road not recommendedfor trailers or RVs.Closed in winter

Road closed from earlyNovember to mid-May

Roads closedin winter

Lower Slide Lake

Crystal C

reek

Gros Ventre River

Sla

te

Cr

eek

Dal

l as

Fork

Upper Slide Lake

LeidyLake

Fox Creek

Darby Creek

Moose Creek

Coal

Cr

eek

Fis

h

Cree

k

Flat Creek

La

ke

Cre

ek

South Leigh Creek

South Leigh Lakes

SchoolroomGlacier

SunsetLake

SnowdriftLake

RimrockLake

MarionLake

MooseLake

Teton Glacier

JENNYLAKE

LEIGH LAKE

PetersenGlacier

MicaLake

MinkLake

LakeSolitude

BasinLakes

Teton Creek

South Bitch Creek

Grizzl

y C

reek

Conant Creek

Coyote Creek

South Boone Creek

Coulter Creek

Bailey Creek

Ari

zon

a

Creek

Pilg

rim

Creek

Pilg

rim

Cree

k

Moose Cre

ek

Pa

cific

C

reek

Lava

Cre

ek

Ditch

Cre

ek North Fork

Middle Fork

Cotton

wo

od

Creek

Buffalo F

ork

Spread Creek

E

ast

Fork Pilgrim

Cre

ek

TWO OCEAN LAKE

EMM

A MATILDA LAKE

Colter B

ay

North Moran Bay

Moran Bay

Half M

oon

Bay

Falls River

Snak

e R

ive

r

Snake

Riv

er

Snak

e

River

Gro

s V

en

tre

River

Falls River

Glade Creek

Berry Creek

Owl

Creek

North Bitch Creek

Lake ofthe Woods

Grassy LakeReservoir

Indian Lake

ArizonaLake

Spalding

Bay

Christian Pond

Elk RanchReservoir

HeronPond

ToppingsLakes

Blue MinerLake

Swan Lake

Talus Lake

DudleyLake

CygnetPond

North Moran Creek

Moran Creek

TaggartLake

Phelps Lake

BradleyLake

Surprise Lake

Amphitheater Lake

HiddenFalls

GrizzlyBearLake

Bearpaw LakeFallingIce Glacier

CirqueLake

Skillet Glacier

Triple Glaciers

Trapper Lake

HollyLake String

Lake

Cascade Creek

J A C K S O NL A K E

Surface elevation6772 ft 2064 m

South Badger Creek

North L

eigh

Creek

IDA

HO

WY

OM

ING

IDA

HO

WY

OM

ING

Teto

n

Cr

est

Tr

ail

Alaska Basin Trail

CARIBOU-TARGHEE

NATIONAL FOREST

BRIDGER-TETON

NATIONAL FOREST

GROS VENTRE WILDERNESS

BRIDGER-TETON NATIONAL FOREST

TETON WILDERNESS

CARIBOU-TARGHEE

NATIONAL FORESTW

INEG

AR HOLE W

ILDERNESS

BRIDGER-TETON

NATIONAL

FOREST

NATIONAL

ELK REFUGE

JED

ED

IAH

SM

ITH

WILD

ERNESS

BRIDGER-TETON

NATIONAL FOREST

JEDED

IAH S

MITH WILDERNESS

JA

CK

SO

N

H

OL

E

TE

TO

N

RA

NG

E

Jenny Lake Overlook

Cascade Canyon Turnout

Mountain View Turnout

PotholesTurnout

MountMoranTurnout

Cathedral Group Turnout

Elk RanchFlats Turnout

Snake RiverOverlook

Teton GlacierTurnout

Blacktail PondsOverlook

Glacier ViewTurnout

Teton PointTurnout

Albright ViewOverlook

Sleeping IndianOverlook

Park Entrance Turnout

Willow Flats Overlook

Jackson LakeOverlook

OxbowBendTurnout

Windy Point Turnout

MoranEntrance

South Entrance

GraniteCanyonEntrance

MooseEntrance

Uhl Hill7443ft2268m

Lozier Hill7655ft2333m

Thor Peak12028ft3666m

Mount Moran12605ft3842m

Raynolds Peak10910ft3324m

Traverse Peak11051ft3368m

PilgrimMountain

8274ft2522m

ArizonaIsland

Leeks Marina

TableMountain

11106ft3385m

10450ft3185m

Rendezvous Peak10927ft3330m

Teton Pass8431ft2570m

Pinyon Peak9705ft2958m

Moose Mountain10054ft3064m

Buck Mountain11938ft3639m

Mount Wister11490ft3502m

Rockchuck Peak11144ft3396mMount

St John11430ft3484m

TeewinotMountain12325ft3756m

MountWoodring11590ft3532m

InspirationPoint

Nez Perce11901ft3627m

CloudveilDome

South Teton12514ft3814m

Mount Hunt10783ft3286m

Teton VillageJackson Hole

Mountain Resort

Mount Owen12928ft3940m

Grand Teton13770ft4197m

Middle Teton12804ft3902m

Blacktail Butte7688ft2343m

Kelly

Rolling ThunderMountain10908ft3325m

Bivouac Peak10825ft3299m

Eagles Rest Peak11258ft3431m

SignalMountain7727ft2355m

WILLOW FLATS

Jackson Lake Dam

Marie Island

Survey Peak9277ft2827m

SteamboatMountain7872ft2399m

Atherton Creek

TetonCanyon

Trail Creek

CurtisCanyon

Grand TargheeResort

ToDubois

Hatchet

Pacific Creek

Gros Ventre

Gros VentreSlide Crystal Creek

Driggs

Victor

Wilson

To Idaho Falls

ToAshton

To Pinedale

JACKSON

GRANITEBASIN

MO

OSE

BASI

N

To West Thumb

Headwaters Lodge & Cabins at Flagg RanchTrailhead

DeathCanyonTrailhead

GraniteCanyonTrailhead

Laurance S.RockefellerPreserve

JacksonHoleAirport

Menors FerryHistoric DistrictChapel of theTransfiguration

TaggartLake

Trailhead

Jenny Lake Lodge

Chapel of theSacred Heart

Signal Mountain Lodge

Leigh andString LakesTrailheads

Two OceanLake Trailhead

Glade CreekTrailhead

HermitagePoint

Trailhead

ClimbersRanch

LupineMeadowsTrailhead

Teton ScienceSchools

Jackson NationalFish Hatchery

Jackson Hole and GreaterYellowstone Visitor CenterRefuge sleigh rides (winter only)

Snow King Resort

National Museumof Wildlife Art

LizardCreek

PHIL

LIPS R

IDGE

WES

T G

RO

S V

ENTR

E B

UTT

E

EAST

G

RO

S V

ENTR

E B

UTT

E

Moose

- Wil

son

Ro

ad

Colter Bay Village

Jackson Lake LodgeMedical Clinic

ELK ISLANDGrassy Island

Herm

itage

Poi

nt

Donoh

o P

t

WEBB CANYON

MORAN CANYON

LEIGH CANYON

PAINTBRUSH CA

NYON

COLTER CANYON

WATERFALLS CANYON

Buffalo Valley Road Pa ci

fic

Creek Road

River

Road (4-

whe

el-driv

e re

quire

d)

Riv

er

Ro

ad

Ante l ope Flats Rd

AN

T EL O

PE

F

LA

TS

SHA

DO

W

M

OUNTAIN

Mo

rmo

n

Ro

w

CunninghamCabin Historic Site

Triangle X Ranch

Dornans

Deadmans BarRoad

Cattleman’sBridge SiteRiver access

Riveraccess

Riveraccess

THEPOTHOLES

AVALANCHE CANYON

DEATH CANYON

GRANITE CANYON

OPEN CANYON

GARNET CANYON

HANGING CANYON

Shuttle boat

CASCADE CANYON

Schwabacher Road

Park HeadquartersRiver access Gros Ventre Roa d

Sig

nal

Mountain Rd

Grand ViewPoint7586ft2312m

Mike Harris

Ashto

n - Flagg Ranch Road

Grassy Lake Ro

ad

Static Peak11303ft3445m

Prospectors Mountain11241ft3426m

MurieRanch

Jenny Lake Trailhead

6467ft1971m

Boatlaunch

River access

River access

River access

River access

ALASKA BASIN

Fish

Cre

ek

Ro

ad

Ranger Peak11355ft3461m

Flagg Ranch Information Station

Colter BayVisitor Center

Jenny LakeVisitor Center

Craig ThomasDiscovery andVisitor Center

Map of Grand Teton National Park by the cartographers at the Harpers Ferry Center

Page 14: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

“The NPS Graphic Identity Program develops graphic standards that guide the design of a broad range of communication media within NPS... (and) provides tools and guidelines to help all of us achieve a more consistent approach to the design of our visual communications.”

BackgroundNPS print map symbols

Page 15: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

originate from the Ultimate Symbol Collection

BackgroundNPS print map symbols

www.ultimatesymbol.com

Page 16: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

originate from the Ultimate Symbol Collection

shapes are then simplified, line widths and internal distances increased

BackgroundNPS print map symbols

Page 17: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

originate from the Ultimate Symbol Collection

shapes are then simplified, line widths and internal distances increased

intentionally bold for high contrast with map background

BackgroundNPS print map symbols

Page 18: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Adapting symbolsDesign frameworkslim profiles

z11 z12 z13 z14 z15

symbols in NPMap Builder

Page 19: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Adapting symbolsDesign frameworkslim profiles

black, off-white, and white versions support multiple backgrounds

Page 20: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Adapting symbolsDesign frameworkslim profiles

black, off-white, and white versions support multiple backgrounds

multiple sizes for greater cartographic flexibility

32px 24px 16px 17px 13px 9px

Page 21: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Adapting symbolsDesign frameworkslim profiles

black, off-white, and white versions support multiple backgrounds

multiple sizes for greater cartographic flexibility

shadow effects provide visual dimensionality

Page 22: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Adapting symbolsDesign framework

HFC + NPMap

Page 23: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Recent design examplesInformation symbol

original HFC symbol

initial NPMap symbol

Page 24: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Recent design examplesInformation symbol

(pixel preview)revised NPMap symbol

Page 25: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Recent design examplesCampgrounds vs. campsites

(l) photo by Grand Canyon NPhttps://www.flickr.com/photos/grand_canyon_nps/6890179264(r) photo by Paxson Woelberhttps://www.flickr.com/photos/paxson_woelber/5433948195

Page 26: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Recent design examplesCampgrounds vs. campsites

early design variations finalized design

Page 27: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Recent design examplesSpring symbol

Page 28: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Recent design examplesSpring symbol

Page 29: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Recent design examplesEntrance station symbol

ranger station symbol early variation final design

Page 30: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Future developmentsadapting symbols to OpenGL

better intergration into our mobile maps

automating elements of the artwork production

revisiting/redesigning symbols based on feedback

revising the placemarkers used in NPMap Builder

Page 31: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

Learn moreNPMap Symbol Library: http:// /www.nps.gov/npmap/tools/npmap-symbol-libraryGithub repository:https://github.com/nationalparkservice/npmap-symbol-libraryNPS Graphic Identity Standards:http://www.nps.gov/hfc/services/identity/

ReferencesStevens, Joshua A., Anthony C. Robinson, and Alan M. MacEachren. (2013). “Designing Map Symbols for Mobile Devices: Challenges, Best Practices, and the Utilization of Skeuomorphism.” 26th International Cartographic Conference. http://icaci.org/files/documents/ICC_proceedings/ICC2013/_extendedAbstract/356_proceeding.pdf

Wallace, Tim. (2011). “Interview with a Celebrity Cartographer: Patrick Hofmann.” Cartographic Perspectives, 0(69), 83-90. doi:10.14714/CP69.30

Page 32: web map symbols for the National Park Service · Every pixel counts web map symbols for the National Park Service Jake Coolidge @jccartography NACIS Annual Meeting Minneapolis, MN

NPMap

thanks!

[email protected]

@jccartography