Don't Let Maps Cramp Your Style

Presented at Drupal Design Camp, Prague, 2010

Transcript

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 Google Maps marker Crimes against cartography
18. Use well designed and functional markers Crimes against cartography
19. The ‘dots on maps’ syndrome Crimes against cartography
20. Cluster your icons... Crimes against cartography
21. Cluster your icons... Crimes against cartography
22. Consider density maps (aka heatmaps) Crimes against cartography
23. Google Maps - does it match your branding? Crimes against cartography
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 mapping awesome Better maps with OpenLayers and its friends
39. OpenLayers Better maps with OpenLayers and its friends 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();
40. OpenLayers Better maps with OpenLayers and its friends OpenLayers (Drupal module) • http://drupal.org/project/openlayers • 2.0-alpha10
41. OpenLayers Better maps with OpenLayers and its friends 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!
42. Map Tiles Better maps with OpenLayers and its friends • Make your own with Mapnik, Mapserver, WMS, TileCache, TMS • Cloudmade (OpenStreetMap) • MapBox • Google/Yahoo!/Bing Maps
43. Stock tiles (Google, Bing Yahoo! etc) Better maps with OpenLayers 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