Don’t let maps cramp your styleDrupal Design CampPragueNovember 6-7, 2010Andrew Larcombeemail: andrew@andrewl.nettwitter: ...
Warning   I am not a designer
Why am I here?
Why am I here?• Cartography IS design
Why am I here?• Cartography IS design• Expression of complex information  in a graphical form
Why am I here?• Cartography IS design• Expression of complex information  in a graphical form• Ties into branding
Why am I here?• Cartography IS design• Expression of complex information  in a graphical form• Ties into branding• Please,...
Quiz...
Crimes against cartography
Don’t use the default                        Crimes against cartographyGoogle Maps marker
Use well designed and                         Crimes against cartography    functional markers
The ‘dots on maps’                     Crimes against cartography         syndrome
Cluster your icons...   Crimes against cartography
Cluster your icons...   Crimes against cartography
Consider density maps                        Crimes against cartography       (aka heatmaps)
Google Maps - does it                        Crimes against cartographymatch your branding?
What price good cartography?
What price good cartography?• Created branding guidelines ($$$)
What price good cartography?• Created branding guidelines ($$$)• Built new e-business platform ($$  $)
What price good cartography?• Created branding guidelines ($$$)• Built new e-business platform ($$  $)• Used a generic Goo...
What price good cartography?• Created branding guidelines ($$$)• Built new e-business platform ($$  $)• Used a generic Goo...
What price good cartography?
What price good cartography?• Why?
What price good cartography?• Why?• Too easy?
What price good cartography?• Why?• Too easy?• No perceived value?
What price good cartography?• Why?• Too easy?• No perceived value?• Knowledge/skills/information gap?
Better maps with OpenLayers and its friends...
OpenLayers...for teh                       Better maps with OpenLayers mapping awesome       and its friends
OpenLayers (Javascript)  • Mature javascript framework for putting dynamic maps on the web  • Tiles, markers, events.var m...
OpenLayers (Drupal module)• http://drupal.org/project/openlayers• 2.0-alpha10                          OpenLayers     Bett...
OpenLayers (Drupal module)• http://drupal.org/project/openlayers• 2.0-alpha10• Integration with Views• Provides CCK widget...
•   Make your own with Mapnik, Mapserver, WMS, TileCache, TMS•                  Cloudmade (OpenStreetMap)•                ...
Stock tiles (Google, Bing                            Better maps with OpenLayers              Yahoo! etc)   and its friends
Other tiles...MapBox   Better maps with OpenLayers                       and its friends
Other tiles...Cloudmade   Better maps with OpenLayers                          and its friends
Other tiles...Cloudmade   Better maps with OpenLayers                          and its friends
Other tiles...custom   Better maps with OpenLayers                       and its friends
Other tiles...custom   Better maps with OpenLayers                       and its friends
Other tiles...custom   Better maps with OpenLayers                       and its friends
Other tiles...custom   Better maps with OpenLayers                       and its friends
Styling markers   Better maps with OpenLayers                  and its friends
Sometime soon...
Sometime soon...• TileMill from DevSeed
Sometime soon...• TileMill from DevSeed• Google Maps API v3 - styled maps
Sometime soon...• TileMill from DevSeed• Google Maps API v3 - styled maps• Polymaps from Stamen Design
http://london2011.drupal.org/
Thank you.Andrew Larcombeemail: andrew@andrewl.nettwitter: andrewlhttp://andrewl.netd.o: alarcombe
Don't let maps cramp your style - Prague
Don't let maps cramp your style - Prague
Don't let maps cramp your style - Prague
Don't let maps cramp your style - Prague
Don't let maps cramp your style - Prague
Don't let maps cramp your style - Prague
Don't let maps cramp your style - Prague
Don't let maps cramp your style - Prague
Don't let maps cramp your style - Prague
Don't let maps cramp your style - Prague
Upcoming SlideShare
Loading in …5
×

