I want a nice map
-
Upload
makina-corpus -
Category
Technology
-
view
1.532 -
download
0
description
Transcript of I want a nice map
I want a nice map !Plone Conference 2012Eric [email protected]
A map is a piece of information
Le Monde Diplomatique Sept. 2012 – Philippe Rekacewicz
What is a map?
User interactions can be usefulWhat is a map?
But visitors are not the ones who need to build a map,they just need to read it.
What is a map?
100% Flash !
● 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 ?
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 ?
● 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
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 projectionwhich is ideal for the North-West of Kazakhstan?
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?
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.
Why?“To improve interoperability”
OK, but this is not how the Web works.
The W*S approach
The standard Web approach
<img src=”http://tiles.myserver.com/{zoom}/{x}/{y}.png” />
Conclusion:
Let's occupy W*S !!
The W*S approach
Google Maps:● looks good,● is fast,● triggered a fantastic revolution in the Web mapping domain.
But Google Maps...
Google Maps
… is so boring.
Everybody has the very same map !
OK, not always the same: there are 3 different default styles
Google Maps
Many usage restrictions:● Offline mode,● Mass geocoding,● Non-public usage (intra/extranet),● Commercial usage,● etc.
Google Maps
New JavaScript libraries:Smaller – Faster – Easier
New ways to produce maps:No GIS server – Tiles – CSS
New hopes
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
ModestMaps
32 Ko – Fast – GeoJSON / SVG
collective.geo.polymaps by Christian Ledermann
● Straightforward to customize● Style with CSS
Polymaps
Polymaps
60 Ko – Pure SVG - CSS
A complete chain:● Kartograph.py converts GIS resources into SVG (possibly 3D)● Kartograph.js displays it
Kartograph
Kartograph
90 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...)
Leaflet
Leaflet
Leaflet
Leaflet
Leaflet
Leaflet
Leaflet
Leaflet
You need a base layer, what can it be?
● GoogleMapssuch a cliché
OpenStreetMapdoes not look very good, does it?
What about the data?
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
● TileMill: a CSS-oriented design studio
● MBUtil and Landez: utilities to produce tiles
DEMO
Produce your own tiles
TileMill
TileMill
TileMill
Unified colors theme
And if you are gifted
Island by Konstantin Käfer - MapBox
And if you are gifted
Pirate map by AJ Ashton - MapBox
And if you are gifted
Watercolor by Stamen Design
www.makina-corpus.com