32
Designing for the Web Warren Vick Europa Technologies Ltd.
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 [email protected]
