Communiquez avec
des cartes
La cartographie interactive sur le Web
05/02/16Carto'CITÉ
Antoine Riche
Double compétence informatique / SIG
Core developper pour Smallword GIS
(1993-2012)
Créat...
05/02/16Carto'CITÉ
Usages d'une
carte interactive
05/02/16Carto'CITÉ
une carte = un message
05/02/16Carto'CITÉ
une carte = des données
05/02/16Carto'CITÉ
Une carte interactive
pour ...
Communiquer avec clarté
05/02/16Carto'CITÉ
Choix du fonds de carte
MapQuest Open
CartoDB DarkMatter Mapbox Satellite
OpenSeaMap
05/02/16Carto'CITÉ
Un contenu structuré
05/02/16Carto'CITÉ
Des informations détaillées
05/02/16Carto'CITÉ
Une carte interactive
pour ...
Orienter l'utilisateur
05/02/16Carto'CITÉ
Filtres et recherche dynamiques
05/02/16Carto'CITÉ
Recherche à proximité
05/02/16Carto'CITÉ
Calculs d'itinéraires
05/02/16Carto'CITÉ
Une carte interactive
pour ...
Analyser et décider
05/02/16Carto'CITÉ
Visualisation de données
05/02/16Carto'CITÉ
Evolution dans le temps
05/02/16Carto'CITÉ
Isochrones
05/02/16Carto'CITÉ
Une carte interactive
pour ...
Aller plus loin !
05/02/16Carto'CITÉ
Suivi de véhicules
Flightradar24
05/02/16Carto'CITÉ
Simulation de scénarios
05/02/16Carto'CITÉ
Remontée d'informations
05/02/16Carto'CITÉ
Une carte interactive …
Oui mais comment ?
05/02/16Carto'CITÉ
Pour faire une bonne carte
il faut ...
Des données Du logiciel
05/02/16Carto'CITÉ
OpenStreetMap
L'open data du territoire
05/02/16Carto'CITÉ
OSM = des données détaillées
OpenStreetMap Google Map Bing Map
05/02/16Carto'CITÉ
OSM = de multiples fonds de cartes
Open Topo Map
MapBox woodcutStamen WaterColour
Stamen TonerLite
05/02/16Carto'CITÉ
OSM sur data.gouv.fr
05/02/16Carto'CITÉ
Ils utilisent OpenStreetMap
et bien d'autres ...
05/02/16Carto'CITÉ
Autres sources de données
05/02/16Carto'CITÉ
Solutions logicielles
05/02/16Carto'CITÉ
Image Map HTML
05/02/16Carto'CITÉ
Image Map HTML
Usage
✔ Menu visuel pour accéder aux pages d'un site
Caractéristiques
✔ Pur HTML … qui p...
05/02/16Carto'CITÉ
Plugin WordPress : Maps Marker
05/02/16Carto'CITÉ
Plugin WordPress
Usage
✔ Positionner ses filiales ou ses clients sur un
site vitrine WordPress
Caractér...
05/02/16Carto'CITÉ
umap
05/02/16Carto'CITÉ
umap
05/02/16Carto'CITÉ
Usages
✔ Communiquer : valoriser un territoire, tourisme
✔ Orienter : évènement, logistique
✔ Dataviz s...
05/02/16Carto'CITÉ
Mapbox                   CartoDB
05/02/16Carto'CITÉ
Solutions cloud
Usages
✔ Communiquer : cartes personnalisées (Mapbox)
✔ Visualisation de données (Carto...
05/02/16Carto'CITÉ
Application cartographique
05/02/16Carto'CITÉ
Application cartographique
05/02/16Carto'CITÉ
Application cartographique
Usages
✔ Communiquer : territoire, tourisme, immobilier ...
✔ Orienter : fil...
05/02/16Carto'CITÉ
Des services à la carte
Une grande variété
✔ Fonds de carte : standards ou personnalisés
✔ Géocodage di...
05/02/16Carto'CITÉ
www.cartocite.fr
Antoine Riche
06 76 88 13 49
antoine.riche@cartocite.fr
@cartocite
Vous pouvez partage...
Prochain SlideShare
Chargement dans…5
×

Communiquez avec des cartes : a cartographie interactive sur le Web

3 114 vues

Publié le

Une bonne carte vaut mieux qu'un long discours. Interactive, la carte s'anime et devient un outil de communication efficace. Sur un site internet, une carte interactive oriente l'internaute et le rend acteur de sa navigation.

Cette conférence dresse un panorama des usages et atouts des cartes interactive, puis analyse plusieurs solutions Web au regard des objectifs d'une carte.

Publié dans : Internet
  • Soyez le premier à commenter

Communiquez avec des cartes : a cartographie interactive sur le Web

  1. 1. Communiquez avec des cartes La cartographie interactive sur le Web
  2. 2. 05/02/16Carto'CITÉ Antoine Riche Double compétence informatique / SIG Core developper pour Smallword GIS (1993-2012) Création de Carto'CITÉ (2014) Carto'CITÉ Carte, territoire et citoyens Géomatique et cartographie Web Formations OpenStreetMap www.cartocite.fr @cartocite
  3. 3. 05/02/16Carto'CITÉ Usages d'une carte interactive
  4. 4. 05/02/16Carto'CITÉ une carte = un message
  5. 5. 05/02/16Carto'CITÉ une carte = des données
  6. 6. 05/02/16Carto'CITÉ Une carte interactive pour ... Communiquer avec clarté
  7. 7. 05/02/16Carto'CITÉ Choix du fonds de carte MapQuest Open CartoDB DarkMatter Mapbox Satellite OpenSeaMap
  8. 8. 05/02/16Carto'CITÉ Un contenu structuré
  9. 9. 05/02/16Carto'CITÉ Des informations détaillées
  10. 10. 05/02/16Carto'CITÉ Une carte interactive pour ... Orienter l'utilisateur
  11. 11. 05/02/16Carto'CITÉ Filtres et recherche dynamiques
  12. 12. 05/02/16Carto'CITÉ Recherche à proximité
  13. 13. 05/02/16Carto'CITÉ Calculs d'itinéraires
  14. 14. 05/02/16Carto'CITÉ Une carte interactive pour ... Analyser et décider
  15. 15. 05/02/16Carto'CITÉ Visualisation de données
  16. 16. 05/02/16Carto'CITÉ Evolution dans le temps
  17. 17. 05/02/16Carto'CITÉ Isochrones
  18. 18. 05/02/16Carto'CITÉ Une carte interactive pour ... Aller plus loin !
  19. 19. 05/02/16Carto'CITÉ Suivi de véhicules Flightradar24
  20. 20. 05/02/16Carto'CITÉ Simulation de scénarios
  21. 21. 05/02/16Carto'CITÉ Remontée d'informations
  22. 22. 05/02/16Carto'CITÉ Une carte interactive … Oui mais comment ?
  23. 23. 05/02/16Carto'CITÉ Pour faire une bonne carte il faut ... Des données Du logiciel
  24. 24. 05/02/16Carto'CITÉ OpenStreetMap L'open data du territoire
  25. 25. 05/02/16Carto'CITÉ OSM = des données détaillées OpenStreetMap Google Map Bing Map
  26. 26. 05/02/16Carto'CITÉ OSM = de multiples fonds de cartes Open Topo Map MapBox woodcutStamen WaterColour Stamen TonerLite
  27. 27. 05/02/16Carto'CITÉ OSM sur data.gouv.fr
  28. 28. 05/02/16Carto'CITÉ Ils utilisent OpenStreetMap et bien d'autres ...
  29. 29. 05/02/16Carto'CITÉ Autres sources de données
  30. 30. 05/02/16Carto'CITÉ Solutions logicielles
  31. 31. 05/02/16Carto'CITÉ Image Map HTML
  32. 32. 05/02/16Carto'CITÉ Image Map HTML Usage ✔ Menu visuel pour accéder aux pages d'un site Caractéristiques ✔ Pur HTML … qui peut alourdir une page ✔ OK pour toute image ✔ Lié à la taille et au contenu de l'image
  33. 33. 05/02/16Carto'CITÉ Plugin WordPress : Maps Marker
  34. 34. 05/02/16Carto'CITÉ Plugin WordPress Usage ✔ Positionner ses filiales ou ses clients sur un site vitrine WordPress Caractéristiques ✔ Configuration dans le back-end WordPress ✔ Import de données CSV/XLS/ODS et KML ✔ Bon choix de fonds de cartes et de marqueurs ✔ Peu de fonctionnalités (ni filtre ni recherche)
  35. 35. 05/02/16Carto'CITÉ umap
  36. 36. 05/02/16Carto'CITÉ umap
  37. 37. 05/02/16Carto'CITÉ Usages ✔ Communiquer : valoriser un territoire, tourisme ✔ Orienter : évènement, logistique ✔ Dataviz simple : clustering et cartes de densité ✔ Simuler un scénario, raconter une histoire umap Caractéristiques ✔ Gratuit et open source, prêt à l'emploi ✔ Intégration sur un site Web par une iframe ✔ Données structurées et popups personnalisées ✔ Import de données : fichiers ou services Web
  38. 38. 05/02/16Carto'CITÉ Mapbox                   CartoDB
  39. 39. 05/02/16Carto'CITÉ Solutions cloud Usages ✔ Communiquer : cartes personnalisées (Mapbox) ✔ Visualisation de données (CartoDB) ✔ Pour un grand nombre de visites  ✔ Pour de gros volumes de données Caractéristiques ✔ Solutions cloud performantes et populaires ✔ Freemium et 1ers  abonnements économiques ✔ Mapbox & CartoDB peuvent être combinés ✔ APIs pour intégrer à une application Web
  40. 40. 05/02/16Carto'CITÉ Application cartographique
  41. 41. 05/02/16Carto'CITÉ Application cartographique
  42. 42. 05/02/16Carto'CITÉ Application cartographique Usages ✔ Communiquer : territoire, tourisme, immobilier ... ✔ Orienter : filtres, recherche, géocodage, routage ✔ Visualisation de données statiques ou  évolutives  ✔ Suivi de véhicules, remontée d'informations ... Caractéristiques ✔ Développement Web avec librairies Javascript ✔ Large choix d'APIs et de plugins ✔ Design et ergonomie adaptés aux objectifs ✔ Intégration possible au Système d'Information
  43. 43. 05/02/16Carto'CITÉ Des services à la carte Une grande variété ✔ Fonds de carte : standards ou personnalisés ✔ Géocodage direct/inverse, recherche à proximité,  suggestion « à la volée », géolocalisation ✔ Itinéraires : mode(s) de transport, contraintes,  optimisation de tournée, trafic, isochrones  Une offre abondante  ✔ Services libres : OpenStreetMap, data.gouv.fr, SNCF ... ✔ Entreprises : Mapquest, Stamen, Mapbox, CartoDB ... ✔ Solutions open source déployées sur vos serveurs
  44. 44. 05/02/16Carto'CITÉ www.cartocite.fr Antoine Riche 06 76 88 13 49 antoine.riche@cartocite.fr @cartocite Vous pouvez partager et adapter cette présentation à condition de l'attribuer à son auteur et de partager vos adaptations dans les mêmes conditions. Retrouvez cette présentation sur  http://fr.slideshare.net/cartocite http://creativecommons.fr/

×