Designing for the Web

Warren VickEuropa Technologies Ltd.

A practical session

• A hybrid of previous tips presentations• 10 practical tips, inc. web resources• Goal is to help you improve your online maps• Based on experience• A lot to cover in limited time...

Why map on the web?

• Simple broad deployment (Internet / Intranet)• Centrally managed (updates, etc.)• Intuitive user interface (thanks Google et al)• Reduce GIS software licence costs• Core services for multiple applications• Several areas for cost savings• Trend to data services

Tip 1 – Think aboutIntellectual & Visual Hierarchy

• The intent of a map should principally drive its design• IH is the relative importance of elements of a map.

Once established, VH reflects the IH• Remove waste (jpn: “muda”)• Element depth... figure & ground• Online base maps...

Base maps & overlay examples

esri.com City & County of SF

Base maps & overlay examples

Base maps & overlay examples

Improved with a “layer sandwich”

Tip 2 – Colour Vision Deficiency

• CVD affects 1 in 12 males, making it a disability to take very seriously

• Most affected by CVD have aTrichromacy Anomaly

• Is it necessary to designseparate maps for peoplewith CVD? No!

• Use other visual variables,simulators and test with colleagues

Ishihara test

Normal Vision

Protanomaly / Protanopia

!

Rare

Deuteranomaly / Deuteranopia

!

Most common

Tritanomaly / Tritanopia

!

Very rare

Resourceshttp://colororacle.org

ResourcesDo you see what I see?A0/A3 PDF infographic

https://www.europa.uk.com/do-you-see-what-i-see/

Tip 3 – Compound Layer Styles

• Often, a sophisticated cartographic effect can be achieved by drawing a mapping layer more than once, using different styles

• Some GIS software has native support...• ... others need manual implementation• Two examples using the same base map...

Small scale map of Dubai, UAE

Example 1: Cased Roads

Example 2: Coastline Halo

Tip 4 – Make Relief Layers

• Existed since the earliest maps• Showing a 3rd dimension is a challenge on 2D map• Can add a more natural element to a map• Examples: Spots heights, contours, hachures and

hypsometric tinting• Focus: hill shading…

Hill ShadingSimulates shadows cast across a relief map

Eduard Imhof (1895-1986)Swiss Federal Institute ofTechnology Zurich

Hill ShadingSimulates shadows cast across a relief map

Eduard Imhof (1895-1986)Swiss Federal Institute ofTechnology Zurich

Canton Argau, 1945Drawn with pencil, ink & white paint!

With Digital Elevation Models (DEMs)things are a lot easier!

Try creating your own with GDAL

Tip 5 – Discard Cartographic Text

• While vector products have anominal scale, they can be usedacross a range of scales

• Smart feature filtering• Cartographic text is quite narrow

in usable scale range• Consider discarding and

generating labels dynamically,especially for the web

Contains Ordnance Survey data © Crown copyright and database right 2013

Tip 6 – Road Labelling

• Street data layers are often delivered segmented for routing purposes...but this can cause issues for labelling

• Solution is to create aderived layer, with roadsegments grouped byname, just for labellingpurposes...

mike.teczno.com

Result: nice long street segmentswith labels repeat as necessary

viaeuropa.uk.com

Tip 7 – Point Labelling

• Established best practice for the placement of text on periphery of point objects. e.g. Place names. However, other factors may prevail

• Your application or industrymay also dictate otherwise

• 2 & 3 are sometimesswapped

Tip 8 – Line Joins & Caps

• Caps are how lines are finished at their startand end-nodes

• Joins are how lines are rendered through a mid-nodes• Important when drawing thick lines – now common for

road centre lines

Butt

Round

Square

Example of line caps problem

OS Street View. Contains Ordnance Survey data © Crown copyright and database right 2013

Tip 8 – Line Joins & Caps

• No easy solution. Sometime lines caps need to be different at each end

• Square caps swap the “cracks” problem for a “protrusion” problem, and may bleed into other features

• Round joins seem most pleasing for road lines

Butt

Round

Square

Tip 9 – Fun with Fonts

• Fonts can dictate the formality of a map• Select with care, especially for web maps• Lots of great resources and tools...• Many are free!

https://www.google.com/get/noto/- Google Noto (“no tofu”) fontswww.fontsquirrel.com- Great selection of free fontswww.typebrewer.com- Font selection toolWhat the Font (Web/iOS/Android)- Useful font identifier

Tip 10 – Study & Be Inspired

• Study the techniques used by others. Credit!• Use the web and invest in a book occasionally

View series online for free at:www.esri.com/mapmuseumAvailable from BCS website

Thank youIf you create cartography with GIS software,

please consider joining the GIS SIG.

Warren Vickwvick@europa.uk.com