Cartography Guide To Map Design Part 1

guide-to-map-design-part-1

User Manual: Pdf

Open the PDF directly: View PDF .
Page Count: 80

The Guide to Map Design.

TableofContents

Introduction

Howtousethisguide

Howvectormapswork

Bestpractices:Mapdesign

Designelements

Color

Typography

Iconography

Texture

Designprinciples

Contrast

Hierarchy

Density

Legibility

Specialconsiderations

Mapsformobile

Mapsfornavigation

Mapsfordatavisualization

GettingstartedwithMapboxmaps

Mapbox-providedtilesets

MapboxStreets

MapboxTerrain

MapboxTraffic

Mapbox-providedmapstyles

Basic/Bright

Streets

Outdoors

Dark/Light

Satellite/SatelliteStreets

AbouttheAuthor

TheGuidetoMapDesign

Cartographyisadesignanddatasynthesisthatbalancesinformation,color,readability,

andaccuracy.Theessentialsofgoodvisualcommunicationarekeytomakingamap

thatguideswhileencouragingvisualexplorationandquickcomprehension.

Modernmappingtoolsandtechnologiesallowproductownerstoarchitectelegant,

consideredmappingexperiencesfortheirproductsandendusers.ToolslikeMapboxStudio

andMapboxGLJS,giveproductownerscontrolnotonlyoverthelookandfeeloftheir

maps,butalsooverthemap'sresponsivenesstouserinputs,environments,

andother factors.

Whydesigncustommaps?

Asyounavigatetheworldit’simportanttoknowwhereyouareinrelationshiptowhereyou

aregoing.It’salsoimportanttounderstandcontextalongtheway—whatwillyoufindonthe

wayfromheretothere?Designingacustommapforyourbrandorproductallowsyouto:

Keepusersvisuallyconnectedtoyourbrandandinyourappastheyusethemap.

Highlightordownplayinformationasnecessarytoyourmap'susecase.

Designabasemapforyourdataandproductnarrativetobuildinteractionsupon.

Integrateuserinputsandenvironmentsintotheirexperiencewithyourbrand

inreal-time.

Introduction

Howtousethisguide

Designingacustommapstyleforyourproductorbrandstartswithcontextand

intention.Beginyourjourneybyanswering,"Howwillthismapdesignreinforcethe

informationandexperiencemybrandorproductaimstoconvey?"

Thisguidewillleadyouthroughtheprocessofdefininganddesigningyourcustommap

style.Itwill:

Explainhowvectormapswork

Illustratesomebestpracticesinmapdesign,suchas:

Customizabledesignelements:color,typography,texture,andiconography

Principlesofgoodmapdesign:visualcontrast,hierarchy,density,andlegibility

Specialconsiderationsfordesignmapsfornavigation,mobile,anddatavisualization

GetyoustartedwithMapboxmaps

Definetheglobalcoverageandzoomlevelsprovidedwithwebmaps

DescribeMapbox-providedmapstylesandwhentousethem

DescribeMapbox-providedvectortiles(data)andwhatitcovers

Let'sgetstarted!

Howtousethisguide

Howvectormapswork

Beforedesigningasingleroad,waterway,orcitylabel,it’simportanttounderstandhow

vectormapsfunction.

Vectormapsareanadvancedapproachtomappingwheremapdataisdeliveredand

preciselyrenderedinreal-time.Theyaredeliveredtothebrowserormobiledeviceusing

WebGLorOpenGLwhichdynamicallydrawsdatawiththespeedandsmoothnessofa

videogame.Theresultfastinteractivemaps.

Sincethemapisliterallybeingdrawninbrowserordevice,youcandynamicallychange

styledelementsduringruntime.Lightenordarkenthemapbasedonthetimeofday,

personalizeiconsandthecolorsbasedonuseractivity,switchlanguagesonthefly,or

bump labelsizesbasedonuserpreferencestoimprovelegibility,allinrealtime.

Avectormapsconsistofthreeworkingparts:1)therenderer,2)thevectortiles,and3)

the stylerules.

Howvectormapswork

2) Thevectortiles

Thevectortilesetisasetofpoints,lines,andpolygonsthatrepresentnaturalandmanmade

featuresacrosstheglobe.Vectortilesetsdescribethegeometryofeachfeature,wherethey

belong in the world, and other key properties. They do not include any inherent style

properties. This data is optimized in vector tile format which renders the data lightweight and

ready for delivery on mobile or web platforms.

Howvectormapswork

1) Therenderer

VectormapsarerenderedwithMapboxGL.MapboxGLusesthepowerofWebGLto

combinevectordataandstyleinstructionsanddrawthemintheclient.Todisplayamapin

webbrowsers,usetheJavascriptlibraryMapboxGLJSwhichdrawsthemapandallowsfor

motion and interactivity to be incorporated with code. For maps in native applications such as

Mapbox iOS and Android SDKs, use Mapbox GL Native.

3) Thestylerules

ThemapstyleitselfiswrittenasruleswhichdefineitsvisualappearanceusingtheMapbox

GLStyleSpecification.Itspecifies:

Whatdatatodraw

Whatordertodrawthedatain

Howtostylethedatawhendrawingit

Don'tworryyoudon'thavetotouchalineofcode.MapboxStudio'sstyleeditorprovidesthe

userinterfacewhereyoucandefineyourmapstyle.Behindthescenes,Studiocreatesthis

filethe style.jsonandhostsitontheMapboxStylesAPIwhenpublished.Thisstyleis

thenaccessibleviaendpointtoaddtoyourmobileorwebapp.

ViewtheliveversionofmapstylehostedontheMapboxStylesAPIataurllike:

https://api.mapbox.com/styles/v1/mapbox/streets-v9.html?<access-token>#0/0/0

Viewthe style.jsonstylerulesdocumentataurllike:

https://api.mapbox.com/styles/v1/mapbox/streets-v9?<access-token>#0/0/0

Howvectormapswork

Bestpractices:Mapdesign

Mapdesignisessentiallyadesignproblemthatrequiresdesignthinking,planningand

vision.(Thisisthefunpart.)

Inthissection,wewilllookatthedesignelementsinyourmapstylethatshouldbe

customizedtoreflectyourproductorbrand'sdesignaesthetic.Youhavecompletecontrol

overyourmapstyle—infact,anyfeaturecanbecustomized.Werecommendyoubegin

designingthefollowingelements:color,typography,iconography,andtexture.

Next,wewillintroducesomedesignprinciplesimportanttocartography.Adheretothese

principlesasyoudesigntoensurethevisualrelationshipismaintained.Theseprinciplesare

nottobeappliedinisolation,butinsteadarecomplementary.Collectively,theyhelp

cartographersandmapdesignerscreatemapsthatsuccessfullycommunicategeographic

information.

Bestpractices:Mapdesign

Designelements

Considerthefollowingelementstobethecustomizablepartsofyourmap.Thebestplaceto

identifythedesignelementsforyourmapisinyourproductorbrand'sstyleguide.This

styleguideshouldcontainfonts,colors,imagery,etc.specifictoyourbrandandhelpyou

makedecisionsaboutyourmap'scustomization.

Typically,youwantyourmaptomatchyourbrandortocomplementyourbrand'suser

interface.Let'srevieweachdesignelementindetailtoseetheimpacttheyhaveonyour

mapstyle.

StyleguidefromtheBlueprintmapstyle.

Designelements

Color

