Diaporama

Centre de recherche sur les Risques et les Crises
Présentation et prise en main de MapBox
AT5 : Web mapping 1
Xavier Chaze – [email protected]
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/
Présentation de MapBox
Fonctionnement et logique
DESIGN
– Personnaliser les styles cartographiques
– Représenter le relief grâce à un Modèle Numérique de Terrain intégré
– Ajouter des markers
PUBLICATION
• MapBox permet notamment de :
– 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 – [email protected]
Mines ParisTech – CRC