SlideShare ist ein Scribd-Unternehmen logo
1 von 42
Downloaden Sie, um offline zu lesen
I want a nice map !
  Plone Conference 2012
  Eric Brehault
  @ebrehault
  www.makina-corpus.com
What is a map?
A map is a piece of information




Le Monde Diplomatique Sept. 2012 – Philippe Rekacewicz
What is a map?
User interactions can be useful
What is a map?
But visitors are not the ones who need to build a map,
they just need to read it.




                                               100% Flash !
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.
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)
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).
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?
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.
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.
The W*S approach
Why?
“To improve interoperability”

OK, but this is not how the Web works.
The standard Web approach

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

Conclusion:


Let's occupy W*S !!
Google Maps
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.
New hopes
New JavaScript libraries:
Smaller – Faster – Easier

New ways to produce maps:
No GIS server – Tiles – CSS
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" />
ModestMaps
Polymaps
32 Ko – Fast – GeoJSON / SVG

collective.geo.polymaps by Christian Ledermann

●
  Straightforward to customize
●
  Style with CSS
Polymaps
Kartograph
60 Ko – Pure SVG - CSS

A complete chain:
●
  Kartograph.py converts GIS resources into SVG (possibly 3D)
●
  Kartograph.js displays it
Kartograph
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...)
Leaflet
Leaflet
Leaflet
Leaflet
Leaflet
Leaflet
Leaflet
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?
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.
Produce your own tiles
●
    TileMill: a CSS-oriented design studio

●
    MBUtil and Landez: utilities to produce tiles

DEMO
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

Weitere ähnliche Inhalte

Mehr von Makina Corpus

Petit déjeuner "Les bases de la cartographie sur le Web"
Petit déjeuner "Les bases de la cartographie sur le Web"Petit déjeuner "Les bases de la cartographie sur le Web"
Petit déjeuner "Les bases de la cartographie sur le Web"Makina Corpus
 
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...Makina Corpus
 
CoDe, le programme de développement d'applications mobiles de Makina Corpus
CoDe, le programme de développement d'applications mobiles de Makina Corpus CoDe, le programme de développement d'applications mobiles de Makina Corpus
CoDe, le programme de développement d'applications mobiles de Makina Corpus Makina Corpus
 
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...Makina Corpus
 
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembrePetit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembreMakina Corpus
 
Alternatives libres à Google Maps
Alternatives libres à Google MapsAlternatives libres à Google Maps
Alternatives libres à Google MapsMakina Corpus
 
Atelier "Les nouveautés de la cartographie en ligne"
Atelier "Les nouveautés de la cartographie en ligne"Atelier "Les nouveautés de la cartographie en ligne"
Atelier "Les nouveautés de la cartographie en ligne"Makina Corpus
 
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.Makina Corpus
 
Des cartes d'un autre monde - DjangoCong 2012
Des cartes d'un autre monde - DjangoCong 2012Des cartes d'un autre monde - DjangoCong 2012
Des cartes d'un autre monde - DjangoCong 2012Makina Corpus
 
Solutions libres alternatives à Google Maps
Solutions libres alternatives à Google MapsSolutions libres alternatives à Google Maps
Solutions libres alternatives à Google MapsMakina Corpus
 

Mehr von Makina Corpus (12)

Petit déjeuner "Les bases de la cartographie sur le Web"
Petit déjeuner "Les bases de la cartographie sur le Web"Petit déjeuner "Les bases de la cartographie sur le Web"
Petit déjeuner "Les bases de la cartographie sur le Web"
 
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
Petit déjeuner "Développer sur le cloud, ou comment tout construire à partir ...
 
CoDe, le programme de développement d'applications mobiles de Makina Corpus
CoDe, le programme de développement d'applications mobiles de Makina Corpus CoDe, le programme de développement d'applications mobiles de Makina Corpus
CoDe, le programme de développement d'applications mobiles de Makina Corpus
 
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
Petit déjeuner "Alternatives libres à GoogleMaps" du 11 février 2014 - Nantes...
 
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembrePetit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
Petit déjeuner "Les nouveautés de la cartographie en ligne" du 12 décembre
 
Alternatives libres à Google Maps
Alternatives libres à Google MapsAlternatives libres à Google Maps
Alternatives libres à Google Maps
 
Atelier "Les nouveautés de la cartographie en ligne"
Atelier "Les nouveautés de la cartographie en ligne"Atelier "Les nouveautés de la cartographie en ligne"
Atelier "Les nouveautés de la cartographie en ligne"
 
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
Petit Déjeuner : HTML5 et CSS3, les interfaces de demain.
 
Geotrek
GeotrekGeotrek
Geotrek
 
Plomino
Plomino Plomino
Plomino
 
Des cartes d'un autre monde - DjangoCong 2012
Des cartes d'un autre monde - DjangoCong 2012Des cartes d'un autre monde - DjangoCong 2012
Des cartes d'un autre monde - DjangoCong 2012
 
Solutions libres alternatives à Google Maps
Solutions libres alternatives à Google MapsSolutions libres alternatives à Google Maps
Solutions libres alternatives à Google Maps
 

Kürzlich hochgeladen

Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 

Kürzlich hochgeladen (20)

Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 

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 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” />
  • 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" />
  • 20. Polymaps 32 Ko – Fast – GeoJSON / SVG collective.geo.polymaps by Christian Ledermann ● Straightforward to customize ● Style with CSS
  • 22. Kartograph 60 Ko – Pure SVG - CSS A complete chain: ● Kartograph.py converts GIS resources into SVG (possibly 3D) ● Kartograph.js displays it
  • 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...)
  • 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
  • 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

Hinweis der Redaktion

  1. 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&apos;ici fin fin 2008 - la définition, l&apos;organisaiton et l&apos;animation de la force de vente -