Colorisusedindesigntoattractattention,groupsimilarelements,showmeaning,and

enhanceaesthetics.Wetypicallybeginthedesignprocesswithacolorpaletteforeachmap,

comprisedofacohesivegroupofprimaryandaccentcolors.Thisisaniterativeprocess.

Colorswillmostlikelygrowandmorphonceyoustartdesigningandseeingwhatworks

togetheronyourmap.Justmakesureyourfinalmapandpaletteareconsistentandwork

harmoniouslytogether.Belowareafewthingstoconsiderasyoudefinethecolorpalettefor

yourcustommap.

NumberofColors

Usecolorconservatively.Theeyecanonlyprocesssomuchatatime,soalimitedcolor

paletteisbest.Dependingonthecomplexityofyourmapdesign,between10-12colorsis

prettystandardforafull-bodycolorpalette.Alsoconsiderasignificantportionofthe

populationhaslimitedcolorvision,sostyleaccordingly.

BothMapboxStreetsandMapboxOutdoorsusearoundadozenuniquecolors,butavariety

ofshadesandtints.

Manyconceptuallysimilarfeaturessharethesamehuevalue,toreinforcetheirmeaningand

createamorecohesivemap.

Color

MapboxStreetcolorvariety

Limitingyourcolorswillalsohelpwithvisualharmony.Forexample,manyfeaturesrelated

tonavigationandtransportationsharethesamebluehue:raillabels,highwayshields,ferry

routes,andevenroadcasingsforthispurpose.

MapboxStreetsbluetransiticons

Color

ColorConsistency

Youcanmakesubtleadjustmentstoyourcolorpalettewhilemaintainingvisualharmonyby

usingthesamehuebutalteringthecolor'ssaturationorvaluelevels.Thehuevaluesimply

representsthecolorofaniteminthecolorwheel.

Saturation

Saturationrepresentsthelevelofintensityinthecolororthecolor'sdominance.Asyou

decreasethesaturation,thehuewebecomeslessvibrantandthecolordominateslessand

less.Whenyoureach 0saturation,nohuedominatesandyouendupwithadullgray

color.

Color

Valueisthedimensionoflightness/darknessdescribingtheoverallintensityoflightinthe

hue.Asyoudecreasethevalue,thehuebecomesdarkerandat0becomescompletely

black.

Let'ssayyoustartwithapalegreenfromyourcolorpalettetousetostyleparkpolygons.

Thendecideyouwanttodifferentiatebetweenwoodedareasandgrass.Takingtheoriginal

green(shownbelow),I'vecreatetwonewcolorsbyloweringthevalueforadarkergreen

andthenaddingsaturationforabrighter.Resultinginthreecolorvariationswithinthesame

hueandharmoniously.

Color

Value

Typography

Typographyisoneofthemostimportantdesignelementsofyourmapandcanmakeor

breakthereadabilityofyourmap.Labels,whichrepresentmostofthetextyoufindinmaps,

areoftenonlyonetothreewordslongandaredisplayedatverysmallsizes.Withthis

constraintfontswithtallerx-heights,opencounters,andnoserifsusuallyworkbeston

maps.

Yourbrand'sfontmayormaynotworkforyoumapstyle.Inthatcase,chooseafontdirectly

fromStudiothatbothworksforyourbrand.Considerthefont'squality,readability,and

personality.

Quality

Highqualityfontsofferavarietyofstyles:Italics,Caps,CapsItalic,andSmallCaps,

weights:UltraLighttoUltraBlackandeverythinginbetween,andwidths:Condensed,

Narrow,Normal,Mono,andExpanded,justtonameafew.Youcanleveragethisvarietyto

easilydifferentiatebetweenlabelsandshowhierarchyinyourmapstyles.

TheprimaryfontforMapboxmapsis DinOfficeProformapstylesusedintheMedium,

Italic,Regular,andBoldvariety.Weuse ArialUnicodeMSasourfallbackfonttomakesure

yourmaphascompletelanguage. ArialUnicodeMSismappedtothestandardUniversal

CharacterSetwhichsupportsawiderangeofgloballanguages.1Mostprofessionalfontsdo

notcreatecharactertosupportalllanguages,soaunicodefallbackisnecessarytoensure

globalcoverage.

Typography

Blueprint

TheBlueprintstyleisveryminimalistandisprimarilydrivenbyonehueandonesuperfamily

typeface.Thetypefaceis FFKievitatypefacethatexploresthesynthesisofthesansserif

formtothestructureandproportionsofatraditionalseriffont.Thefamilyspansnineweights

andincludessmallcaps,trueitalics,andmultiplefiguresets–everythingnecessaryfor

creatingsophisticatedtypographicsystems. ThistypefaceshipswithStudioandonly

employedLight,LightItalic,Italic,Bold,Black,andBlackItalicvariations.

Typography

Mapbox Streets

Readability

Readabilityisaboutarrangingwordsinawaythatallowsthereaderseyetoaccessthe

contenteasilyandintelligibly.Thisskilltakestimetohoned,buthereareafewstellarways

togreatlyenhancethereadabilityofyourmaps:

1. Diversityoflabelclassifications.Designdistinctionintotheclassificationsand

propertiesavailableinyourlabeldata.Forexample,placelabelsofferclassifications

ofcities,towns,villages,neighborhoods,andmore.Createasystemoftreatmentto

distinguishthisdiversity.

2. Diversityoflabelcolors.Thiscanbesubtlyenforcedbyalteringthesaturationor

valueofthesamehueasshownintheColorsection.Thisworksparticularlyforstyling

pointsofinterest(POIs)togivedistinctiontocategoriesofpoints,likecafesorschools

havingdistinctcolors.Butkeepitmoderate.

3. Controlthespacing.Letterspacing(oftencalledtracking)adjuststhespacingbetween

allthelettersinapieceoftext.Thiscanhelptomakeyourlabelslookmoreopenand

inviting.Tinytypeismademorereadablebyopeningtheletterspacingabit.Aswith

everything,usecautiontrackingisoftenwildlyoverdone.Alsomonitoryourlabelwidth,

thisdetermineshowmanylettersfitononerowbeforealine-breakoccurs.Something

tobemindfulofwhenworkingwithBold,Blackorjustmoreheavilytypefaces.

Typography

Texthalosbringyourlabelstotheforegroundvisuallyandhelppreventbackground

elements,suchasroads,waterways,etc.,fromdilutingthecomprehensionofyourlabels.

Thespecifictreatmentherewillvaryfromdesigntodesignbutyouwanttopullyourlabelsto

theforegroundwithoutmakingthehalosobvious.

Takealookatthebeforeandafterbelowshowingasmallhaloeffect.Noticehowmuch

easieritistoreadthetextafterapplyingasmalltouchofhalo.

Before:Notexthaloappliedtolabels

After:Withtexthaloapplied.

Typography

Texthalos

Personality

Thepersonalityofatypefacespeakstothevoiceandenergyitexudes.Majortypeface

stylesaresansserif,serif,andscripthoweversansseriffontsarepopularontheweband

mobilebecauseofthelowerDPI(dotsperinch)onscreens.Threemaintypesofsansserif

fonts:humanist,transitionalandgeometric.Humanistsans-seriftypefacesmimic

handwritingandevokeafeelingofwarmthandpersonality.Transitionalsansseriftypefaces

havestrongstrokesandaremoreuprightanduniform.Theytypicallyhaveanunassuming,

