Edward Mac Gillavry

WEB CARTOGRAPHYWEB CARTOGRAPHYUsing Open Source SoftwareUsing Open Source Software

Richard Duivenvoorde – biologist Edward Mac Gillavry – cartographer Haarlem/Utrecht (2009) Geo-applications for the (mobile) Web OpenGeoGroep

WEBMAPPER: what the map can beWEBMAPPER: what the map can be

ONLINE MAPPINGONLINE MAPPING

CLASSIC VALUE CHAINCLASSIC VALUE CHAIN

* Musser, J. (2007)Web 2.0 Principles and Best Practices

Application

Service

Platform

Data

WEB MAP = ART IMITATES LIVEWEB MAP = ART IMITATES LIVE

http://www.flickr.com/photos/zachklein/3609217246

WEB MAPS = RED DOT FEVERWEB MAPS = RED DOT FEVER

WEB CARTOGRAPHY USING WEB CARTOGRAPHY USING OPEN SOURCE SOFTWAREOPEN SOURCE SOFTWARE

MAPPING AND THE TERMINALMAPPING AND THE TERMINAL

http://www.flickr.com/photos/andrew_sherman/156734298/

OUR OPEN SOURCE TOOLBOXOUR OPEN SOURCE TOOLBOX

INKSCAPEINKSCAPEIcons, patterns, interfaceIcons, patterns, interface

QuantumGISQuantumGISExplore, style, editExplore, style, edit

PgAdminPgAdminExplore, edit, pre-processExplore, edit, pre-process

GeoServerGeoServerStylingStyling

MAP FILES, SLDs, MapnikXMLMAP FILES, SLDs, MapnikXML

DESIGNERS V. TERMINALSDESIGNERS V. TERMINALS

Desktop GIS QuantumGIS: Map file (plugin) and SLD (native) OpenJUMP: SLDs (Geotools) ESRI ArcGIS: GeoCat Bridge plugin

CSS-like GeoServer CSS plugin Cascadenik Carto

TILEMILL: A CARTO EDITORTILEMILL: A CARTO EDITOR

CLASSIC VALUE CHAINCLASSIC VALUE CHAIN

* Musser, J. (2007)Web 2.0 Principles and Best Practices

Application

Service

Platform

Data

NEW VALUE CHAINNEW VALUE CHAIN

Application

Service

Platform

Data

YOU!

DIR. GEN. PUBLIC WORKSDIR. GEN. PUBLIC WORKS

PUBLIC SERVICE ON THE MAPPUBLIC SERVICE ON THE MAP

NETHERLANDS FROM ABOVENETHERLANDS FROM ABOVE

Cartography is

the science,the technology and

the artof making maps

ESTHETIC EFFECTESTHETIC EFFECT

Beautiful designsare perceived as more user-friendly

and better

MARINETRAFFICMARINETRAFFIC

NETHERLANDS FROM ABOVENETHERLANDS FROM ABOVE

COLOUR USECOLOUR USE

WEB COLOURSWEB COLOURSHTML4 and CSS 2.1: 16 + 1HTML4 and CSS 2.1: 16 + 1

+130 colours in SVG 1.0 = 147 in CSS 3

WEB COLOURSWEB COLOURS216 “web safe” colours216 “web safe” colours

SATURATIONSATURATIONHue, Saturation, Lightness (HSL)Hue, Saturation, Lightness (HSL)

SATURATION: WHITESATURATION: WHITE

SATURATION: BLACKSATURATION: BLACK

SATURATION: BLACKSATURATION: BLACK

COLOUR COMBINATIONSCOLOUR COMBINATIONS

kuler.adobe.com

www.colourlovers.com

COLOUR COMBINATIONSCOLOUR COMBINATIONS

tristen.ca/hcl-picker/

COLOUR COMBINATIONSCOLOUR COMBINATIONS

www.colorbrewer2.org

COLOUR BLINDNESSCOLOUR BLINDNESS

COLOUR BLINDNESSCOLOUR BLINDNESS

COLOUR BLINDNESSCOLOUR BLINDNESS

TYPOGRAPHYTYPOGRAPHY

TYPEFACE SELECTIONTYPEFACE SELECTION

Sans-serif or serif ? Different weights:

Medium, Semi-bold Bold

Condensed

COMBINING TYPEFACESCOMBINING TYPEFACES

www.typebrewer.org

FONT SIZEFONT SIZE

6pt Amsterdam

8pt Amsterdam

9pt Amsterdam

10pt Amsterdam

11pt Amsterdam12pt Amsterdam13pt Amsterdam14pt Amsterdam

7pt Amsterdam

FIGURE-GROUNDFIGURE-GROUND

WIDGETS v. MAPWIDGETS v. MAP

THEME v. ORIENTATIONTHEME v. ORIENTATION

STAMENSTAMEN

VIZZUALITYVIZZUALITY

DEVELOPMENT SEEDDEVELOPMENT SEED

Edward Mac Gillavryedward@webmapper.net

www.webmapper.net

THANK YOUTHANK YOU