Upgrade to Pro — share decks privately, control downloads, hide ads and more …

I Want A Nice Map !

A746319cbfd0236a4d0548e7d1fc1983?s=47 Makina Corpus
October 11, 2012

I Want A Nice Map !

GoogleMaps is a very easy way to add a map into your Plone site, but it is so boring to see the very same GMap style everywhere. If you want to create light and sexy maps, and you are not a GIS ...


Makina Corpus

October 11, 2012


  1. I want a nice map ! Plone Conference 2012 Eric

    Brehault @ebrehault www.makina-corpus.com
  2. A map is a piece of information Le Monde Diplomatique

    Sept. 2012 – Philippe Rekacewicz What is a map?
  3. User interactions can be useful What is a map?

  4. But visitors are not the ones who need to build

    a map, they just need to read it. What is a map? 100% Flash !
  5. • Keep it simple, • Make it nice and efficient

    by itself, • Do not expect a bunch of gadgets will make it clearer or better. How to create a map ?
  6. As a Plone developer, what were your options so far?

    • OpenLayers (with collective.geo.*) • Google Maps API (with Products.Maps) How to create a map ?
  7. • Built by GIS experts for GIS experts, • Extremely

    rich feature set, • Usually about 1 MB of JavaScript, • Does not play nice with mobile devices, • Supports all the OGC standards and protocols (WMS, WFS... known as W*S). OpenLayers
  8. The W*S approach Hello, what kind of GIS services do

    you provide? Good, I would like this map, which projections do you offer? I can produce this list of maps Oh quite a lot, what about this very specific projection which is ideal for the North-West of Kazakhstan?
  9. The W*S approach Sounds terrific, could you send me the

    square (x0, y0, x1, y1)? Hey, did you watch the game yesterday? Sure, as GIF or PNG? No, he had to stop for a few months, because he broke his leg. Yes, it was nice. Do your son still play football?
  10. The W*S approach What about a barbecue next week? Hmm...

    and regarding the image we talked about? Fantastic, let's do that ! Ooops, sorry, here is it.
  11. Why? “To improve interoperability” OK, but this is not how

    the Web works. The W*S approach
  12. The standard Web approach <img src=”http://tiles.myserver.com/{zoom}/{x}/{y}.png” />

  13. Conclusion: Let's occupy W*S !! The W*S approach

  14. Google Maps: • looks good, • is fast, • triggered

    a fantastic revolution in the Web mapping domain. But Google Maps... Google Maps
  15. … is so boring. Everybody has the very same map

    ! OK, not always the same: there are 3 different default styles Google Maps
  16. Many usage restrictions: • Offline mode, • Mass geocoding, •

    Non-public usage (intra/extranet), • Commercial usage, • etc. Google Maps
  17. New JavaScript libraries: Smaller – Faster – Easier New ways

    to produce maps: No GIS server – Tiles – CSS New hopes
  18. 40 Ko – Fast – Mobile compliant – Old browser

    support No interaction but excellent for mini maps. Very very easy to use (with htmapl.js): <div class="map" data-center="51.982924,5.913906" data-zoom="13" /> ModestMaps
  19. ModestMaps

  20. 32 Ko – Fast – GeoJSON / SVG collective.geo.polymaps by

    Christian Ledermann • Straightforward to customize • Style with CSS Polymaps
  21. Polymaps

  22. 60 Ko – Pure SVG - CSS A complete chain:

    • Kartograph.py converts GIS resources into SVG (possibly 3D) • Kartograph.js displays it Kartograph
  23. Kartograph

  24. 90 Ko – Fast - Mobile compliant – Old browser

    support – Complete collective.js.leaflet • Simple API • GeoJSON • Very active project, with lot of plugins (editor toolbar, Google layers, projections...) Leaflet
  25. Leaflet

  26. Leaflet

  27. Leaflet

  28. Leaflet

  29. Leaflet

  30. Leaflet

  31. Leaflet

  32. You need a base layer, what can it be? •

    GoogleMaps such a cliché OpenStreetMap does not look very good, does it? What about the data?
  33. Actually, OpenStreetMap is not a map. It is a database.

    And you can use this database to produce you own maps. OSM is not a map
  34. • TileMill: a CSS-oriented design studio • MBUtil and Landez:

    utilities to produce tiles DEMO Produce your own tiles
  35. TileMill

  36. TileMill

  37. TileMill

  38. Unified colors theme

  39. And if you are gifted Island by Konstantin Käfer -

  40. And if you are gifted Pirate map by AJ Ashton

    - MapBox
  41. And if you are gifted Watercolor by Stamen Design

  42. www.makina-corpus.com