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

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 information
Le 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 maps
Good, 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 approach
Sounds 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, let's do that !
Hmm... and regarding the image we talked about?
Ooops, sorry, here is it.

11. The W*S approach
Why?
“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 approach
Conclusion:
Let's occupy W*S !!

14. Google Maps
Google 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 Maps
Many usage restrictions:
●
Offline mode,
●
Mass geocoding,
●
Non-public usage (intra/extranet),
●
Commercial usage,
●
etc.

17. New hopes
New JavaScript libraries:
Smaller – Faster – Easier
New ways to produce maps:
No GIS server – Tiles – CSS

18. ModestMaps
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" />

19. ModestMaps

20. Polymaps
32 Ko – Fast – GeoJSON / SVG
collective.geo.polymaps by Christian Ledermann
●
Straightforward to customize
●
Style with CSS

21. Polymaps

22. Kartograph
60 Ko – Pure SVG - CSS
A complete chain:
●
Kartograph.py converts GIS resources into SVG (possibly 3D)
●
Kartograph.js displays it

23. Kartograph

24. Leaflet
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...)

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 map
Actually, 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 tiles
DEMO

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