authoritarianandmodernpersonality.GeometricSansSeriftypefacesusegeometricshapes

toformthebackbonesoftheletters,whichcreatesastrict,objective,anduniversalfeel.

Thefactisthedetailsofatypeface–suchascontrast,proportionsandangles–canhavea

bigeffectonitsemotionalcharacteristics.Tohelpyoudecide,herearefivequestionsyou

shouldaskofanytypefaceyou’reconsidering…

Purposeandmood?

Seriforsansserif?

Collaborativeorcontrast?

Creativeorclassic?

Takealookatsomepersonalityofthesefontsusedinafewofourdesignermapstyles.

Typography

Roboto:Modernyetapproachable

DecimalusesRobotoCondensedandRobotoBoldCondensedto achieve this modern

yet approachable feeling for it's dark but vibrant map style. GoogledescribesRobotoas

"modern,yetapproachable"and"emotional".Condensedfontsgrabyourattentiondueto

theirslender,high-reachingverticalrealestate.Thisfontpairsverynicelywithsuchan

extremecolorpaletteandfeeloverlytechnicalwiththeterminal,computerwhiztheme.

Typography

RobotoMono& OldStandard:Modernclassic

NorthStarusesRobotoMonoinavarietyofweightsandstyles.While"modern,yet

approachable"themonospaceformatwhichhavethelettersandcharactersoccupythe

sameamountofhorizontalspacesimilartotheletteringthatwouldcomefromanold-

fashionedtypewriter.NorthStarpairsthisfontwithgentletouchesofOldStandardTT.

Anothermodern,yetclassiciststylefontbutwithserifevokinganolder,classicfeelingofthe

late19thcentury.Thiscombinationspromotestheoldmodernmixofthismapstyle.

https://en.wikipedia.org/wiki/Unicode_font

https://www.fontshop.com/families/ff-kievit

Typography

MagdaCleanMono:Nostalgicgrunge

Desertplanetuses MagdaCleanMonoOffcProBoldand MagdaCleanMonoOffcProBlack,

bothavailableinMapboxStudio.Anothermonospace,thisfonthasaboxytypewriterlook

givingitathrowbackappeal.Thereisalsoagrungy,edginesstothewidelettersandthe

letterspacingaddedtotheselabels.Thisfonthastonsofpersonalityandaddsastrong

narrativetothisdeserted,almostdystopicmapstyle.

Iconography

TheiconsyouuseonyourmaptypicallyindicatepointsofinterestorPOIs.Thesecanbe

anythingfromlibrariestocafestomuseumstobusstops.Theiconsyouuseinyourmap

shouldreinforceyourbrandandstrengthenyourmap'sbrandrecognitionandreadability.

Successfulmapiconsmustbewidelyrecognizableevenacrosscultures,assimpleas

possible,andlegibleatsizesassmallas11px.Creatingyourowncustommapiconsfor

eachprojectisrathertime-consuming,soMapboxhascreatedacollectionofpixel-aligned

pointofinteresticonsmadebycartographersforcartography.Thiscollectionoficonsis

calledMaki.

Makiaimstobethemosthighquality,consistent,andcomprehensivepointofinteresticon

setpossible.MakiiconsaredesignedsimplyandworkseamlesslywithMapboxStudio.The

Makiiconeditorallowsyoutocustomizethestyleofyouriconsyoucanaddandremove

theseicons,categorizeandstylethemingroups,anddownloadthemforyourmapstyles.

Iconography

Full Makiiconset.

MakiiconsusedinMapboxStreetsmapstyle.

Noticethattheiconsaregroupedandstyleintofamiliarcategories.Forexample,thefood

categoryisallorangeandthetransitsallblue.Thesegroupingshelptheviewerrecognize

andfindPOIsmoreeasierastheynavigatethemap.

Styledandcategorizediconseachwithalightstroketopullthemslightlyfromthe

backgroundintheMapboxStreetsmapstyle.

Iconography

MapboxStreetsicons

MapboxSatelliteStreetshoweverdealswithaSatelliteimagerylayer,andthisrequiresa

differenttreatmentoftheiconstoensuretheyarelegibleovervaryingterrainandurban

landscapes.

MakiiconsusedinMapboxSatelliteStreetsmapstyle.

SimplewhiteiconswithadarkgraystrokethatblendswithvaryingterrainforMapbox

SatelliteStreetsmapstyle.

Iconography

MapboxStreetsicons

Texture

Textureisanaddedbonusinyourmapdesigntoolkit.Itrepresentstheperceivedsurface

qualityofadesignpiece.Patternscanbeaddedtomapfeaturestodifferentiateorblend

elements.Theycanalsostandindependentlyasatextureforthemaporfullbackground

patterns.

TexturesneedtobeseamlessusproperlyapplythemtoyourmapsinMapboxStudio.A

seamlesstextureisanimageorpatternthatcanbeplacedside-by-sidewithitselfwithout

creatinganoticeableboundarybetweentwocopiesoftheimage.

Addinganagedtexture

TheVintagemapstylewasdesignedtomimicthelookandfeeloftraditionalprinted maps.

The aged patternisappliedtothelandandbathymetrycustomthat was dataaddedtothe

map style.Over two dozen layers were styled layer-by-layerataverylowopacitywith

slightlydifferentcolortintstoget thiseffect.

Texture

Darkbrowndotpatternismeanttoaddsubtletexturetothewaterandisaddedlayer-by-

layeratlowopacityforeffect.

64x64px.svgtextureappliedtotheVintagemapstyle.

Texture

Acontrastingbluedotpatternappliedoverlightbluewaterandvibrant,greenlinetexturefor

park-typelanduse.

32x32pxtextureappliedtowaterfortheWhaam!mapstyle

Texture

Addingapopartfeel

TheWhaam!mapstyleemploysbright,playfulpatternstoshowbothtextureandevokethe

feelingofthispopartinspiration.Theentirewaterfeatureisfilledwithabluedotpattern.

Landusepolygonfeaturesareallclassifiedseparatelywithagreenstripedpatternandare

slightlytransparent.Thisallowsforareaswithoverlappinglandusetypestoappeardarker

showingelevationandhillshadingintheland.

32x32px.svgpatternappliedtogreenspacelandusefortheWhaam!mapstyle

RecommendedReading

DesigningtheVintagemapinMapboxStudio

DesigningtheWhaam!mapstyleinMapboxStudio

MakingandimportingyourcustompatternsandtexturestoStudio

Texture

Designprinciples

Herearesomeofthecoredesignprinciplesthatcartographersandmapdesignersapplyas

theystyletheirmaps.Togethertheseprinciplesformasystemforseeingandunderstanding

therelativeimportanceofthecontentinthemapandonthepage.Withoutthese,map-

basedcommunicationwillfail.Thefourdesignprincipleswewillcoverinclude:

Contrast

Hierarchy

Density

Legibility

Blueprintmap style

Designprinciples

Contrast

Humanbeingsarewiredtonoticedifference.Thisiswhatmakescontrastsuchapowerful

designprincipleinmapdesign.Contrastattractsattentionanddrawstheeye.This

separatesfeaturesfromthesurroundingelementsandcaninstantlycreateemphasisand

interest.Inadditiontoattractingattention,contrastestablishesboundariesbetween

elements.

ColorContrast

Keepahealthyamountofcolorcontrastinyourmapstyletokeepitvibrantandlegible.You

don'twanttoomuchcontrastoryourcolorscouldscreamattheviewer.Ifyourcolorsaretoo

