I want a nice map


Published on

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 expert, then discover new tools like TileMill, Leaflet, ModestMap, Polymaps, or Kartograph.
By Eric Brehault @ebrehault - PloneConf2012

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Il manque : - une liste de produits/services fin 2007 - une price list pour fin 2007 - le taux de pénétration prévisionnel espéré par cibles pour fin 2008, - la rentabilité attendue d'ici fin fin 2008 - la définition, l'organisaiton et l'animation de la force de vente -
  • I want a nice map

    1. I want a nice map ! Plone Conference 2012 Eric Brehault @ebrehault www.makina-corpus.com
    2. What is a map?A map is a piece of informationLe Monde Diplomatique Sept. 2012 – Philippe Rekacewicz
    3. What is a map?User interactions can be useful
    4. What is a map?But visitors are not the ones who need to build a map,they just need to read it. 100% Flash !
    5. How to create a map ?● Keep it simple,● Make it nice and efficient by itself,● Do not expect a bunch of gadgets will make it clearer or better.
    6. How to create a map ?As a Plone developer, what were your options so far?● OpenLayers (with collective.geo.*)● Google Maps API (with Products.Maps)
    7. OpenLayers● 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).
    8. The W*S approach Hello, what kind of GIS services do you provide? I can produce this list of mapsGood, I would like this map, which projections do you offer? Oh quite a lot, what about this very specific projection which is ideal for the North-West of Kazakhstan?
    9. The W*S approachSounds terrific, could you send me the square (x0, y0, x1, y1)? Sure, as GIF or PNG? Hey, did you watch the game yesterday? Yes, it was nice. Do your son still play football?No, he had to stop for a few months, because he broke his leg.
    10. The W*S approach What about a barbecue next week? Fantastic, lets do that !Hmm... and regarding the image we talked about? Ooops, sorry, here is it.
    11. The W*S approachWhy?“To improve interoperability”OK, but this is not how the Web works.
    12. The standard Web approach<img src=”http://tiles.myserver.com/{zoom}/{x}/{y}.png” />
    13. The W*S approachConclusion:Lets occupy W*S !!
    14. Google MapsGoogle Maps:● looks good,● is fast,● triggered a fantastic revolution in the Web mapping domain.But Google Maps...
    15. Google Maps … is so boring.Everybody has the very same map !OK, not always the same: there are 3 different default styles
    16. Google MapsMany usage restrictions:● Offline mode,● Mass geocoding,● Non-public usage (intra/extranet),● Commercial usage,● etc.
    17. New hopesNew JavaScript libraries:Smaller – Faster – EasierNew ways to produce maps:No GIS server – Tiles – CSS
    18. ModestMaps40 Ko – Fast – Mobile compliant – Old browser supportNo 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" />
    19. ModestMaps
    20. Polymaps32 Ko – Fast – GeoJSON / SVGcollective.geo.polymaps by Christian Ledermann● Straightforward to customize● Style with CSS
    21. Polymaps
    22. Kartograph60 Ko – Pure SVG - CSSA complete chain:● Kartograph.py converts GIS resources into SVG (possibly 3D)● Kartograph.js displays it
    23. Kartograph
    24. Leaflet90 Ko – Fast - Mobile compliant – Old browser support – Completecollective.js.leaflet● Simple API● GeoJSON● Very active project, with lot of plugins (editor toolbar, Google layers, projections...)
    25. Leaflet
    26. Leaflet
    27. Leaflet
    28. Leaflet
    29. Leaflet
    30. Leaflet
    31. Leaflet
    32. What about the data?You need a base layer, what can it be?● GoogleMaps such a clichéOpenStreetMap does not look very good, does it?
    33. OSM is not a mapActually, OpenStreetMap is not a map.It is a database.And you can use this database to produce you own maps.
    34. Produce your own tiles● TileMill: a CSS-oriented design studio● MBUtil and Landez: utilities to produce tilesDEMO
    35. TileMill
    36. TileMill
    37. TileMill
    38. Unified colors theme
    39. And if you are gifted Island by Konstantin Käfer - MapBox
    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