Communiquez avec des cartes : a cartographie interactive sur le Web
•Als ODP, PDF herunterladen•
1 gefällt mir•5,064 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Communiquez avec des cartes : a cartographie interactive sur le Web
Ähnlich wie Communiquez avec des cartes : a cartographie interactive sur le Web (20)
Mehr von Antoine Riche
Mehr von Antoine Riche (9)
Communiquez avec des cartes : a cartographie interactive sur le Web
- 1. Communiquez avec des cartes La cartographie interactive sur le Web
- 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
- 4. 05/02/16Carto'CITÉ une carte = un message
- 5. 05/02/16Carto'CITÉ une carte = des données
- 6. 05/02/16Carto'CITÉ Une carte interactive pour ... Communiquer avec clarté
- 7. 05/02/16Carto'CITÉ Choix du fonds de carte MapQuest Open CartoDB DarkMatter Mapbox Satellite OpenSeaMap
- 10. 05/02/16Carto'CITÉ Une carte interactive pour ... Orienter l'utilisateur
- 11. 05/02/16Carto'CITÉ Filtres et recherche dynamiques
- 14. 05/02/16Carto'CITÉ Une carte interactive pour ... Analyser et décider
- 16. 05/02/16Carto'CITÉ Evolution dans le temps
- 18. 05/02/16Carto'CITÉ Une carte interactive pour ... Aller plus loin !
- 22. 05/02/16Carto'CITÉ Une carte interactive … Oui mais comment ?
- 23. 05/02/16Carto'CITÉ Pour faire une bonne carte il faut ... Des données Du logiciel
- 24. 05/02/16Carto'CITÉ OpenStreetMap L'open data du territoire
- 25. 05/02/16Carto'CITÉ OSM = des données détaillées OpenStreetMap Google Map Bing Map
- 26. 05/02/16Carto'CITÉ OSM = de multiples fonds de cartes Open Topo Map MapBox woodcutStamen WaterColour Stamen TonerLite
- 28. 05/02/16Carto'CITÉ Ils utilisent OpenStreetMap et bien d'autres ...
- 29. 05/02/16Carto'CITÉ Autres sources de données
- 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. 05/02/16Carto'CITÉ Plugin WordPress : Maps Marker
- 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)
- 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
- 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
- 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. 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
Hinweis der Redaktion
- J'ai voulu faire cette conf. car je vois trop de cartes qui se ressemblent et qui sont peu pratiques . Carte interactive sur site Web = outil de communication efficace 2 x : visuel + ludique . Un des rares éléments permettant à l'internaute d'interagir avec le site Web → diminution de l'effet rebond .
- Développeur toujours dans le secteur de la cartographie . Expérience SW GIS : développement de services Web carto + client Web avec HTML5 . Carto'CITÉ : la carte pour comprendre le territoire, la carte pour communiquer avec les citoyens.
- Conf. en 2 temps : . - usages et atouts d'une carte INTERACTIVE, démo . - outils disponibles : familles de solutions, pas technique .
- Mais avant : qu'est-ce qu'une carte ? . Pas qu'une image, une carte a un objectif : véhiculer un message (cartographe, statisticien) . Expliquer la carte : le choix d'inclure les humains donne une toute autre carte, un autre message . Je voudrais zoomer, voir les proportions relatives de mammifères .
- Carte = représentation de données . Carte du PNB en Europe (données Eurostat) : - taille des carrés proportionnelle au PNB - couleur montrant le PNB / habitant . Synthèse claire : où est créée la richesse en Europe . On aimerait questionner la carte, voir les données : par un clic sur la carte, pas dans un grand tableau . → frustration
- Carte interactive : réponse à ces questions . Carte interactive = nombreux avantages que nous allons passer en revue . Une carte peut avoir plusieurs objectifs : communiquer, orienter, analyser . Nous allons voir comment une carte interactive permet d'atteindre ces objectifs . Pour commencer : communiquer vers l'internaute → INFOS HIERARCHISEES : 3 NIVEAUX : fond de carte, données sur la carte, infos complémentaires . Plusieurs éléments à notre disposition .
- 1. Choix du fond de carte . Participe au message porté par la carte . Choix selon la thématique, la place laissée aux données . Chargé ou épuré, avec ou sans toponymes, couleurs ou N&B, etc . Dizaines de fonds de carte, pas un meilleur que les autres : chacun adapté à un usage différent . Possible de laisser l'utilisateur choisir entre plusieurs fonds de carte, de les combiner par transparence .
- 2. Données structurées . Contenu de la carte, propre à l'objectif de la carte . Structurer selon la thématique : calques = couches . Pictogramme et/ou couleur pour chaque calque . Légende, ici combinée avec le sélecteur de calques : cases à cocher . → l'utilisateur comprend vite ce que montre la carte, et comment s'en servir .
- 3. Informations complémentaires . Clic sur un élément de la carte, ou hover sur zone . Popup ou encart sur le côté . Texte formaté, image, lien vers page Web, graphique, vidéo, fichier à télécharger (ex. horaire ligne de bus) . RECAP COMMUNIQUER : 3 niveaux – choix du fond de carte, contenu structuré, infos complémentaires – pour diffuser une information claire et complète . Source : http://umap.openstreetmap.fr/fr/map/lile-de-france-en-bandes-dessinees_26576
- 2. carte pour orienter l'utilisateur . Aider un citoyen à trouver le service qu'il recherche , aider un touriste à organiser ses vacances , aider un consommateur à trouver un point de vente . Plusieurs outils qui peuvent être combinés entre eux → service sur mesure .
- Données filtrées selon un ou plusieurs critères qui peuvent être combinés entre eux . Outil de recherche, qui permet de filtrer les données selon un critère libre . Carte Annuaire : plusieurs filtres combinés, recherche avec suggestions, interaction liste – carte . + que des filtres : aide pour trouver la structure qui correspond à un besoin .
- Trouver des services (commerces, écoles, équipements sportifs etc.) autour d'un lieu . Rayon fixe ou défini par l'utilisateur . Lieu défini par géolocalisation . Agence immo Laforêt : aide les acheteurs à choisir leur lieu de vie . Le long d'un itinéraire - ex. hôtels sur la route des vacances . Dans une zone : bibliothèques d'un quartier, sentiers d'un parc naturel, etc . Source : http://www.laforet.com/
- Lieu identifié → itinéraire pour s'y rendre . Mode(s) de transport, PMRs . Comparaison de plusieurs itinéraires, ajout d'étapes, export vers GPS ou smartphone . Rien de neuf : Mappy, Via Michelin . CIRCUIT : MoodWalkr (Makina Corpus) : l'utilisateur choisit la durée et le thème (shopping, culture, espaces verts) . RECAP ORIENTER : filtres, recherche à proximité, itinéraires . Source : http://moodwalkr.makina-corpus.net/
- 3. Outil d'aide à la décision . Majorité des données « géoréférencées » d'une manière ou d'une autre → pertinent de « faire parler » les données sur une carte . → domaine de la visualisation de données, discipline en plein essor à l'heure du big data . Je fais pas un exposé sur la dataviz . Je vais montrer ce qu'apporte l'interactivité à la visualisation de données : aide pour comprendre des données volumineuses et variées . DEMO .
- Carte interactive : comparer facilement, choisir une variable, un mode de visualisation . Pour comprendre un phénomène, analyser ses causes . Illustreets : qualité de vie d'un quartier : déplacer la souris sur un ilôt → infos sur l'encart à gauche . Carte interactive → choix des données par l'utilisateur . Possible et efficace avec les technos Web actuelles . Source : http://illustreets.co.uk/explore-england/
- Evolution de la taxe foncière entre 2001 et 2012, par communes . Carte réalisée par le collectif Regards Citoyens à partir de données ouvertes (nosdonnes.fr) . Carte interactive → évolution d'une variable dans le temps, et ici comparer entre plusieurs communes . Source: http://www.nosfinanceslocales.fr/
- Connaissez-vous les isochrones ? . Courbe isochrone = ligne d'égale durée de déplacement par rapport à un point de départ, en s'appuyant sur le réseau routier . Carte interactive → faire varier les paramètres : point(s) de départ, heure de départ et durée, mode de transport . RECAP DATAVIZ : concentrer en une seule carte énormément d'informations, permetttre à l'utilisateur de choisir, comparer et analyser . Si on utilisait des cartes statiques : atlas volumineux . Source: http://www.flaviogortana.com/isoscope/
- 4. Pour finir sur les usages des cartes interactives . Quelques exemples où l'interactivité permise aujourd'hui par le Web montre tout son intérêt .
- Flux de données localisation GPS de véhicules → déplacement sur la carte en quasi temps réel (en déplaçant les marqueurs) . FlightRadar24 : position des avions en vol . L'utilisateur peut afficher les informations sur un vol : aéroports de départ et destination, altitude, vitesse . Il peut définir des filtres : seulement les avions partant ou arrivant d'un aéroport, volant à une certaine altitude, etc . Possible pour véhicules routiers, trains, bateaux, etc . Source : http://www.flightradar24.com
- Carte réalisée par Data Publica . Découpage des régions en fonction des mobilités professionnelles entre départements . L'utilisateur choisit le nombre de régions → nouveau découpage . Interactivité → passer d'un scénario à l'autre facilement . Source: http://labs.data-publica.com/regionator3000/
- Dernier exemple . Géolocalisation : remontée d'infos par les usagers en mobilité . FixMaVille (DataForPeople) : signaler des incidents sur la voirie aux services techniques, qui peuvent les visualiser sur une carte . Même principe pour d'autres types d'informations et d'autres usages . RECAP : communiquer, orienter l'utilisateur, aide à la décision, suivi de véhicules . Interactivité : internaute lecteur → acteur .
- Vous avez tous envie d'une carte interactive pour votre site internet . Vous êtes tous convaincus qu'une carte va vous permettre de mieux communiquer sur vos projets . De mieux orienter vos clients . De mieux comprendre vos données . Cartes interactives : atout pour votre activité . Mais comment fait-on ? Quels outils utiliser ? Quelles données ?
- CLIC
- Avant tout : définir l'objectif de la carte, identifier qui va utiliser la carte, cibler une audience . Contrètement – techniquement – 2 ingrédients . 1. Des données : fond de carte, données propres à la carte, données qui donnent un contexte (ex. limites admin) . 2. Du logiciel : afficher ces données, naviguer dans la carte, fournir des services (ex. calculs d'itinéraires) . Commençons par les données .
- Bcp de donneés Open Data . Ressource que j'affectionne particulièrement : OSM . QUESTION : qui parmi vous connaît OSM ? . OSM = carte collaborative produite et tenue à jour par des 10'000 de bénévoles ; OSM = carte d'une grande richesse ; OSM = plus qu'une carte une BD . BD sous licence libre : libre d'extraire et réutiliser, pour produire des cartes ou ce qu'on veut . Certains utilisent OSM pour créer des œuvres d'art . OSM = c'est l'open data du territoire.
- Cartes OSM, Google, Bing : même zone et même échelle . Détails du terrain : escaliers, Bicloo, arbres . Ce qui fait vivre un territoire : commerces, restos, arrêts de bus . Trop d'informations, peu clair ? → Bien comprendre qu'OSM est avant tout une BD . Cette BD permet de produire plusieurs fonds de carte . Les données peuvent être extraites et réutilisées, mises en valeur sur la carte : arrêts de bus, appuis-vélos, DABs etc. (cf. agence immo La Forêt)
- Plusieurs dizaines de fonds de carte en ligne créées à partir des données OSM . Cartes des plus épurées aux plus détaillées, certaines plutôt artistiques comme le style « aquarelle » de Stamen Design . La plupart utilisables en fond de carte gratuitement . On peut créer ses propres fonds de carte : plusieurs outils existent . OSM = immense écosystème de logiciels (libres et gratuits pour la plupart) . + entreprises qui fournissent des services utilisant les données OSM.
- OSM = une source de données ouvertes reconnue par l'état . Plate-forme open data du gouvernement : + de 20 jeux de données fournis par OSM . Limites admin, réseau autoroutier, lignes RER, etc . Certains jeux de données sont certifiés, ex. cartographie des gares du SNCF Transilien (accéssibilité aux PMRs) .
- Des structures, publiques, associatives et privées, utilisent OSM . Collectivités territoriales : pour communiquer avec leurs citoyens, et faire communiquer les citoyens entre eux . Services de secours, qui apprécient une carte à jour et précise . GéoVélo, qui utilise les données OSM pour calculer des itinéraires pour vélos . Entreprises petites et grosses, ex. agences immo Laforêt, Flickr, Pinterest . 2012 : FourSquare passe de Google Maps à OSM → coût, beauté des carte, flexibilité, pérennité.
- Je pourrais parler d'OSM pdt des heures . Autres sources de données : données libres, niveau local, national, européen, GEOVENDEE . données statistiques, météo, transport . données géoréférencées ou qui peuvent l'être . CLIC . Des données il en existe chez vous ! . Fort à parier qu'elles sont ou peuvent être géolocalisées → placées sur une carte .
- Pour visualiser ces données, pour créer une carte claire et ergonomique, de quels outils dispose-t-on ? . Ils sont nombreux : je ne vais pas les énumérer . Pas de solution propriétaire : solutions OPEN SOURCE car flexible et pérenne + communauté dynamique (soutenue par une fondation) . Je vais citer quelques solutions de différentes catégories . Pas de détails techniques . Principales caractéristiques de chaque famille de solutions & usages adaptés à chacune.
- 1e solution pour le développeur Web : Image Map . Image (carte ou autre) + zones qui découpent l'image, chacune associée à un hyperlien . Bien pour des images simples . Compliqué pour une carte comme les USA : il faut définir le contour de chaque état . Pas adapté si zones grandes et petites : difficile de sélectionner les états de la côte Est . Si vous changez d'image il faut tout recommencer .
- Solution simple en apparence . Deux inconvénients majeurs : - pas responsive : si l'image est plus grande que l'écran pas ergonomique . - difficile à maintenir : si on décide de changer d'image il faut redéfinir toutes les zones ! . Usage : alternative aux menus classiques .
- Plugins carto pour WordPress : MapsMarker . Projet actif, déployé 40000+ fois, bien intégré à WP . Choix de fonds de carte (Google ou OSM), grand choix de pictos . Back-end WP pour configurer la carte, définir ou importer des marqueurs d'un fichier . Insertion d'itinéraire mais pas de calcul d'itinéraire pour l'utilisateur, pas de filtre ou de module de recherche .
- OK pour placer des marqueurs sur une carte intégrée à un site Web : filiales d'une société, membres d'un réseau . A condition qu'il n'y en ait pas trop : pas de filtre ni de recherche . Solution bien intégrée à WP, à partir de 29 € . Nombreux plugins de carto pour CMS, +/- complets . Assez limités en terme de fonctionnalités.
- Vous avez peut-être déjà vu cette carte ? . Carto-crise : carte des festivals et évènements culturels annulés . Reprise par les grands médias nationaux, du Figaro au Monde, de Ouest-France à France Culture . Visionnée + 900 000 fois . Produite collaborativement et régulièrement complétée . Réalisée sur un logiciel en ligne : umap . Autre carte umap célèbre : « Je suis Charlie », visionnée plus de 200 000 en 24 H.
- umap = service en ligne libre et gratuit . Créer des cartes personnalisées sans coder . Pendant open source à MyMaps de Google . + de fonctionnalités, comme le montrent ces exemples de cartes que j'ai réalisées avec umap . Données structurées sur plusieurs calques . Import depuis un fichier ou par une requête . Ajout d'images, de vidéos, etc.
- Carte umap : hébergée sur un serveur OSM-FR . Carte intégrée à un site Web par une iframe : peut être intégrée à un site WP . Entièrement gratuit . Solution assez complète pour communiquer, organiser un évènement, simuler un scénario . Filtre par les calques uniquement, pas de recherche . Si bcp de données sur la carte, peu efficace pour orienter l'internaute.
- Mapbox & CartoDB : 2 enterprises de l'écosystème OSM, offre Cloud intéressante . Mapbox pour créer des fonds de cartes avec les données OSM + ses données, définition de styles : de très belles réalisations . Les cartes créées peuvent être copiées sur votre serveur ou publiées sur le cloud Mapbox. Elles peuvent alors être intégrées à votre site Web (iframe ou code JS) . CartoDB : cartes sur le cloud, spécialisé dans la visualisation de données . carte HELLO DATA . Solutions complémentaires qui peuvent être combinées .
- Mapbox & CartoDB : soit pour des besoins assez pointus de design de carte ou de visualisation de données , soit si un grand nombre d'utilisateurs est attendu : solution cloud solide . Freemium / abonnement mensuel à partir de 49 $ pour Mapbox, 29 $ pour CartoDB . Nombreuses entreprises Google → Mapbox ou CartoDB (FourSquare, Pinterest) : coût, solutions open source, donc plus ouvertes et plus pérennes . Grands médias utilisant MapBox : le Monde, Guardian, Washington Post.
- Dév spécifique pour adapter les fonctionnalités à l'objectif de la carte et à ses données . Plus grande clarté, meilleure ergonomie → communication claire et meilleur service pour l'internaute . J'ai développé cette carte avec Leaflet : open source et « mobile friendly », responsive et légère
- Autre carte : géocodage + recherche + itinéraire . Que des outils et des données libres : BAN + OSM + Graphhopper . Un peu de code → véritable application carto qui s'exécute sur le navigateur Web.
- Avantage de Leaflet ou OpenLayers : pouvoir développer une véritable application carto . Adaptée aux objectifs de la carte et aux données . Filtres, recherche, calcul d'itinéraires, etc . L'application peut être intégrée au site Web de l'entreprise voire à son SI . Solution pérenne et évolutive . On pourra répondre à un grand nombre de cas d'usages. Principale limite : l'imagination . Enfin : services Web pour enrichir les fonctionnalités de la carte
- Pas que Google qui propose des services Web carto . Plusieurs entreprises en proposent, beaucoup utilisent les données OSM . Offre premium, et même leur offre la + complète est - chère que Google : MapBox 500 $ / mois max . Nombreux services gratuits : fondation OSM, association OSM-FR, gouvernement, SNCF, etc . Nombreuses solutions open source et documentées, peuvent être déployées sur des serveurs avec vos données . Tout dépend des besoins et des ambitions du projet.
- Voilà pour un rapide panorama des usages d'une carte interactive : communiquer, orienter l'internaute, visualiser des données . Voilà pour un rapide panorama des solutions disponibles : données et logiciels . J'espère que cette présentation a répondu à vos attentes, qu'elle ouvre des perspectives pour votre activité . Présentation disponible en open data sur mon slideshare, licence Creative Commons . Avez-vous des questions ou des remarques ?
- Services Web : Google Maps API . Nombreux, solides, bénéficient de l'infrastructure de Google . On peut créer des fonds de cartes personnalisées, à partir des données Google . Avant d'investir dans le dév d'une appli carto basée sur Google il faut se poser quelques questions : ce n'est pas gratuit . Des entreprises en ont fait l'expérience : payer plusieurs 100 000 $ à Google . Elles ont vite cherché et trouvé des alternatives.