mutedtheymaystarttoblendtogether.Increasethesaturationofyourcolorstopushthe

contrastifnecessary.

Lowcontrastmapwithsoft,lesssaturatedblue,greens,andabaselinegrayforlabels.

Contrast

Highcontrastmapwithvibrantmoresaturatedblues,greens,andadarkergrayforlabels.

Contrastandreadability

Theamountofcolorcontrastinyourmapstylecanaffectyourmap'sreadability.For

example,thetextlabelsandiconographycouldeitherblendintothebackgroundelementsor

standoutinaglaringway.Keepthisinmindasyouareworkingwithyourmap'scolor

palette.Ahealthyamountofcolorcontrastinyourstylewillhelpthosewithlowvision,color

blindness,orworseningvisionbetterseeandreadthetextonyourmap.Makesureyou

haveafairamountofcontrastbetweenelements,butnottoomuch.

Contrast

Decimalmapstyle,TristenBrown

Contrast

Visualizing data

Many maps use bright, primary colors against a stark, muted background map to highlight

important elements or show data visualizations. As long as there is simplicity and harmony

within your color palette this technique works well and can be super easy to customize or

alter with other color schemes. Decimal is one such style. This minimalist map style that

works great as a base for data visualizations or as a backdrop for your next game.

Hierarchy

Hierarchyhelpsviewersfocusonwhatisimportantwhileidentifyingpatterns.Astrong,

visiblehierarchicalasystemisoneofthemosteffectivewaystoincreasecomprehension.

Colorandscalearetwomajordesignelementsyouwanttofinessetoleveragethevisual

hierarchyofyourmapstyle.

Color

Usecolortodifferentiateandshowahierarchyofimportancebetweenmapfeatures.The

roadnetworksinMapboxStreetswhileusingthesamewidtharedistinguishedbycolorto

showhierarchy.Motorwaysarestyledorange,highperformanceroadsareyellow,and

primaryroadsarewhitewhilemaintainingthesamelinewidth.Thenextlevelofroadsare

styledwithathinnerwidthandlessvibrantwhitearerecedesmoreintothebackground,still

noticeablebutdocile.

Hierarchy

Scaleisboththeoverallsizeofanobjectandthatobject'ssizeinrelationshiptoother

elementsaroundit.Identifyingasystemofsizestorankmapfeatureslikelabelsorroad

widthswillhelptoindicatethehierarchyofthesefeatures.

Typographichierarchy

Thissystememploysbothscale,stylisticelements(likefontweight,i.e.light,normal,bold,

etc.),aswellastreatment(likeuppercase,lowercase,italic,outlineonly,etc.)toestablishan

orderofimportance.Thishierarchywillguidetheviewereasilyandquicklytothestartand

endofinformation,whilstenablingthemtoisolatecertaininformationbasedonthe

consistencyofuseinthestylethroughout.

BelowisthehierarchysystemfortheBlueprintmap,whichusesavarietyoftechniquesto

indicateimportanceanddifferentiationbyformingvisualpatternsfortheusertobetter

comprehendthemapstyle.

Typographicstylingofplace,road,marine,andwaterwaylabelsintheBlueprintmapstyle.

Hierarchy

Scale

Typographichierarchystructuredbycitysize.

Differentiationintypographictreatmentforcityandneighborhoods.

Hierarchy

HereinMapboxStreets,thescalevariationismoresubtleoverallbutyoureyesarelead

aroundthemapbyorderofscaleintheplacelabels.

Generalpurposemaps

Mapsthatstyleavarietyofphysicalandculturalfeatures,liketerrain,roads,transitstops,

andpointsofinterest(POIs),aregeneralpurposemaps.Theyshowhierarchydifferently

thanthematicmapswhichnormallyfeatureasingleattributeortherelationshipamong

severalattributes.

Forgeneralpurposemaps,featuresshouldnotoverpowereachotherandshouldessentially

lieonthesamevisualplane.Herehierarchyisusuallymoresubtleandtheviewerbrings

elementstotheforefrontbyfocusingattentiononthem.

Hierarchy

Thematicmaps

Thematicmapsaretypicallyemphasizespecificfeatureorlocationtoshowprominence.

Oftentimes,thethemeitselfismoreimportantthanthegeographiccontext.Hierarchythen

startstopresentitselfinthegroupingoffeaturesasstylisticelementsbycolor,texture,

scale,and/orstyle.

Hierarchy

Whaam!mapstyle-thematicstylingwithhighhierarchicalfocus.

Density

Althoughmapfeaturesmaybeavailableatacertainzoom,featuresshouldnotbestyled

basedonavailability.Revealingtoomuchinformationatacertainzoommaycause

confusionordiluteyourmap'sfocus.Asyoudesignyourmap,considerhowthedensity

of informationmayincreasesthevisualweightofthemap,disturbingthevisualhierarchy.

ThemapbelowshowsWashingtonDCstyledwithameasureddensityforthepointsof

interestorPOIs.MoreprominentPOIsarestyledbasedonscalerankwhichisafield

includedMapboxStreetsdata. scalerankisdeterminedbasedonanalgorithmthat

ranks importancebasedsizeandappendeddatafromWikipedia.MapboxStreetsbrings

inPOIs rankedat 1mostimportantandisstyledinlowerprioritythanneighborhoods,

highway shields,andtransitstops.Usinginformationlikescalerankorother

classificationstovary stylingandpriorityaregoodwaystocontroldensity.

POIsgroupedby scalerankandprioritizedaccordingly.

TheexamplebelowgroupsallPOIsintoonelayerwhichdoesn'tallowfordifferentiation

in styling.POIsshowupatcityviewalthoughtheymaynotberecognizablelandmarks

and addnovaluetothemapatthislevel.AfewofthesePOIsarealsoappearing

insteadof transitstopsorhighwayshieldswhichdoesn'thelpnavigationorwayfinding.

Measured densitymakesyourmapmorereadableandhelpsfocusthenarrativeand

usabilityofyour map.

Density

POIsstyleddenselywithnoprioritization.

Zoomlevels

Webmaps,asopposedtoprintmaps,havemoreflexibilityinwhatinformationcanbe

shownandwhen,thankstozoomlevels.Userscanexplorethemapfromagloballevel and/

orzoomintostreetleveldetailandeverythinginbetween.Zoomlevelsmovefromz0to

z22andalongthewaytheappropriatedataisavailablefromvectortilestobestyled.

Sometimes,itisnotpossibletolegiblydisplaydataatagivenzoomlevel.Forexample,a

denseseriesoftopographiclineswouldturnintoajumbleoffeatureswhenviewingthemap

atthestateorregionalzoomlevel.Conversely,stylingeveryPOI,likeparks,buildings,

restaurants,etc.,atacitylevelwouldappeartoocoarseandhardtocomprehendata

glance.Topreventthesepotentialissues,thecartographyteamhasdeterminedoptimal

maximumandminimumzoomlevelstomakedataavailableinourMapboxvectortiles.

Density

Globalview z1

Nationalview z3

Density

Regionalview z7

Cityview z12

Density

Streetview z17

Legibility

Tobelegibleistobeeasilyread which is of utmost importance in mapdesign so theuser

caneasilyunderstandhowtonavigatetherepresentedspace.Legibilityof mostmap

featuresdependsoncolorandsize,and in addition to labels and text, can be iconography

too. Iconsmust be designed simply enough to recognizeat small sizes andoffergood

