Actes Cartographiques

Dossier du workshop hors limites 2017 «actes cartographiques».

Encadré par Sandra Chamaret et Loïc Horellou

Il existe différents outils de cartographies en ligne. Il faut également bien distinguer les sources de données, des systèmes de navigation. En voici quelques uns :

• Google map (https://developers.google.com/maps/) : source de données et système de navigation
• Mapbox (https://www.mapbox.com) : source de données et système de navigation
• Leaflet (http://leafletjs.com) : système de navigation
• Open streetmap (http://www.openstreetmap.org/) : source de données
• Stammen (http://maps.stamen.com) : source de données

Documentation de l'API MapBox javascript :

https://www.mapbox.com/mapbox-gl-js/api/

Des exemples :

https://www.mapbox.com/mapbox-gl-js/example/

Des tutoriaux :

https://www.mapbox.com/help/tutorials/

Étapes :

• On dessine sa carte dans Mabox studio (https://www.mapbox.com/mapbox-studio/)
• On crée un fichier HTML pour intégrer la carte
• On inclue les librairies CSS et JS de Mapbox dans sa page (https://www.mapbox.com/mapbox-gl-js/api/)
• On crée une balise javascript qui reprend le «token» et l'adresse du style de la carte
• On peut dessiner des données à inclure via le site http://geojson.io/

Exemples intéssants

• ajouter une vidéo : https://www.mapbox.com/mapbox-gl-js/example/video-on-a-map/
• afficher / cacher des informations : https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/
• réaliser une action quand on clique sur un point : https://www.mapbox.com/mapbox-gl-js/example/polygon-popup-on-click/
• personnaliser l'affichage des markers : https://www.mapbox.com/mapbox-gl-js/example/custom-marker-icons/
• gérer des clusters : https://www.mapbox.com/mapbox-gl-js/example/cluster/
• gérer les dimensions d'un point en fonction du zoom : https://www.mapbox.com/mapbox-gl-js/example/data-driven-circle-colors/
• travailler avec des icones existants : https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/
• pour ajouter les couches d'informations sous les libellés : https://www.mapbox.com/mapbox-gl-js/example/geojson-layer-in-stack/
• lier des positions à un contenu : https://www.mapbox.com/mapbox-gl-js/example/scroll-fly-to/
• faire une recherche par adresse : https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/

Annexes

• Mode de fonctionnement de Mapbox : https://www.mapbox.com/help/how-mapbox-works/
• Pour manipuler des coordonnées : https://github.com/Turfjs/turf/
• Les différents types de projection cartographique : https://www.jasondavies.com/maps/transition/