Centre de recherche sur les Risques et les Crises

Xavier Chaze – xavier.chaze@mines-paristech.fr

MINES ParisTech – CRC

Présentation et prise en main de MapBox AT5 : Web mapping 1

• 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

Sommaire

Fonctionnement et logique

Présentation de MapBox

• 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/

Fonctionnement et logique

Présentation de MapBox

• 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

DE

SIG

N

PU

BL

ICA

TIO

N

Prise en main : inscription

Présentation de MapBox

• Choix d’une configuration parmi l’offre commerciale proposée[2]

[2] : http://mapbox.com/plans/

Prise en main : inscription

Présentation de MapBox

• 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.

Prise en main : interface administrateur

Présentation de MapBox

• 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

Prise en main : interface administrateur

Présentation de MapBox

• 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

• 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.

Prise en main : création d’une carte

Prise en main : création d’une carte

Présentation de MapBox

• 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

Ajout de données sur MapBox

Présentation de 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

Principe de fonctionnement : présentation

Gestion des données avec TileMill

• 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/

Principe de fonctionnement : les principales étapes

Gestion des données avec TileMill

• 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/

Intégration de données : les principes

Gestion des données avec TileMill

• 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.

Intégration de données : à partir d’un tableur

Gestion des données avec TileMill

• 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

Intégration de données : à partir d’un fichier Shapefile

Gestion des données avec TileMill

• 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

• 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/

Personnalisation de l’apparence (CartoCSS)

Personnalisation de l’apparence (CartoCSS)

Gestion des données avec TileMill

• 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] { … }

Personnalisation de l’apparence (CartoCSS)

Gestion des données avec TileMill

• 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; }

}

Ajout d’éléments interactifs

Gestion des données avec TileMill

• 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

Export de projets TileMill vers des applications existantes

Publication et exploitation

• 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 de cartes sur MapBox, intégration sur site web

Publication et exploitation

• 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

• 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 de cartes sur MapBox, intégration sur site web

Publication de cartes sur MapBox, intégration sur site web

Publication et exploitation

• 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 copier-

coller dans le code HTML de la page web de votre site.

Exemples d’applications

Publication et exploitation

• 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