contrast againstthebackground.

Iconography

Forselectcitiesandcountries,ourMapboxStreetsiconsfeaturelocalpublic transiticons

andhighwayshieldstohelporienttheuserbyvisuallyconnectingthemapto their

environment.Weredesignedoriginalsymbols,simplifyingthedetailsandexaggeratingthe

formwhilebalancinggoodpixel-alignmentandvisualparitywiththeoriginals.

POIicons,highwayshieldsandrailiconsusedinMapboxStreets.

Legibility

Text

A goodchoiceoffont with high x-heights and suitable at smaller sizes,colorcontrastfor

visual separation between foreground and background,as needed letter spacing,andthe

useoftext halos can vastly improve legibility in text labels.

Legibility

Mid-zoomviewofPOIiconsandhighwayshieldsinMapboxStreets.

Legibility

DesigningMapboxStreetsandOutdoorsforMobile

MapboxOutdoorsredesign

Recommended Reading

Proximity

Theproximityofmapelementstoeachotherisalsoimportanttotheoveralllegibility.

Proximitycallsforrelateditemstobegroupedvisually,creatinglessclutterandmakingfor

a moreorganizedlayout.Attimesyouwillhavefeaturesverycloseoroverlappingyour

map, as you style createabalancebyusinglightercolorsaturation,softeropacity,and

substantial contrasttextandtexthalos if text is involved.Balanceiskey.

MapboxOutdoorsstylesoverlapping skipaths, contourlines, andhillshadesusing color

andstyletodifferentiate.

Specialconsiderations

TheMapboxCartographyTeampridesitselfonmakingmapsarebothusableandbeautiful.

OurcoreMapboxmapstylesarecreatedlargelyforgeneralpurposeuse.TheCartography

TeamstylesalmosteverymapfeatureandclassificationusingourglobalMapboxdata,and

themapsarereadytoplugandplayintoanymappingapp.Wealsohaveafewspeciality

mapswe'vebeenworkingonwithspecificusecases,conditions,and/orusersinmind.

Forthesekindsofmapsusedesignthinking,wetohelpensurethattheuserexperienceis

prioritized,designexecutionisoptimizedforplatformandperformance,andthatthemap

worksintheoverallenvironmentitwillultimatelylivein.Environmentalconsiderationscan

beanythingfromthetimeofday,locationofinteraction(outsideinthesun,insideanoffice),

modeoftransportation(car,bike,orfoot),theplatformbeingusedtoviewthemap(mobile,

web,etc.),oreventheuserinterfaceassociatedwiththemapstyle.

Thisprocesshelpsusbuildholisticdesignsolutionsforourproductsandtheexperienceof

endusers.Thesearetheusecaseswearedevelopingdesignprocessesfor:

Mapsformobile

Mapsfornavigation

Mapsfordatavisualization

Specialconsiderations

Mapsformobile

Smartphonesplayanimportantroleinhelpingpeoplenavigatetheirenvironmentandget

themtowheretheyneedtogo.67%ofsmartphoneownersusetheirphoneatleast

occasionallyforturn-by-turnnavigationwhiledriving.Aswedesignmoreandmorefor

mobilehereatMapbox,wetakeintoaccounttheuniquechallengesthatmobilemapsface

asopposedtothatofdesktopandprintmaps.Mobilemapshavearangeofuserand

environmentalvariablesthatrequireconsiderationthroughoutthedesignprocess.

Considerations

Spatialrestriction.Themobilescreenreintroducesspatialrestrictiontothedesign

process.Notonlyisthescreensmaller,butit’salsoasmallerviewportshowinga

similar-sizeddesktopmap,meaningmuchlessmapdataisviewedatonce.Thismeans

visualcuesandconnectionsaregoingtobehardertomake,anddifferentstyling

decisionsmustbemadesincefewermapelementscanbeseen.

Mapinteractivity.Themobilemapuserisconstantlyfiddlingwiththemap.Luckily

interactivitysuchaszoom,pan,andpitchvariablescanbeautomatedandcontrolledby

otherinformationsuchasuserlocation,userspeed,anddefinedroutedistances.Not

onlydoesthisfreetheuser’shands,butitalsoaddstolistofvariablesdesignersmust

accountforwhendesigningmobilemaps.

Usermanipulation.Userstendtomanipulatethemobilemapsconstantly.Although

usingone’sfingerstozoom,pan,andpitchamapisreallynodifferentthanusinga

mouse,thesizeconstrainttypicallyrequiresmoreuserinteractionandmanipulationto

viewmoremapcontextandcontent.Wecanseealooseconnectionbetweenscreen

sizeandinteractivity,duetothesimplefactthatthereislessmapinformationshownat

anygiventimeonmobilemaps.1

Mapsformobile

MapboxStreetsonmobiledevice.

Testingplatforms

Testingourmapsonasmanydevicesaspossiblegivesuscriticalfeedbackthatpropelsthe

iterativedesignprocess,andverifiesthattheuserexperiencewillbeasfunandproductive

aspossible.Oneofthemaintoolsweusetoquicklyteststylesistherecentlyreleased

StudioPreviewforiOS.AcompaniontoMapboxStudio,thepreviewappallowsustolog

intoouraccountandquicklyprototypemapstyleswithintheenvironmentsitwillbeusedin,

andtomimictheuserexperience.

Recommendedreading

SayhellototheStudioPreviewapp-viewmapstylesdirectlyfromyourdevice

BringyourmapstolifewithRuntimeStylingonmobile

DesigningMapboxStreetsandOutdoorsformobile

Mapsformobile

.DesigningMapsforMobile,NatSlaughter/Mapbox↩

Mapsfornavigation

Thereisalotofoverlapbetweendesigningformobileandnavigationbecause,primarily,

navigationmappingisdoneonamobiledevice.Inaddition,navigationmapsmust

harmoniouslyintegratetoggleabletrafficdataandotherinformationoverlaystoprovideuser

controlledcontext.Toprovideguidancetothemapfordrivers,cyclistsorpedestrian,the

CartographyTeamtookintoconsiderationavarietyofenvironmental,speed,andtime

factorsfortheMapboxNavigationsuiteofmaps.

Intheearlyphasesofthemapdesignprocess,weconsider:

Thephysicalrelationshipbetweenthemapandtheuser:.Howfarawayisthemap

fromtheperson?Isithand-heldforapedestrian,orfixedtoawindshieldforadriver?

Viewingtime:Istheuserviewingthemapinshort,fragmentedglances,or

contemplativelysittingwithit?

Usermanipulation.Iftheuseriscurrentlydrivingtotheirdestinationtheanimation

alongthepathismostlikelybeleadingtheshow.Rotatingandzoomingastheirphone

movesclosertotheirdestination.Considerthecamerabehaviorslocation(lat/lng)and

zoomlevel(cameraposition)androtationandpitchasyoustyle.

ControlledDensity.Customoverlaydata,suchastrafficorbikelanes,shouldbekept

consistentandharmoniouswiththeunderlyingmapstyle.Thedatamustalsoaddvalue

insteadofmuddyingthewaters.Themostimportantinformationshouldbeclearly

visibleataglance.

Mapsfornavigation

MapboxNavigationGuidanceDayMap

Recommendedreading

Bettermapsfornavigation

Offlinenavigationembeddedincars

Mapsfornavigation

DesigningMapsforMobile

Mapsanddatavisualizations

Datavisualizationscanbeexpressive,powerfulopportunitiestousemapstotellstoriesand

