designing for the web - cartography.org.uk · eduard imhof (1895-1986) swiss federal institute of....
TRANSCRIPT
![Page 1: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/1.jpg)
Designing for the Web
Warren VickEuropa Technologies Ltd.
![Page 2: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/2.jpg)
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...
![Page 3: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/3.jpg)
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
![Page 4: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/4.jpg)
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...
![Page 5: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/5.jpg)
Base maps & overlay examples
esri.com City & County of SF
![Page 6: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/6.jpg)
Base maps & overlay examples
![Page 7: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/7.jpg)
Base maps & overlay examples
Improved with a “layer sandwich”
![Page 8: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/8.jpg)
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
![Page 9: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/9.jpg)
Normal Vision
![Page 10: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/10.jpg)
Protanomaly / Protanopia
!
Rare
![Page 11: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/11.jpg)
Deuteranomaly / Deuteranopia
!
Most common
![Page 12: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/12.jpg)
Tritanomaly / Tritanopia
!
Very rare
![Page 13: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/13.jpg)
Resourceshttp://colororacle.org
![Page 14: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/14.jpg)
ResourcesDo you see what I see?A0/A3 PDF infographic
https://www.europa.uk.com/do-you-see-what-i-see/
![Page 15: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/15.jpg)
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...
![Page 16: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/16.jpg)
Small scale map of Dubai, UAE
![Page 17: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/17.jpg)
Example 1: Cased Roads
![Page 18: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/18.jpg)
Example 2: Coastline Halo
![Page 19: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/19.jpg)
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…
![Page 20: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/20.jpg)
Hill ShadingSimulates shadows cast across a relief map
Eduard Imhof (1895-1986)Swiss Federal Institute ofTechnology Zurich
![Page 21: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/21.jpg)
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
![Page 22: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/22.jpg)
![Page 23: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/23.jpg)
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
![Page 24: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/24.jpg)
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
![Page 25: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/25.jpg)
Result: nice long street segmentswith labels repeat as necessary
viaeuropa.uk.com
![Page 26: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/26.jpg)
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
![Page 27: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/27.jpg)
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
![Page 28: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/28.jpg)
Example of line caps problem
OS Street View. Contains Ordnance Survey data © Crown copyright and database right 2013
![Page 29: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/29.jpg)
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
![Page 30: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/30.jpg)
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
![Page 31: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/31.jpg)
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
![Page 32: Designing for the Web - cartography.org.uk · Eduard Imhof (1895-1986) Swiss Federal Institute of. Technology Zurich. Canton Argau, 1945. Drawn with pencil, ink & white paint! With](https://reader033.vdocuments.site/reader033/viewer/2022050201/5f55563a6a665347fc53d9b9/html5/thumbnails/32.jpg)
Thank youIf you create cartography with GIS software,
please consider joining the GIS SIG.
Warren [email protected]