Presentation about designing maps for the web given at Drupal Design Camp Prague - November 2010.

1. Don’t let maps cramp your style
Drupal Design Camp
Prague
November 6-7, 2010
Andrew Larcombe
email: andrew@andrewl.net
twitter: andrewl
http://www.andrewl.net
d.o: alarcombe

2. Warning I am not a designer

3. Why am I here?

4. Why am I here?
• Cartography IS design

5. Why am I here?
• Cartography IS design
• Expression of complex information
in a graphical form

6. Why am I here?
• Cartography IS design
• Expression of complex information
in a graphical form
• Ties into branding

7. Why am I here?
• Cartography IS design
• Expression of complex information
in a graphical form
• Ties into branding
• Please, please, please do more
than just use Google maps!

8. Quiz...

16. Crimes against cartography

17. Don’t use the default
Crimes against cartography
Google Maps marker

18. Use well designed and
Crimes against cartography
functional markers

19. The ‘dots on maps’
Crimes against cartography
syndrome

20. Cluster your icons... Crimes against cartography

21. Cluster your icons... Crimes against cartography

22. Consider density maps
Crimes against cartography
(aka heatmaps)

23. Google Maps - does it
Crimes against cartography
match your branding?

27. What price good cartography?

28. What price good cartography?
• Created branding guidelines ($$$)

29. What price good cartography?
• Created branding guidelines ($$$)
• Built new e-business platform ($$
$)

30. What price good cartography?
• Created branding guidelines ($$$)
• Built new e-business platform ($$
$)
• Used a generic Google map
($0.00)

31. What price good cartography?
• Created branding guidelines ($$$)
• Built new e-business platform ($$
$)
• Used a generic Google map
($0.00)
• Why?

32. What price good cartography?

33. What price good cartography?
• Why?

34. What price good cartography?
• Why?
• Too easy?

35. What price good cartography?
• Why?
• Too easy?
• No perceived value?

36. What price good cartography?
• Why?
• Too easy?
• No perceived value?
• Knowledge/skills/information gap?

37. Better maps with OpenLayers and its friends...

38. OpenLayers...for teh
Better maps with OpenLayers
mapping awesome and its friends

39. OpenLayers (Javascript)
• Mature javascript framework for putting dynamic maps on the web
• Tiles, markers, events.
var map = new OpenLayers.Map('map', {'maxResolution': 1.40625/2});
var dm_wms = new OpenLayers.Layer.WMS( "Canada",
"http://www2.dmsolutions.ca/cgi-bin/mswms_gmap",
{layers: "bathymetry,land_fn,park,drain_fn,drainage," +
"prov_bound,fedlimit,rail,road,popplace",
transparent: "true", format: "image/png" });
dm_wms.setVisibility(false);
map.addLayers([ol_wms, jpl_wms, dm_wms]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
OpenLayers Better maps with OpenLayers
and its friends

40. OpenLayers (Drupal module)
• http://drupal.org/project/openlayers
• 2.0-alpha10
OpenLayers Better maps with OpenLayers
and its friends

41. OpenLayers (Drupal module)
• http://drupal.org/project/openlayers
• 2.0-alpha10
• Integration with Views
• Provides CCK widget for input
• Lots of friends: OpenLayers Geocoder, GeoTaxonomy, WFS, MapBox, blah, blah,
blah.
• Exportable!
OpenLayers Better maps with OpenLayers
and its friends

42. • Make your own with Mapnik, Mapserver, WMS, TileCache, TMS
• Cloudmade (OpenStreetMap)
• MapBox
• Google/Yahoo!/Bing Maps
Map Tiles Better maps with OpenLayers
and its friends

43. Stock tiles (Google, Bing
Better maps with OpenLayers
Yahoo! etc) and its friends

44. Other tiles...MapBox Better maps with OpenLayers
and its friends

45. Other tiles...Cloudmade Better maps with OpenLayers
and its friends

46. Other tiles...Cloudmade Better maps with OpenLayers
and its friends

47. Other tiles...custom Better maps with OpenLayers
and its friends

48. Other tiles...custom Better maps with OpenLayers
and its friends

49. Other tiles...custom Better maps with OpenLayers
and its friends

50. Other tiles...custom Better maps with OpenLayers
and its friends

51. Styling markers Better maps with OpenLayers
and its friends

52. Sometime soon...

53. Sometime soon...
• TileMill from DevSeed

54. Sometime soon...
• TileMill from DevSeed
• Google Maps API v3 - styled maps

55. Sometime soon...
• TileMill from DevSeed
• Google Maps API v3 - styled maps
• Polymaps from Stamen Design

56. http://london2011.drupal.org/

57. Thank you.
Andrew Larcombe
email: andrew@andrewl.net
twitter: andrewl
http://andrewl.net
d.o: alarcombe