understandinformation.Acompellingbasemapsetsthesceneanddeepenstherelationship

betweenthewhatandthewhereoftheinformationnarrative.Whenuncoveringspatial

patternsorgettingactionableinsightsfromdata,seamlessintegrationbetweenthemap,

mapandinterfacearekey.Theuse-caseiscomprehension,andhelpingtheuserseethe

relationshipsinthedataistheultimategoal.

Considerthefollowingasyouco-designyourmapanddatavisualizations:

Exploreorexplainyourdata.Exploratorydatavisualizationsareappropriatewhen

youhavetonsofdataandyou’renotsurewhat’sinit.Explorationisgenerallybestdone

atahighlevelofgranularity.Ifyouoversimplifyorstripouttoomuchinformation,you

couldendupmissingsomethingimportant.Explanatorydatavisualizationisappropriate

whenyoualreadyknowwhatthedatahastosay,andyouaretryingtotellthatstoryto

somebodyelse.Youknowthestoryandthereforeyoucandesigntospecifically

accommodateandhighlightthatstory.Editthedatabydecidingwhichinformationstays

in,andwhichisdistractingorirrelevantandshouldcomeout.

Designathree-dimensionalvisualhierarchy.Oftentimesweseedatavisualizations

thatseemtoplopthedataontothemap.Thekeyisintegration,youwantthemapand

datatoworktogethernotagainsteachother.Color,value,andsaturationarekeyfor

theserelationships.Startwithastrong,limitedcolorpalettewithhighcontrast.Ifyou

startwiththeLightorDarkstyle,alterthehuetofityourbrand,startsmallwithline

widthsandeaseshapesfrom 0%to 100%opacity.Thegoalistoproduceathree-

dimensionaleffectinwhichcertainkeyfeaturesappeartoriseoffthemap'stwo-

dimensionalsurface.

Categorizesimilardata.Earlyinthedesignprocess,identifythebestandmost

accuratewaytosortandcategorizeyourdata.Dependingwhichtechniqueyouplanto

usefordisplayingyourdataonthemap,choropleth,heatmap,etc.,determiningthe

appropriategroupingsforyourdatawillkeepyourdatahonestandprovidevaluable

insights.

Mapsfordatavisualization

VisualizingEurovisionShazamtagswithMapboxGL

Visualizationstyles

Dotdensity — Amapstylethatusesadotorothersymboltoshowthecollective

presence(density)ofafeatureorphenomenon.Forexample,showingbusy

intersectionsorhigh/lowvolumesofactivitywithinareas.

Choropleth — Thisisathematicmapstylethatappliesshadedcolororpatterntextures

inproportiontotheintensityofthedatabeingdisplayedonthemap.Forexample,

showingpopulationdensityorper-capitaincome.

Hexagonalbinningorhexbin — Thismapstyleisgoodforshowinggeneralthemes

overageography.Itislessgranularthandotdensityandnotconstrainedbyboundaries

asisthecasewithchoroplethmaps.

Heatmap — Thismapstyleenablesthemapviewertoperceivedensityofpoints

independentlyofthezoomfactor.Itistheleastconstrainedofthemallbecauseitdoes

notcorrespondtogeographicbounds.

Customdata

Thereareavarietyofwaystoadddatatoyourmap.First,youcanuploaddatadirectlyinto

MapboxStudio,thiswillconvertyourdataintoawebandmobileready,highlyperformant

tileset.YourcustomtilesetwillbeaccessibleinanyMapboxStudiostyle.Anothermethodis

tocreateadatasetwithyourcustomdata.Thisisdoneinthedataseteditor,thereyoucan

Mapsfordatavisualization

adddatasources,drawnewdatapoints,lines,andpolygons,combinevariousdatasources

andmaintainyourrawdata.Onceyouaredoneaugmentingyourdata,youcanexportitas

atilesetandaddittoyourmapforstyling.Choosingatilesetordatasetdependsonifyou

areplanningtousethedataimmediatelyinyourstyleorifyouplantoenhanceormanage

thedataovertime.

ThefinalwaytoadddataiswithMapboxGLJSwhichallowsyoutoaddthedata

dynamically.Checkthisexampleforaddinglive GEOJSONdatatoyourmapstyle.Findout

aboutHowUploadsWorktolearnthedifferencesbetweentilesetsanddatasets,howthe

uploadprocessworks,techniquesforuploading,andresourcesforgettingstarted.

Recommendedreading

Dotsvs.polygons:HowIchoosetherightvisualization

LightandDarkmapsfordatavisualization

Dataunderneath:Labelsontop

VisualizingEurovisionShazamtagswithMapboxGL

1.DesigningDataVisualizationsbyJulieSteele,NoahIliinsky↩

Mapsfordatavisualization

GettingstartedwithMapboxmaps

WhenyoudesignyourmapswithMapboxyouhaveaccesstoourglobaldata.Thisdata

happensinalllocationsandateveryzoomlevel.Asyoustyle,makesuretozoominandout

andconsiderhowtheystylelooksateachzoomlevel.Thedesignelementswejustcovered

visuallyrepresentthenaturalandmanmademapfeaturesthatmakeupourworld.

GettingstartedwithMapboxmaps

Mapbox-providedtilesets

Mapboxwebandmobile-readyvectortilesare75%smallerthanarastertilesets.This

resultsinfast,smoothzoomingfromtheworldviewofamapdowntostreet-leveldetail.

Mapboxvectortilesetsinclude: mapbox-streets, mapbox-terrain,and mapbox-traffic

whichareoutlinedinthenextsection.

Vectortilesetdataconsistsofgeographicallyreferencednaturalandmanmadefeatures

convertedinto points,lines,and polygons.Thisistheunderlyingframeworkofthemap

andprovidestheinformationthatwillbestyled.Mapdatafeaturestypicalfallintothe

followinggeneralcategories.

Naturalfeatures

water

land

landuse

terrain

Mapboxtilesets

motorway

trunk

primary,etc.

Placelabels

country

state

city

island,etc.

Mapboxtilesets

Roadnetworks

Generallabels

marine

water

roads,etc.

Mapboxtilesets

Pointsofinterest(POI)labels

naturalreserves

businesses

restaurants

attractions,etc.

Transitlabels

airportlabels,

raillabels,

highwayshields,etc.

Mapboxtilesets

MapboxStreets

mapbox.mapbox-streets-v7

MapboxStreetsvectortilesarelargelybasedondatafromOpenStreetMap,afreeand

globalsourceofgeographicdatabuiltbyvolunteers.Whilestyling,referencethisMapbox

Streetsdataoverview,anin-depthguidetothedatacontainedintheMapboxStreetsvector

tileset.Thisoutlinesadditionallayerpropertiessuchastypes(type)andclassifications

(class)thatwillallowyoutofilteryourdataandstylecertainelementsdistinctly.

ExploretheMapboxStreetstileset!Youmaynotneedtoaddanycustomdata.Mapbox

Streetsmayhavethedatayouneed,andyoucanfilterthisdatatoaseparatelayerand

styleitaccordingly.

MapboxStreets

MapboxTerrain

mapbox.mapbox-terrain-v2

MapboxTerrainprovideshillshades,elevationcontours,andlandcoverdataallinvector

form.MapboxTerrainisbasedondatafromavarietyofsources(seetheaboutpagefor

details).WhenusingtheMapboxTerrainlayerpubliclyinadesignorapplicationyoumust

