Centre de recherche sur les Risques et les Crises Présentation et prise en main de MapBox AT5 : Web mapping 1 Xavier Chaze xavier.chaze@mines-paristech.fr MINES ParisTech CRC
Sommaire Présentation de MapBox Fonctionnement et logique Prise en main Inscription Interface administrateur Création d une carte Ajout de données sur MapBox Gestion des données avec TileMill Principe de fonctionnement Présentation Les principales étapes Intégration de données Les principes À partir d un tableur À partir d un fichier Shapefile Personnalisation de l apparence (CartoCSS) Ajout d éléments interactifs Publication et exploitation Export de projets TileMill vers des applications existantes Publication de cartes sur MapBox, intégration sur sites web Exemples d applications
Présentation de MapBox Fonctionnement et logique MapBox [1] est un outil cartographique open source «dans le cloud». Il permet de créer, personnaliser, partager et diffuser des cartes au sein d une interface conviviale et intuitive. [1] : http://mapbox.com/
DESIGN PUBLICATION Présentation de MapBox Fonctionnement et logique MapBox permet notamment de : Personnaliser les styles cartographiques Représenter le relief grâce à un Modèle Numérique de Terrain intégré Ajouter des markers Créer des cartes interactives grâce à l API Créer des sites web avec des templates existants Intégrer des cartes dans des applications ios L infrastructure MapBox assure un hébergement sécurisé et une diffusion performante des cartes : Plus de 30 serveurs répartis à travers le monde Redondance des serveurs Basculement automatique (redirection) en cas de défaillance d un serveur Surveillance du fonctionnement des serveurs 24/7 Backup régulier
Présentation de MapBox Prise en main : inscription Choix d une configuration parmi l offre commerciale proposée [2] [2] : http://mapbox.com/plans/
Présentation de MapBox Prise en main : inscription Création d un compte Saisie d un nom d utilisateur et d une adresse e-mail. Réception d un mail Welcome to MapBox à cette adresse. Activation du compte par la saisie d un mot de passe.
Présentation de MapBox Prise en main : interface administrateur Modification des paramètres du compte - onglet SETTINGS Profil Nom Site Internet Description Adresse e-mail Mot de passe Applications développées Facturation Configuration commerciale Relevé de situation
Présentation de MapBox Prise en main : interface administrateur Création d une carte - onglet MAPS Créer une nouvelle carte : New map Personnaliser sa carte en modifiant les différents paramètres Configuration de l interface cartographique Paramétrage des couches cartographiques Ajout d informations ponctuelles Modifier une carte existante parmi les cartes de son compte
Présentation de MapBox Prise en main : création d une carte Configuration de l interface cartographique : onglet Info Titre Description Centre de la carte (coordonnées et niveau de zoom) Confidentialité Fonctionnalités disponibles Contrôles de zoom, Tooltip, Légende, Liens de Partage, Zoom scrollé, Géocodeur Paramétrage des couches cartographiques : onglet Layers Sélection des couches à afficher (par défaut : Streets, Areas, Water, Land) Sélection d un préréglage de couleurs parmi une liste déroulante Modification des paramètres de couleur : Hue : partie du spectre des couleurs affichées Saturation : saturation des couleurs Levels : plage de valeurs Pour la couche Streets possibilité de doubler la taille du réseau et des étiquettes (labels) ainsi que d afficher leur version anglaise si disponible.
Présentation de MapBox Prise en main : création d une carte Ajout d informations ponctuelles : onglet Markers Nom Description Localisation Saisie des coordonnées Directement sur la carte Symbologie (représentation cartographique) : Taille du symbole Couleur Type du symbole
Présentation de MapBox Ajout de données sur MapBox Possibilité de charger ses propres données dans une carte MapBox Ajout de données ponctuelles via des markers Ajout de couches de données Format de fichier requis : MBTiles (basé sur le format de fichier SQLite) Le format MBTiles permet de créer les images tuilées d une carte. Ces images tuilées sont conçues et générées à un certain nombre d échelles différentes. Ces échelles prédéfinies à laquelle la carte est générée s appelle un niveau de zoom. Objectif de ce format : permettre le transfert et l échange de cartes via un package d images tuilées compressées. Chaque package est configuré selon les paramètres suivants : Niveaux de zoom Centre de la carte Emprise de la carte Installation et utilisation de TileMill nécessaire
Gestion des données avec TileMill Principe de fonctionnement : présentation TileMill [3] est un logiciel de conception rapide et facile de cartes interactives pour le web à partir de données personnalisées. Projet de la société Development Seed [4] Code source disponible sur GitHub [5] Basé sur la librairie cartographique open source MapNik [6] Logiciel multi-plateformes (Mac OS X, Ubuntu et Windows) [3] : http://www.mapbox.com/tilemill/ [4] : http://www.github.com/mapbox/tilemill [5] : http://www.github.com/mapbox/tilemill [6] : http://www.mapnik.org/
Gestion des données avec TileMill Principe de fonctionnement : les principales étapes Créer un nouveau projet Importer des données Personnaliser le style des couches de données Ajouter des éléments interactifs Exporter la carte ainsi créée Ces étapes sont décrites dans une documentation en ligne [7] [7] : http://www.mapbox.com/tilemill/docs/
Gestion des données avec TileMill Intégration de données : les principes TileMill intègre les formats suivants : Shapefile CSV SQLite PostGIS TileMill peut normalement détecter automatiquement le système de projection natif de la couche de données à intégrer. Si ce n est pas le cas, il convient de le préciser manuellement. NB : cliquer sur Save and style pour pouvoir modifier le style de la couche dans CartoCSS une fois celle-ci importée.
Gestion des données avec TileMill Intégration de données : à partir d un tableur Parmi les formats disponibles, TileMill permet l intégration de fichiers tabulaires (.CSV ou.txt). Ces fichiers doivent présenter les caractéristiques suivantes : La première ligne doit contenir le nom des colonnes Présence de colonnes contenant les coordonnées géographiques des positions à localiser sur la carte Le nom de ces colonnes doit être explicite (longitude et latitude par ex.) Si les positions sont localisées par des adresses ou des noms de lieux, elles doivent être géolocalisées au préalable. Exemple avec un fichier de l USGS [8] recensant les tremblements de terre [9] [8] : http://earthquake.usgs.gov/ [9] : http://earthquake.usgs.gov/earthquakes/catalogs/eqs7day-m2.5.txt
Gestion des données avec TileMill Intégration de données : à partir d un fichier Shapefile TileMill permet également l intégration de données au format SIG PostGIS Shapefile Exemple avec le fichier SHP Natural Earth des lacs mondiaux [10] [10] : http://www.naturalearthdata.com/downloads/10m-physical-vectors/
Gestion des données avec TileMill Personnalisation de l apparence (CartoCSS) TileMill permet de personnaliser l apparence de vos données. L apparence des données (ou «style» ou «symbologie») est configurable par l intermédiaire du module CartoCSS. Les paramètres modifiables dépendent du type de données (Point, Ligne ou Polygone). Classiquement on identifie : Couleur de l objet Largeur et Couleur du contour Opacité (Transparence) de l objet Mais les options de personnalisation du style proposées par CartoCSS sont bien plus nombreuses. Elles sont détaillées : Dans TileMill, via le bouton Dans une documentation en ligne spécifique [11] [11] : http://mapbox.com/carto/api/2.1.0/
Gestion des données avec TileMill Personnalisation de l apparence (CartoCSS) Affichage de la valeur d un attribut de la couche de données dans une étiquette. Exemple : afficher le nom des pays du monde. #countries { } ::label { text-face-name:'arial Bold'; text-name:"[name]"; text-size:10; text-halo-fill:#fff; text-halo-radius:1; } TileMill permet d afficher les objets d une couche de données en fonction de la valeur d un attribut défini dans un critère de sélection (outil de «filtre»). Exemple : afficher uniquement les tremblements de terre dont la magnitude dépasse 5. #earthquakes [Magnitude >= 5.0] { }
Gestion des données avec TileMill Personnalisation de l apparence (CartoCSS) TileMill permet aussi d attribuer un style selon la valeur des attributs des objets (outil de «classification»). Exemple : attribuer une couleur aux polygones des pays du monde selon leur population. #countries { [POP_EST >= 0] { polygon-fill: #fff; } [POP_EST >= 1000000] { polygon-fill: #0f0; } [POP_EST >= 10000000] { polygon-fill: #ff0; } [POP_EST >= 50000000] { polygon-fill: #f70; } [POP_EST >= 100000000] { polygon-fill: #f00; } [POP_EST >= 200000000] { polygon-fill: #500; } [POP_EST >= 1000000000] { polygon-fill: #000; } }
Gestion des données avec TileMill Ajout d éléments interactifs Avec TileMill il est possible d ajouter des éléments afin de rendre la carte la plus interactive et la plus personnalisée possible. L outil permet d accéder à l interface de configuration : d une légende : saisir dans la fenêtre de l onglet Legend son texte et sa mise en forme au format HTML. <strong>earthquakes and Lakes</strong><br/>Colour of country indicates population des tooltip = info-bulle s affichant suite à une action de l utilisateur : Passage de la souris au-dessus d un objet (onglet Teaser), Clique de la souris sur un objet (onglet Full), Dans les deux cas, sélectionner dans la liste déroulante des couches de données, celle que l on souhaite enrichir de tooltip, puis saisir au format HTML le formatage du tooltip avec les attributs que l on souhaite afficher. {{{Magnitude}}} Magnitude Earthquake<br/>{{{Datetime}}} des hyperliens : saisir dans le champ URL de l onglet Location, l adresse du site Internet à ouvrir suite à un clic sur l objet. Cette URL peut être personnalisable avec une valeur d attribut. http://www.exemple.pays-du-monde/{{{name}}}.html
Publication et exploitation Export de projets TileMill vers des applications existantes TileMill permet l export de données aux formats : PNG PDF SVG MBTiles MapNik XML TileMill exporte les cartes dans le système de projection 900913, également connu sous le nom de «Web Mercator» Interopérabilité avec de nombreux outils et applications utilisant ces standards (API Google Maps, OpenLayers, etc.)
Publication et exploitation Publication de cartes sur MapBox, intégration sur site web La publication des cartes créées avec TileMill sur MapBox peut se faire de manière : Manuelle : via l export de la carte au format MBTiles. Les différentes étapes à mener sont : Paramétrage du fichier à exporter Nom et Description de l export Nom du fichier MBTiles à générer Niveaux de zoom à créer Centre et emprise de la carte Sauvegarde du fichier MBTiles exporté sur son ordinateur Intégration sous MapBox de ce fichier par l option UPLOAD LAYER. L utilisateur sélectionne alors le fichier MBTiles dans son explorateur de fichiers et choisit, par l intermédiaire de la liste déroulante disponible : De créer une nouvelle carte à partir de ce fichier en sélectionnant New Map De mettre à jour une carte existante avec ce fichier en sélectionnant le nom de celle-ci
Publication et exploitation Publication de cartes sur MapBox, intégration sur site web La publication des cartes créées avec TileMill sur MapBox peut se faire de manière : Automatique : l option Export > Upload de TileMill permet d exporter directement un projet dans MapBox. Si la carte existe déjà, celle-ci est mise à jour Sinon, création d une nouvelle carte correspondante à ce projet Il convient au préalable d autoriser TileMill à communiquer avec son compte MapBox : Dans l onglet Setings, cliquer sur : Saisir les paramètres de vote compte MapBox
Publication et exploitation Publication de cartes sur MapBox, intégration sur site web Une fois intégrés dans MapBox les projets TileMill se présentent sous forme de cartes. Il est alors possible de : Configurer l interface cartographique résultante en paramétrant : Le niveau de confidentialité Les fonctionnalités disponibles Contrôles de zoom Tooltip Légende Liens de Partage Zoom scrollé Géocodeur Exporter : menu EMBED Intégration grâce à l API MapBox. Cette API permet notamment de créer des sites Internet suivant des templates disponibles. Intégration dans votre site web grâce au lien HTML embed qu il suffit alors de copiercoller dans le code HTML de la page web de votre site.
Publication et exploitation Exemples d applications Blog utilisateurs : http://www.mapbox.com/blog Cartographie de l ouragan Sandy http://mapbox.com/blog/mapping-sandy/ Recueil d applications existantes : http://www.mapbox.com/showcase Suivi des actes terroristes de la Lord s Resistance Army (LRA) http://www.lracrisistracker.com/ Suivi des actualités relatives à la déforestation amazonienne http://www.infoamazonia.org/
Merci de votre attention Questions? Xavier Chaze xavier.chaze@mines-paristech.fr Mines ParisTech CRC