Mapbox Studio (CartoCSS)

+

Mapbox StudioCartoCSS

# Traitements géomatiques avancés

Master 2 SIGAT

Hiver 2016

@Boris Mericskay

+Mapbox

� A la manière de CartoDB, MapBox est une entreprise américaine qui fournit une panoplie de service autour de la cartographie en ligne

� Service de stockage et de diffusion de données géographique

� Services de mise en forme des données

� API et librairie en Javascript pour mettre en place des applications en ligne

� SDK pour le développement d’applications mobiles (Android/IOS)

� Des services Web spécifiques

� Mapbox Studio, logiciel de CartoCSS

M2 SIGAT # Mapbox et Mapbox Studio

+Mapbox

� Une entreprise en pleine expansion

� De clients de plus en plus nombreux


+Objectifs séances

� Séance 1 (lundi)

� Familiarisation avec l’application de cartographie en ligne de Mapbox

� Formation au logiciel de CartoCSS Mapbox Studio

� Création de fond de carte personnalisés

� Concours de fond de carte

� Séance 2 (mercredi)

� Utilisation de l’API et de la bibliothèque javascript

� Programmation en javascript

� Mise en place de diverses applications carto Web


+Mapbox


+Découvrir Mapbox


+Découvrir Mapbox

� Création de projets (similaire a CartoDB)

� Importer les données

� Mettre en forme les données

� Configurer les fonctionnalités de la carte

� Diffuser votre carte


+Mapbox Studio


+Mapbox Studio

� Mapbox Studio est un logiciel de CartoCSS

� Il permet de créer des cartes originales

� Il permet aussi de créer des fonds de cartes personnalisés

1. Télécharger MapBox Studio

https://www.mapbox.com/mapbox-studio-classic/#win64

2. Créer un compte


+Projet dans Mapbox Studio

� Le premier exercice consiste à créer une carte

� Il faut d ’abord importer les données

� Limites des départements français (kml)

� Radars automatiques (shape) Avant d’importer ce fichier il faut le

préparer (ne garder que les radars fixes)

� Puis il va falloir mettre en forme ces données en CartoCSS


+Importer les données


1

2



34

+Enregistrer vos données


2

1

+Exporter vos données sur Mapbox


2

1

+Exporter vos données sur Mapbox

+Vos données sont en ligne


Copier l’ID de vos données

+Ajouter vos données à un fond de carte


1

2

+


Ajouter vos données à un fond de carte

2/ Coller l’ID de vos données (pas

d’espace après la virgule)

1/ Il faut ajouter vos

données à votre projets

+


Ajouter vos données à un fond de carte

Vérifier que vos données sont bien

importées dans votre carte

+CartoCSS


1/ Ajouter un

nouveau style

2/ Nommer le

nouveau style

+CartoCSS - points


1/ Spécifier le

jeu de données

2/ Paramètres de

mise en forme

des données

3/ Actualiser l’affichage à chaque

modifications (Ctrl + R)

4/ Paramétrer les niveaux de zoom

+CartoCSS - points

� Code CSS de base pour afficher des points

#nomdelacouche{

marker-fill-opacity: 0.9;

marker-line-color: #FFF;

marker-line-width: 1;

marker-line-opacity: 1;

marker-placement: point;

marker-type: ellipse;

marker-width: 10;

marker-fill: #FF6600;

marker-allow-overlap: true;

}

+CartoCSS - polygones

#nomdelacouchepolygone{

polygon-fill: #136400;

polygon-opacity: 0.2;

polygon-comp-op: multiply;

line-color: #FFF;

line-width: 1.5;

line-opacity: 1;

}

+CartoCSS niveau de zoom

� Configurer l’affichage des radars et des départments pour plusieurs niveaux de zoom

� Documentation:

https://www.mapbox.com/tilemill/docs/guides/advanced-map-design/


…

[zoom=13]{marker-width:35;}





}

+CartoCSS

Documentation et tutoriels pour Mapbox Studiohttps://www.mapbox.com/help/getting-started-studio/

Documentation sur le CartoCSS

https://www.mapbox.com/tilemill/docs/crashcourse/styling/

http://live.osgeo.org/fr/quickstart/tilemill_quickstart.html

Vous pouvez aussi mettre en forme vos données sous CartoDB et récupérer le code de CartoCSS


+Aller plus loin en CartoCSS

� L’objectif est ici de créer une carte de densité à partir des radars automatiques

� Cette forme de visualisation est particulièrement efficace pour représenter des données nombreuses

� Dans l’idée il s’agit d’ajouter des styles CSS pour la couche des radars en utilisant des couleurs, de valeurs et des effets différente

� Approche exploratoire dans la représentation de données spatiales



� Possibilité d’exporter votre carte en image

� Intérêts du CartoCSS ??? Une personnalisation totale (par le code) de la

représentation des données spatiales ;)


� Visualiser des données quantitatives

�� le nombre de vélos par stations Velib à Paris

+

Créer un fond de carte

personnalisé avec

Mapbox Studio classic


+Créer un fond de carte


� Le vrai intérêt de Mapbox studio est la création de fond de carte personnalisés

� Ces fonds de cartes s’appuient sur les données OSM

� Vous allez configurer l’affichage des données de votre fond de carte (routes, hydrographie, étiquettes,…)


� Laisser libre court à votre imagination et votre créativité

pour produire des fonds de cartes originaux !

https://www.mapbox.com/gallery/

+Interface de configuration


+Visualisation multiscalaire


Sauvegarder une vue (X,Y et zoom)Visualiser les vues

sauvegardées

+Visualisation multiscalaire


Combiner 3 vues à différents niveau de zoom

� L’idée est de faire un fond de

carte utilisable a différents

niveaux de zoom

+Modifier le style général


Vous modifier ici la couleur des

terres, de l’eau, des bois, des

zones urbanisées, etc.

+Modifier les routes


Vous modifier ici tout ce qui

concerne les routes

+Modifier les étiquettes


Vous modifier ici les étiquettes

+Exemple de mon fond de carte


+Sauvegarder son fond de carte


+Nommer et exporter en style


+Utiliser son fond de carte

� Récupérer l’ID du fond de carte

�Récupérer la clef d’accès (Access token)

+Importer dans CartoDB

� Ajouter un fond de carte personnalisé

+Importer dans QGIS

� http://blog.adrienvh.fr/2014/03/11/qgis-afficher-une-carte-mapbox/

� https://cartoblography.wordpress.com/2015/04/28/using-custom-mapbox-baselayers-in-qgis/

� http://stackoverflow.com/questions/22321251/open-a-mapbox-map-in-qgis

� Voir Luck Gentil ;)

+

Créer un fond de

carte personnalisé

avec Mapbox Studio



� Documentation très complète

https://www.mapbox.com/help/#design-a-map

https://www.mapbox.com/help/getting-started-mapbox-studio-2/


� Créer un nouveau style dans Mapbox Studio

� Sélectionner un style existant sur lequel vous baser


Interface d’accueil


Zoomer sur une zone


Cliquer sur les entités puis modifier leur symbologie (routes, bâtiments, bois,…)


Modifier les niveaux de zoom pour l’affichage


� Changer l’orientation et l’inclinaison de la carte


� Quand vous êtes satisfait de votre fond de carte publier le !

+Partager un fond de carte

+Comparons nos fond de cartes !

� Partager votre fond de carte (prénom et URL)

https://lite5.framapad.org/p/Fonds_de_carte


Mapbox Studio (CartoCSS)

Documents

Transcript of Mapbox Studio (CartoCSS)