provideproperattribution.Whilestyling,keeptheMapboxTerraindataoverviewopento

ensureyouareassigningtheappropriateclassificationstoyourmapstyle.Thesevaluesare

alsoautomaticallyshowntopopulateasfiltersdirectlyinStudio,butthereferenceoffers

moredetailstotheirdefinition.

MapboxTerrain

MapboxTraffic

mapbox.mapbox-traffic-v1

MapboxTrafficprovidesconstantlyupdatingcongestionforbothdirectionsontwo-way

roads.TrafficdataalignswithMapboxStreetsroadslayerandyoucanfilterbasedon

classvalues.The congestionfieldisameasureoftherelativeslowdownaroadsegment

isexperiencing.Thevaluesrangefrom lowto severe.

Whenstylingcongestion,ourcartographer'stypicallyaddapositiveline-offsettothelayer

tovisuallyseparatethedirectionsoftravel.Whilestyling,referencetheMapboxTrafficdata

overviewopentoensureyouareassigningtheappropriateclassvaluestoyourmapstyle.

Keepinmind,thisdatadoesnotappearuntilzoomlevel6.0.

MapboxTraffic

Mapbox-providedmapstyles

Beforeyou'reofftotheraces,let'sgooverthetemplatestylesthatareavailableinMapbox

Studio.Youcanuseanyofthesetemplatesasastartingpointyourmapstyle.Youjustneed

tostartanewstylewithoneoftheMapboxprovidedstylesandbegincustomizingittofit

yourbrand.Butwhichstyleshouldyoupick?Thatdependsonwhatyouaretryingto

achieveandwhatkindofdatayourmapwantstohighlight.

Basic/Bright

MapboxStreets

MapboxOutdoors

MapboxDark/MapboxLight

MapboxSatellite/MapboxSatelliteStreets

MapboxTrafficDay/MapboxTrafficNight

Let'srevieweachmapstyle,soyoucanfindtheonethatbestfitsyourneeds.

Mapboxtemplatestyles

BothBasicandBrightareopensourcemapstylesthatareprimarilyforlearningabout

Mapboxmapstyles.

Basic

MapboxBasicisasimple,flexiblestartingmapstyleifyoujustneedasimplestyle.The

classificationsforroadsandplacelabelshavebeengeneralizedintomajororminor

categoriescoveringthefollowingtypesoffeatures:

Roadways.Lightlyorganizedroaddata,designedtoshowverybasicmajorandminor

roadhierarchy.

Administrativeboundaries.Onlycountryboundariesarestyled.

Builtfeatures.Buildingfootprints,railstations,urbanparks,landuse,andonlyhighly

rankedpointsofinterestarestyledwithonlytext.

Naturalfeatures.Rivers,lakes,streams,oceans,coastalboundaries,parks,land

cover,andbeaches.

Places.Generalhierarchyoflocationlabelsincludingcountries,islands,cities,and

suburbs,towns,hamlets,villages,andneighborhoods.

Basic/Bright

Roadways.Organizedroaddata,designedtoshowthedifferentclassificationsofroad

typesavailablewithMapboxStreets.

Administrativeboundaries.Aglobalpoliticalandadministrativeboundarylayer.

Builtfeatures. Buildingfootprints,railstations,urbanparks,landuse,famous

landmarks,andneighborhoodstores.

Naturalfeatures.Rivers,lakes,streams,oceans,coastalboundaries,parks,land

cover,andbeaches.

Places.Ageneralhierarchyoflocationlabels,fromcountriestocities,towns,and

villagesandneighborhoods.

Iconography.Thisstyleincludesgeneralmotorwayhighwayshieldsandusesatexture

forthewaterlayer.

Basic/Bright

Bright

MapboxBrightisanothergoodtemplatetolearnhowdatalayersarecategorizedand

generallystyled.Thisstyleincludesmoreclassificationsoflabelandroadtypesandputs

datalayersintorelevantcategoriescoveringthefollowingtypesoffeatures:

Basic/Bright

MapboxStreets

MapboxStreetsisourflagshipstyle,itisacomprehensive,general-purposemapthat

emphasizesaccurate,legiblestylingofroadandtransitnetworks.

Vibrantcolors

TheMapboxStreetshigh-contrastcolorsystemallowstheviewertoeasilyrecognizethe

map'sfeaturesandquicklyunderstanditshierarchiesandclassifications.Thecolorsystem

isfine-tunedtoworkperfectlyateachlevelandshiftssubtlyacrosszooms.

Streets

Detailedtransitstyling

MapboxStreetsincludesawidevarietyoftransitlayers–frommotorwaystopathstoferries

– andhasbeendesignedtoprovideanintricaterenderingoftheirroutes,intersections,and

overlaps.Inselectcitiesandcountries,MapboxStreetsalsofeatureslocalpublictransit

iconsandhighwayshieldstohelporienttheuserandconnectthemaptotheirenvironment.

Forincreasedlegibilityandconsistency,theCartographyTeamdesignedeachglobaltransit

overatwodozeniconsandaddedthemtothismaptoaddinplaceandcomprehensionfor

globalusage.

Pointsofinterest(POIs)

MapboxStreetsfeaturesabroadrangeofPOIsstyledtoindicatecategoryandfilteredto

onlyshowthemostimportantPOIsacrossthezoomrange.Theseiconsfromoursetof

opensourceMakiicons.MakiiconsaredesignedsimplyandworkseamlesslywithMapbox

Studio.TheMakiiconeditorallowsyoutocustomizethestyleofyouriconsyoucanaddand

Streets

removetheseicons,categorizeandstylethemingroups,anddownloadthemforyourmap

styles.

Streets

Additionaldesignfeatures

Roadways.Highlyorganizedroaddata,designedtopresentaclearlylegiblehierarchy

ofallroadtypesacrossawidezoomrange.

Administrativeboundaries.Aglobalpoliticalandadministrativeboundarylayer.

Builtfeatures.Buildingfootprints,railstations,urbanparks,landuse,famous

landmarks,andneighborhoodstores.

Naturalfeatures.Rivers,lakes,streams,oceans,coastalboundaries,parks,land

cover,andbeaches.

Places.Acompletehierarchyoflocationlabels,fromcountriesandstatesdownto

villagesandneighborhoods.

Terrain.Vividhillshadingshowelevation,contourlines,andatactiletopography.

Uniqueiconography.Selectcountriesandcitiesfeaturecustomhighwayshieldsand

publictransiticons.

MapboxOutdoors

MapboxOutdoorsisageneral-purposemapwithcuratedtilesetsandspecializedstyling

tailoredtohiking,biking,andthemostadventuroususecases.Tomeettheneedsofthe

bikers,hikers,runners,andskiersthatrelyonMapboxOutdoors,ourcartographersmined

OpenStreetMapforitsextensivetrail,path,andpisteinformation,anddevelopedstylingthat

clearlyarticulateseachtypeformaximumlegibility.

Outdoors

Curatedterraindata

Mapbox Terrain's globalelevationandhillshade datalieattheheartofMapboxOutdoors.

Weprocessedsourcesfrom24datasetsacross13 organizations,includingtheU.S.

GeologicalSurvey,NorwegianMappingAuthority,and CanadianGeoBase,combiningthe

natural features into a robusttilesetwithnecessary pathandtrail data for an outdoors map.

Relevantpointsofinterest

MapboxOutdoorscontainsanarrayofpointsofinterest(POI)datarelevanttoactiveuse