Don't let maps cramp your style - Prague

2,442 views

Published on

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

Published in: Technology, Business
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,442
On SlideShare
0
From Embeds
0
Number of Embeds
181
Actions
Shares
0
Downloads
13
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Don't let maps cramp your style - Prague

    1. 1. Don’t let maps cramp your styleDrupal Design CampPragueNovember 6-7, 2010Andrew Larcombeemail: andrew@andrewl.nettwitter: andrewlhttp://www.andrewl.netd.o: alarcombe
    2. 2. Warning I am not a designer
    3. 3. Why am I here?
    4. 4. Why am I here?• Cartography IS design
    5. 5. Why am I here?• Cartography IS design• Expression of complex information in a graphical form
    6. 6. Why am I here?• Cartography IS design• Expression of complex information in a graphical form• Ties into branding
    7. 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. 8. Quiz...
    9. 9. Crimes against cartography
    10. 10. Don’t use the default Crimes against cartographyGoogle Maps marker
    11. 11. Use well designed and Crimes against cartography functional markers
    12. 12. The ‘dots on maps’ Crimes against cartography syndrome
    13. 13. Cluster your icons... Crimes against cartography
    14. 14. Cluster your icons... Crimes against cartography
    15. 15. Consider density maps Crimes against cartography (aka heatmaps)
    16. 16. Google Maps - does it Crimes against cartographymatch your branding?
    17. 17. What price good cartography?
    18. 18. What price good cartography?• Created branding guidelines ($$$)
    19. 19. What price good cartography?• Created branding guidelines ($$$)• Built new e-business platform ($$ $)
    20. 20. What price good cartography?• Created branding guidelines ($$$)• Built new e-business platform ($$ $)• Used a generic Google map ($0.00)
    21. 21. What price good cartography?• Created branding guidelines ($$$)• Built new e-business platform ($$ $)• Used a generic Google map ($0.00)• Why?
    22. 22. What price good cartography?
    23. 23. What price good cartography?• Why?
    24. 24. What price good cartography?• Why?• Too easy?
    25. 25. What price good cartography?• Why?• Too easy?• No perceived value?
    26. 26. What price good cartography?• Why?• Too easy?• No perceived value?• Knowledge/skills/information gap?
    27. 27. Better maps with OpenLayers and its friends...
    28. 28. OpenLayers...for teh Better maps with OpenLayers mapping awesome and its friends
    29. 29. 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
    30. 30. OpenLayers (Drupal module)• http://drupal.org/project/openlayers• 2.0-alpha10 OpenLayers Better maps with OpenLayers and its friends
    31. 31. 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
    32. 32. • 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
    33. 33. Stock tiles (Google, Bing Better maps with OpenLayers Yahoo! etc) and its friends
    34. 34. Other tiles...MapBox Better maps with OpenLayers and its friends
    35. 35. Other tiles...Cloudmade Better maps with OpenLayers and its friends
    36. 36. Other tiles...Cloudmade Better maps with OpenLayers and its friends
    37. 37. Other tiles...custom Better maps with OpenLayers and its friends
    38. 38. Other tiles...custom Better maps with OpenLayers and its friends
    39. 39. Other tiles...custom Better maps with OpenLayers and its friends
    40. 40. Other tiles...custom Better maps with OpenLayers and its friends
    41. 41. Styling markers Better maps with OpenLayers and its friends
    42. 42. Sometime soon...
    43. 43. Sometime soon...• TileMill from DevSeed
    44. 44. Sometime soon...• TileMill from DevSeed• Google Maps API v3 - styled maps
    45. 45. Sometime soon...• TileMill from DevSeed• Google Maps API v3 - styled maps• Polymaps from Stamen Design
    46. 46. http://london2011.drupal.org/
    47. 47. Thank you.Andrew Larcombeemail: andrew@andrewl.nettwitter: andrewlhttp://andrewl.netd.o: alarcombe

    ×