Slide 1
Slide 1 text
I want a nice map !
Plone Conference 2012
Eric Brehault
@ebrehault
www.makina-corpus.com
Slide 2
Slide 2 text
A map is a piece of information
Le Monde Diplomatique Sept. 2012 – Philippe Rekacewicz
What is a map?
Slide 3
Slide 3 text
User interactions can be useful
What is a map?
Slide 4
Slide 4 text
But visitors are not the ones who need to build a map,
they just need to read it.
What is a map?
100% Flash !
Slide 5
Slide 5 text
●
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 ?
Slide 6
Slide 6 text
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 ?
Slide 7
Slide 7 text
●
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
Slide 8
Slide 8 text
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?
Slide 9
Slide 9 text
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?
Slide 10
Slide 10 text
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.
Slide 11
Slide 11 text
Why?
“To improve interoperability”
OK, but this is not how the Web works.
The W*S approach
Slide 12
Slide 12 text
The standard Web approach
Slide 13
Slide 13 text
Conclusion:
Let's occupy W*S !!
The W*S approach
Slide 14
Slide 14 text
Google Maps:
●
looks good,
●
is fast,
●
triggered a fantastic revolution in the Web mapping domain.
But Google Maps...
Google Maps
Slide 15
Slide 15 text
… is so boring.
Everybody has the very same map !
OK, not always the same: there are 3 different default styles
Google Maps
Slide 16
Slide 16 text
Many usage restrictions:
●
Offline mode,
●
Mass geocoding,
●
Non-public usage (intra/extranet),
●
Commercial usage,
●
etc.
Google Maps
Slide 17
Slide 17 text
New JavaScript libraries:
Smaller – Faster – Easier
New ways to produce maps:
No GIS server – Tiles – CSS
New hopes
Slide 18
Slide 18 text
40 Ko – Fast – Mobile compliant – Old browser support
No interaction but excellent for mini maps.
Very very easy to use (with htmapl.js):
ModestMaps
Slide 19
Slide 19 text
ModestMaps
Slide 20
Slide 20 text
32 Ko – Fast – GeoJSON / SVG
collective.geo.polymaps by Christian Ledermann
●
Straightforward to customize
●
Style with CSS
Polymaps
Slide 21
Slide 21 text
Polymaps
Slide 22
Slide 22 text
60 Ko – Pure SVG - CSS
A complete chain:
●
Kartograph.py converts GIS resources into SVG (possibly 3D)
●
Kartograph.js displays it
Kartograph
Slide 23
Slide 23 text
Kartograph
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
Leaflet
Slide 26
Slide 26 text
Leaflet
Slide 27
Slide 27 text
Leaflet
Slide 28
Slide 28 text
Leaflet
Slide 29
Slide 29 text
Leaflet
Slide 30
Slide 30 text
Leaflet
Slide 31
Slide 31 text
Leaflet
Slide 32
Slide 32 text
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?
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
●
TileMill: a CSS-oriented design studio
●
MBUtil and Landez: utilities to produce tiles
DEMO
Produce your own tiles
Slide 35
Slide 35 text
TileMill
Slide 36
Slide 36 text
TileMill
Slide 37
Slide 37 text
TileMill
Slide 38
Slide 38 text
Unified colors theme
Slide 39
Slide 39 text
And if you are gifted
Island by Konstantin Käfer - MapBox
Slide 40
Slide 40 text
And if you are gifted
Pirate map by AJ Ashton - MapBox
Slide 41
Slide 41 text
And if you are gifted
Watercolor by Stamen Design
Slide 42
Slide 42 text
www.makina-corpus.com