cases:youcanfindcampsites,publicrestrooms,andevenwaterfountainsinthese

specializedlayers.

Additionaldesignfeatures

Roadways.Highlyorganizedroaddata,designedtopresentalegiblehierarchyofall

roadtypesacrossawidezoomrange.

Administrativeboundaries.Aglobalpoliticalandadministrativeboundarylayer.

Pathsandtrails.Hikingpaths,footways,cycleways,andskitrails.

Builtfeatures.Buildingfootprints,railstations,urbanparks,landuse,famous

landmarks,andneighborhoodstores.

Naturalfeatures.Rivers,lakes,streams,oceans,coastalboundaries,parks,land

cover,andbeaches.

Places.Acompletehierarchyoflocationlabels,fromcountriesandstatesdownto

villagesandneighborhoods.

Terrain.Vividhillshadingdeliversvisuallytactiletopographyforoutdoorandactive

lifestyleapps.

Uniqueiconography.Selectcountriesandcitiesfeaturecustomhighwayshieldsand

publictransiticons.

Outdoors

MapboxDarkandMapboxLight

MapboxLightandMapboxDarkaresubtle,full-featuredmapsdesignedtoprovide

geographiccontextwhilehighlightingthedataonyouranalyticsdashboard,data

visualization,ordataoverlay.TheCartographyTeamcreatedtwotightlyconstrainedcolor

palettesthatuseslightshiftsinhueandvaluetoprovidedepthandspacewithout

overwhelmingoverlaidcontent.

Dark/Light

MapboxStreetsdata

MapboxLightandDarkusethesamevectortilesourceasourgeneral-purposemaps,

Mapbox Streets,and containthefullrangeofgeographicinformationrequiredtoprovide

contextforoverlays. LightandDarkarespeciallydesignedtoshowafullsetof

cartographicfeatureswithout distractingfromyourcontent.The Cartography Team

modifiedeveryelementofthesemaps–thinninglinewidths,loweringlabeldensities,

reducingcontrast–tomakesuretheyalways complementyourproject.

Additionaldesignfeatures

Roadways.Highlyorganizedroaddata,designedtopresentaclearlylegiblehierarchy

ofallroadtypesacrossawidezoomrange.

Administrativeboundaries.Aglobalpoliticalandadministrativeboundarylayer.

Builtfeatures.Buildingfootprints,railstations,urbanparks,landuse,famous

landmarks,andneighborhoodstores.

Naturalfeatures.Rivers,lakes,streams,oceans,coastalboundaries,parks,land

cover,andbeaches.

Places.Acompletehierarchyoflocationlabels,fromcountriesandstatesdownto

villagesandneighborhoods.

Dark/Light

Terrain.Subtlehillshadecomplements the simple design withtopographyforcontext.

MapboxSatelliteandMapboxSatelliteStreets

MapboxSatelliteisourglobalhigh-resolutionsatelliteimagery.MapboxSatelliteStreets

combinestheMapboxSatellitebasemapwithvectordatafromMapboxStreetstobring

contextualinformation.MapboxSatelliteStreetsisdesignedtoenhanceourvibrantSatellite

imagerywithalightlayerofMapboxStreetsdata.Ourdesignershavecreatedclearand

legibleroadhierarchieswithacomprehensivesetofroad,place,andfeaturelabelsthat

balancelegibilityandusability.

MapboxSatelliteStreetsusessamevectortilesourceasourgeneral-purposemapsand

containsthefullrangeofgeographicinformationrequiredtoprovidecontextforoverlays.

Satellite/SatelliteStreets

Imagery

MapboxSatelliteimagerycomesfromavarietyofcommercialproviders,aswellasopen

datafromNASA,USGS,andothers.Itisscolor-corrected,cloud-freerastertileset.Ascities

andlandscapeschange,weaddnewer,clearer,andmoreattractiveimagery.

Ifyounoticeanareawhereimageryneedsimprovementorupdatesforanyreason,letus

knowbyleavingyourfeedbackwithourimageryrequesttool.Thistooladdsyourrequests

toamasterlistthatweconsultwhenprioritizingupdates.Ifyouwishtorecommendan

imagerysource,pleasementionitinyourrequest.Pleasenotethatimageryisnotimproved

onasetscheduleandisupdatedwhenandwhereitbecomesavailable.

Satellite/SatelliteStreets

Globalcoverage

Cloudlessforzoomlevels 0–8andavailablefrom z0-19MapboxSatelliteimagerycomes

fromavarietyofsourcesdependingonzoomlevelandgeographicavailability.

Zoomlevels0-6.Usescloud-freedatafromNASAMODISsatellites.

Zoomlevels7-12.UsestheNASA/USGSLandsat5&7imagery.

Zoomlevels13+.Useacombinationofopenandproprietarysources,including

DigitalGlobeformuchoftheworld,USDA’sNAIP2011–2013inthecontiguousUnited

States, andopenaerialimageryfromDenmark,Finland,andpartsofGermany.

Additionaldesignfeatures

Roadways. Highlyorganizedroaddata,designedtopresentaclearlylegiblehierarchy

ofallroadtypesacrossawidezoomrange.

Administrativeboundaries. Aglobalpoliticalandadministrativeboundarylayer.

Builtfeatures. Buildingfootprints,railstations,urbanparks,landuse,famous

landmarks,andneighborhoodstores.

Naturalfeatures.Rivers,lakes,streams,oceans,coastalboundaries,parks,land

cover,andbeaches.

Places. Acompletehierarchyoflocationlabels,fromcountriesandstatesdownto

villagesandneighborhoods.

Uniqueiconography. Selectcountriesandcitiesfeaturecustomhighwayshieldsand

publictransiticons.

Satellite/SatelliteStreets

AmyLeeWaltonisamultidisciplinarydesignerthatwalksthefinelinebetweendesignand

code.AtMapbox,shebringsvisualnarrativeandsystems-baseddesignthinking intoher

cartographywork.Shetouchesmanyfacetsofcartography and user experience design

includingdesigningbeautifulthematicmaps,designingand maintaining general purpose

MapboxGLmaps,querying open source datasets, conducting online and in-person user

testing,and delivering valuable insight to product roadmaps for user-centered improvements.

AmyLeeholdsanMFAin graphicdesignfromtheMarylandInstituteCollegeofArt(MICA,

whereshecoalesced graphicdesignwithphysicalcomputing,generativeandcreativecode,

anddigital fabrication.Shehas designed, engineered, and shown herinteractiveinstallations

abroadwithinmultipleshowsinThe Netherlandsanddoneproject-baseddocumentation

workinIsrael.

An activespeaker,AmyLee builds curriculum for andleadstalksandworkshops discussing

the design process,purposeful programming,cartographyandvisual narratives.She's

passionateabout engaginginactsofsocialgood,cultivatingyourpersonalnetwork,and

championingdiversity andinclusionatyourplaceofemployment.Check out her Revision

Pathinterviewto hearherthoughtsondesign thinking,treatingcodelikeapaintbrush,and

changingthe waypeoplenavigatetheplanet.ReadherCommunicationArtsinterview,

Designeras Navigator,tofindouthowshegotstartedwithcartography.

AbouttheAuthor

Cartography Guide To Map Design Part 1

guide-to-map-design-part-1

guide-to-map-design-part-1

guide-to-map-design-part-1

Navigation menu

Versions of this User Manual:

Views

Navigation