Introduction à la bibliothèque JavaScript MapboxGL
@Boris Mericskay
Objectifs atelier
• Publication de données spatiales sur le Web
• De la page HTML à l’application en ligne
• Familiarisation avec le Javascript, l’HTML et le CSS
Prise en main de Mapbox GL
Coder = LEGO
• Vous aller à partir de maintenant « jouer » au LEGO en assemblant
des lignes de codes pour construire des cartes sur le Web!
MapBoxGL
MapBoxGL est une bibliothèque JavaScript libre de cartographie en
ligne open-source utilisant le WebGL pour l'affichage (tuiles
vectorielles, affichage 3D)
[Link]
Exemples: [Link]
Tutoriels : [Link]
L’écosystème Mapbox
• Mapbox Studio
• Créer des fonds de carte (style)
• Héberger des jeux de données (tilesets)
• Sous forme de tuiles vectorielles
• API [Link]
• Bibliothèque JavaScript pour créer des
cartes Web
• La mobilisation de MapboxGL nécessite
une clef d’accès = besoin d’un compte
Mapbox
Créer un compte Mapbox
[Link]
Limitations d’un compte gratuit
Mapbox Studio
• Environnement en ligne de gestion des :
• Fonds de carte (Styles)
• Jeux de données (Tilesets)
• Des clefs d’accès à l’API (Account)
Mapbox Studio
• Créer et gérer des jeux de données (Tilesets)
Importer des données dans Mapbox Studio
• Mapbox studio permet de stocker 50GO de données vectorielles et
matricielles
Mapbox Studio
• Créer et gérer des fonds de cartes ( Styles)
Mapbox Studio
• Créer et gérer ses clefs d’accès à l’API (Access tokens)
Template de départ
<!DOCTYPE html>
[Link]
<html>
<head>
<meta charset='utf-8' />
<title>MapboxGL</title>
<link href="[Link] rel="stylesheet">
<script src="[Link]
<style>
#map {position:absolute; top:0; bottom:0; width:100%;}
</style>
</head>
<body>
<div id='map'></div>
<script>
// AccesToken
[Link] = '[Link]-
50cCwIwe1Om58AHQA';
// Configuration de la carte
var map = new [Link]({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9', // Fond de carte
center: [-1.68, 48.12], // lat/long
zoom: 15, // zoom
pitch: 50, // Inclinaison
bearing: -10 // Rotation
});
</script>
</body>
</html>
Template de départ
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>MapboxGL</title>
<script src="[Link]
<link href="[Link] rel="stylesheet" /> Appel API MapboxGL
<style>
#map {position:absolute; top:0; bottom:0; width:100%;} Style de la carte
</style>
</head>
<body>
<div id='map'></div>
<script>
// AccesToken
[Link] = Clef d’accès à l’API
'pk.eyJ1IjoibmluYW5vdW4iLCJhIjoiY2pjdHBoZGlzMnV4dDJxcGc5azJkbWRiYSJ9.o4dZRrdHcgVEKCveOXG1YQ';
// Configuration de la carte
var map = new [Link]({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9', // Fond de carte
center: [-1.68, 48.12], // lat/long Fond de carte
zoom: 15, // zoom
pitch: 50, // Inclinaison Niveau de zoom
bearing: -10 // Rotation Centrage de la carte (X,Y)
}); Inclinaison de la carte
</script> Rotation de la carte
</body>
</html>
Coder en ligne ou en local
• Utiliser un éditeur de code installé (notepad, ATOM,…)
OU
• Utiliser un éditeur de code en ligne
[Link] …
Les fonds de carte
Changer de fond de carte
• Les fonds de cartes de Mapbox > tuiles vectorielles
style: 'mapbox://styles/mapbox/dark-v11',
Changer de fond de carte
• Aller plus loin avec la documentation
[Link]
[Link]
[Link]
Changer de fond de carte
Mettre un fond de carte personnel
• Mettre votre clef d’accès personnelle à la place de celle fournie
Incorporer un fond de carte personnel
• Récupérer l’URL de votre fond de carte personnel
Incorporer un fond de carte personnel
Première carte [Link]
[Link]
Où trouver des fonds de carte libre
Il existe plusieurs flux de tuiles vectorielles en libre accès
Format .json / Basés sur les données OSM ou IGN
• [Link]
• [Link]
• [Link]
• [Link]
Ajouter des fonds de carte externes
[Link]
A placer à la fin du script !
Ajout d’outils
// Boutons de navigation [Link]
js/api/markers/#geolocatecontrol
var nav = new [Link](); [Link]
[Link](nav, 'top-left'); js/api/markers/#navigationcontrol
// Ajout Echelle cartographique
[Link](new [Link]({ [Link]
maxWidth: 120, js/api/markers/#scalecontrol
unit: 'metric'}));
// Bouton de géolocalisation
[Link](new [Link] [Link]
({positionOptions: {enableHighAccuracy: true}, js/api/markers/?size=n_10_n#geolocatecontrol
trackUserLocation: true,
showUserHeading: true}));
Ajouter des données
OSM, données hébergées et données en local
Ajouter un marqueur
• Ajouter marqueur + définir contenu et Popup
// Ajout Marqueur
const marker1 = new [Link]()
.setLngLat([-1.669099, 48.114799])
.addTo(map);
// Contenu de la popup du marqueur
var popup = new [Link]({ offset: 25 })
.setHTML("<h3>Ma première carte Mapbox</h3><p>Trop cool !</p>");
// Associer Contenu et Marqueur
[Link](popup);
[Link]
Ajout de données OSM
• MapboxGL permet aussi de mobiliser des données OSM
• Le jeux de données (tileset) Mapbox Streets v8 propose un ensemble de
couches OSM (routes, bâtiments, labels, hydrologie,…)
ID du tileset OSM
Nom d’une couche
Ajout de données OSM
• Documentation
[Link]
[Link]('load', callback) est un événement dans
Ajout de données OSM Mapbox GL JS qui se déclenche lorsque la carte est
entièrement chargée et prête à être utilisée. Cela inclut le
chargement de la carte de base, des tuiles de carte, des
sources de données, des couches et des styles.
• Ajouter cette commande à la fin du script
On appel ici les routes issues d’OSM
[Link]('load', function () {
[Link]('mapbox-streets-v8', {
type: 'vector',
url: 'mapbox://[Link]-streets-v8'});
[Link]({
"id": "Routes",
"type": "line",
"source": "mapbox-streets-v8",
"layout": {'visibility': 'visible'},
"source-layer": "road",
"paint": {"line-color": "#FF7F50", "line-width": 1}
});
});
Ajout de données OSM
• Ajouter cette commande à la fin du script
On appel ici les routes
[Link]('load', function () {
[Link]('mapbox-streets-v8', {
type: 'vector', Définition de la source de données
url: 'mapbox://[Link]-streets-v8'});
[Link]({
"id": "Routes",
"type": "line",
"source": "mapbox-streets-v8", Couche de données
"layout": {'visibility': 'visible'},
"source-layer": "road",
"paint": {"line-color": "#FF7F50", "line-width": 1}
});
});
Ajout de données OSM
Ajout de données OSM
• Ajout du réseau hydrographique
• Ajouter à la suite de l’appel de la couche des routes juste un appel de couche
car la source est la même que pour les routes (mapbox-streets-v7)
// Hydrologie
[Link]({"id": "hydrologie",
"type": "line",
"source": "mapbox-streets-v8",
"source-layer": "waterway",
"paint": {"line-color": "#4dd2ff",
"line-width": 6}
});
Gérer fonds de carte ET données !
• Demander de régler le problème à l’IA
• Solution : [Link]
Ajout de données OSM
Filtrer des données OSM
• Il est possible de filtrer les données pour l’affichage
• On peux par exemple filtrer les routes selon leur classe
Filtrer des données OSM
• Je ne veux afficher que les routes à double sens
[Link]({
"id": "routes",
"type": "line",
"source": "mapbox-streets-v7",
"source-layer": "road",
"filter": ['==', 'class', 'trunk'],
"layout": {'visibility': 'visible'},
"paint": {"line-color": "#ff8533", "line-width": 1.3}
});
Filtrer des données OSM
• Je ne veux afficher que les routes principale (double sens,
principale,…)
[Link]({
"id": "routes",
"type": "line",
"source": "mapbox-streets-v7",
"source-layer": "road",
"filter": ["all", ["in", "class", "motorway", "trunk", "primary"]],
"layout": {'visibility': 'visible'},
"paint": {"line-color": "#ff8533", "line-width": 1.3}
});
Ajout de données OSM
• Ajout les bâtiments (ajouter juste un appel de couche car la source
est la même que pour les routes)
// Batiments
[Link]({
"id": "batiments",
"type": "fill",
"source": "mapbox-streets-v8",
"source-layer": "building",
"paint": {"fill-color": "#FEFEFE",
"fill-opacity": 0.8}
});
Exemple
[Link]
Ajout de données personnelles
• Première étape charger des données comme des Tilesets dans le
Studio de Mapbox (csv, geojson, gpx, kml, shapefile zippé)
• Intégrer le jeu de données des arrêts de bus et celui de la base équipements
Ajout de données personnelles
• Aller chercher les infos dans le studio de Mapbox (Tilesets)
Ajout de données personnelles
//Mes datas
[Link]('nomdelasource', {
type: 'vector',
url: 'mapbox://' iddutileset'});
[Link]({
'id': 'nomgenerique',
'type': 'circle',
'source': 'nomdelasource ',
'source-layer': 'nomdelacouche',
'layout': {'visibility': 'visible'},
'paint': {'circle-radius': {'base': 1.5,'stops': [[13, 2], [22, 60]]}, 'circle-color': '#f31616',}, minzoom:10
});
Ajout de données personnelles
ID de votre Tileset
Nom de la couche
Ajout des arrêts de bus
// Arret de bus
[Link]('Arrets', {
type: 'vector', Bien renseigner l’ID de votre Tilesets
url: 'mapbox://ninanoun.58widelk'});
[Link]({
'id': 'Arrets',
'type': 'circle', Bien renseigner le nom la couche du tileset
'source': 'Arrets',
'source-layer': 'Bus-5ypx1k',
'layout': {'visibility': 'visible'},
'paint': {'circle-radius': {'base': 1.5,'stops': [[13, 2], [22, 60]]}, 'circle-color': '#f31616',}, minzoom:12
});
Ajout des arrêts de bus
Ajout la couche équipements publics
// Equipements publics
[Link]('Equipements', {
type: 'vector',
url: 'mapbox://ninanoun.4xcn5ude'}); Bien renseigner l’ID de votre Tilesets
[Link]({
'id': 'Equipements',
'type': 'circle',
'source': 'Equipements',
'source-layer': 'base-orga-var-6k0zky', Bien renseigner le nom de la couche a afficher
'layout': {'visibility': 'visible'},
'paint': {'circle-radius': {'base': 1.5,'stops': [[13, 2], [22, 60]]}, 'circle-color': '#16f337'}, minzoom:14
});
Ajout la couche équipements
Mettre en forme les données
• Pour personnaliser la symbologie des données se référer à la
documentation
[Link]
Type d’objets géographiques dans MapboxGL :
• circle (point)
• symbol (point avec pictogramme)
• line (ligne)
• fill (polygone)
• fill-extrusion (polygone 3D)
• …
Mettre en forme les données
• Changer la taille
• Changer la couleur
[Link]
• Définir des niveaux de zoom (max/min)
'paint': {'circle-radius': {'base': 1.5,'stops': [[13, 2], [22, 60]]}, 'circle-color': '#3399ff'}, minzoom:14
Ajouter les limites de propriétés
Ajouter les limites de propriétés
//Proprietes
[Link]('Proprietes', {
type: 'vector',
url: 'mapbox://ninanoun.a4kdgiot'
});
[Link]({
'id': 'Proprietes',
'type': 'line',
'source': 'Proprietes',
'source-layer': 'limites_proprietes',
'layout': {'visibility': 'visible',
'line-join': 'round','line-cap': 'round'},
'paint': {'line-color': '#FFFFFF', 'line-width': 0.5}
});
Ajouts de données 3D – OSM Bâti
// Ajout batiments 3D OSM
[Link]({
'id': 'Batiments_3D',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {'fill-extrusion-color': '#555555', 'fill-extrusion-height':
{'type': 'identity','property': 'height'},
'fill-extrusion-base': {'type': 'identity','property': 'min_height'},
'fill-extrusion-opacity': 0.8
}
});
Ajouts de données 3D –BDTOPO Bâti
//BATIMENTS
[Link]('Batiments', {
type: 'vector',
url: 'mapbox://mastersigat.a4h4ovrl'
});
[Link]({
'id': 'Batiments',
'type': 'fill-extrusion',
'source': 'Batiments',
'source-layer': 'batiIGN-8zf03o',
'layout': {'visibility': 'visible'},
'paint':
{'fill-extrusion-color': '#A9A9A9',
'fill-extrusion-height':{'type': 'identity','property':
'HAUTEUR'},
'fill-extrusion-opacity': 0.90,
'fill-extrusion-base': 0}
});
Exemple
[Link]
Ajouter des données en local / en ligne
• Il est possible de mobiliser des jeux de données (Geojson) stockés en
local (même dossier que la page html) ou accessible via une URL
[Link]("load", function() { [Link]("load", function() {
//Couche EPCI //Couche EPCI
[Link]({ [Link]({
id: "epci", id: "epci",
type: "line", type: "line",
source: {type: "geojson", source: {type: "geojson",
data: "./[Link]" }, data: 'URL'
paint: {'line-color': '#000000',
paint: {'line-color': '#000000', 'line-width':1}
'line-width':1} });
}); });
});
Ajouter des données issues de GitHub/Dropbox
[Link] [Link]
Ajout de tuiles vectorielles externes
• [Link]
Ajouter des données externes
• Données sur un portail opendata (Geojson)
// Ajout lignes de metros
[Link]('lignes', {
type: 'geojson',
data: '[Link]
lignes/exports/geojson'
});
[Link]({
'id': 'lignesmetros',
'type': 'line',
'source': 'lignes',
'paint': {'line-opacity': 0.7, 'line-width': 3.5,
'line-color': 'red'}
});
Ajouter des données externes
• Données sur Github (Geojson)
// Ajout lignes de metros
[Link]('lignes', {
type: 'geojson',
data: '[Link]
});
[Link]({
'id': 'lignesmetros',
'type': 'line',
'source': 'lignes',
'paint': {'line-opacity': 0.7, 'line-width': 3.5,
'line-color': 'red'}
});
Ajout du cadastre (flux de tuiles vectorielles)
[Link]
Ajout du cadastre (flux de tuiles vectorielles)
// AJOUT DU CADASTRE ETALAB
[Link]('Cadastre', {
type: 'vector',
url: '[Link] });
[Link]({
'id': 'Cadastre',
'type': 'line',
'source': 'Cadastre',
'source-layer': 'parcelles',
'layout': {'visibility': 'visible'},
'paint': {'line-color': '#000000'},
'minzoom':16, 'maxzoom':19 });
[Link]('communeslimites', 'line-width', ["interpolate",["exponential",1],["zoom"],16,0.3,18,1]);
Ajouter des données externes / IGN
[Link]
Ajouter des données externes / IGN
• Données en tuiles vectorielles
// Ajout BDTOPO
[Link]('BDTOPO', {
type: 'vector',
url: '[Link]
minzoom: 15,
maxzoom: 19
});
[Link]({
'id': 'batiments',
'type': 'fill-extrusion',
'source': 'BDTOPO',
'source-layer': 'batiment',
'paint': {'fill-extrusion-color': '#A9A9A9',
'fill-extrusion-height':{'type': 'identity','property': 'hauteur'},
'fill-extrusion-opacity': 0.90,
'fill-extrusion-base': 0}
});
Ajouter des données externes
[Link]
Ajouter des données externes via des API’s
• URL des API’s
• Contour d’une commune: [Link]
• RPG : [Link]
• PLU : [Link]
• Parkings relais : [Link]
etat-tr/api/
• VLS : [Link]
• Besoin de jQuery ([Link]
<script src="[Link] ></script>
API Carto Cadastre
• Contours commune: [Link]
dataCadastre = '[Link]
[Link]( [Link](dataCadastre)).done(function(json) {
for (i = 0; i < [Link]; i++) {
[Link][i].geometry = [Link][i].geometry;
};
[Link](
{'id': 'Contourcommune',
'type':'line',
'source': {'type': 'geojson','data': json},
'paint' : {'line-color': 'black',
'line-width':2.5},
'layout': {'visibility': 'visible'},
});
});
API Carto RPG
• RPG : [Link]
dataRPG =
'[Link]
1.647%2C48.146%5D%7D&_limit=100';
[Link]( [Link](dataRPG)).done(function(json) {
for (i = 0; i < [Link]; i++) {
[Link][i].geometry = [Link][i].geometry;
};
[Link](
{ 'id': 'RPG',
'type':'fill',
'source': {'type': 'geojson','data': json},
'paint' : {'fill-color': 'red'},
'layout': {'visibility': 'none'}
});
});
API Carto GPU
• PLU : [Link]
dataPLU = '[Link]
[Link]([Link](dataPLU)).done(function(json) {
// Filtrer les entités pour ne garder que celles avec typezone = 'U'
var filteredFeatures = [Link](function(feature)
{return [Link] === 'N';});
// Créer un objet GeoJSON avec les entités filtrées
var filteredGeoJSON = { type: 'FeatureCollection', features: filteredFeatures};
[Link]({
'id': 'PLU',
'type': 'fill',
'source': {'type': 'geojson',
'data': filteredGeoJSON},
'paint': {'fill-color': 'green',
'fill-opacity': 0.5},
});
});
API STAR
• Parkings relais : [Link]
$.getJSON('[Link]
function(data) {var geojsonData4 = {
type: 'FeatureCollection',
features: [Link](function(element) {
return {type: 'Feature',
geometry: {type: 'Point',
coordinates: [[Link], [Link]]},
properties: { name: [Link],
capacity: [Link]}};
})
};
[Link]({ 'id': 'Parcrelais',
'type':'circle',
'source': {'type': 'geojson',
'data': geojsonData4},
'paint': {'circle-color': 'orange'}
});
});
API STAR
• VLS : [Link]
tr/api/
• Position des bus en temps réel:
[Link]
position-tr
Ajouter des données OSM via l’API
const ville = "Rennes";
$.getJSON(`[Link] center;`,
function(data) {var geojsonData = {
type: 'FeatureCollection',
features: [Link](function(element) {
return {type: 'Feature',
geometry: { type: 'Point',coordinates: [[Link], [Link]] },
properties: {}};
})
};
[Link]('customData', {
type: 'geojson',
data: geojsonData
});
[Link]({
'id': 'pubs',
'type': 'circle',
'source': 'customData',
'paint': {'circle-color': 'green',
'circle-radius': 5},
'layout': {'visibility': 'none'}
});
});
Ajouter des données externes
• Via des API
[Link]
Interactivité avec les
données
Hover et Click
Interactivité avec les données / Hover
• Hover de d’une couche (survol) = couche arrets
• Cette commande doit être placée à la fin du script
//Interactivité HOVER
var popup = new [Link]({
closeButton: false,
closeOnClick: false });
[Link]('mousemove', function(e) {
var features = [Link]([Link], { layers: ['Equipements'] });
// Change the cursor style as a UI indicator.
[Link]().[Link] = ([Link]) ? 'pointer' : '';
if (![Link]) {
[Link]();
return; }
var feature = features[0];
[Link]([Link])
.setHTML([Link])
.addTo(map);
});
Interactivité avec les données / Hover
Interactivité avec les données / Hover
• Hover de deux couches (survol)
//Interactivité HOVER
var popup = new [Link]({
closeButton: false,
closeOnClick: false });
[Link]('mousemove', function(e) {
var features = [Link]([Link], { layers: ['Arrets'] ['Equipements'] });
// Change the cursor style as a UI indicator.
[Link]().[Link] = ([Link]) ? 'pointer' : '';
if (![Link]) {
[Link]();
return;
}
var feature = features[0];
[Link]([Link])
.setHTML([Link])
.addTo(map);
var feature = features[1];
[Link]([Link])
.setHTML([Link])
.addTo(map);
});
Interactivité avec les données / Hover
Modifier le style d’une Popup
Ajouter dans le Style
.Mypopup .mapboxgl-popup-content {
background-color: black;
color : white;
opacity : 0.7;
}
Ajouter l’appel du CSS dans l’appel de la Popup
var popup = new [Link]({
className: "Mypopup",
closeButton: false,
closeOnClick: false });
Modifier le style du contenu d’une popup
• Reprendre la main avec une syntaxe en html dans le contenu à
afficher
• Soyez très vigilent avec les '
.setHTML('<b> Nom de l’arrêt</b>' + '<br>' + [Link] )
.setHTML('<h3> Nom l’organisme</h3>' + [Link] )
Interactivité avec les données / Click
• Click d’une couche (popup) = couche arrets
//Interactivité CLICK
[Link]('click', function (e) {
var features = [Link]([Link], { layers: ['Arrets'] });
if (![Link]) {
return;
}
var feature = features[0];
var popup = new [Link]({ offset: [0, -15] })
.setLngLat([Link])
.setHTML('<h2>' + [Link] + '</h2><h3>'
+"Mobilier : " + [Link] + '</h3><p>'
+"Accessibilité PMR : " + [Link] + '</p>' )
.addTo(map);
});
[Link]('mousemove', function (e) {
var features = [Link]([Link], { layers: ['Arrets'] });
[Link]().[Link] = ([Link]) ? 'pointer' : '';
});
Interactivité avec les données / Click
Interactivité sur le cadastre Etalab
//Interactivité CLICK sur cadastre
[Link]('click', function (e) {
var features = [Link]([Link], { layers: ['Cadastre'] });
if (![Link]) {
return;
}
var feature = features[0];
var popup3 = new [Link]({ className: "Mypopup2", offset: [0, -15] })
.setLngLat([Link])
.setHTML([Link] + '<br>' + 'Numéro:' + [Link] + '<br>' +
[Link] + ' m2')
.addTo(map);
});
[Link]('mousemove', function (e) {
var features = [Link]([Link], { layers: ['Cadastre'] });
[Link]().[Link] = ([Link]) ? 'pointer' : '';
});
Ajouter une image à la Popup
<img src="[Link] style="width:30%">
Ajouter une image à la Popup
Exemple
[Link]
Menu de gestion des
couches
Ajouter un menu pour gérer les couches
• Première étape: définir le style (CSS) de votre menu
#menu {
width: 20%;
Z-index: 1;
top: 10px;
left: 20px;
position: absolute;
opacity: 0.7;
font-size: 14px;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-
serif;
}
#menu a {
border-radius: 5px;
display: block;
color: #000000;
margin: 5px;
padding: 10px 10px;
text-align: center;
font-weight: bold;
border: solid 2px;
background-color: #FFFFFF;
text-decoration: none;
}
#menu [Link] {
background-color: #CC6600;
color: #FFFFFF;
}
#menu a:hover:not(.active) {
background-color: #CC6600;
color: #FFFFFF;
}
Ajouter un menu pour gérer les couches
• Deuxième étape: créer un Div pour votre menu et placer la dans la
Div de la carte
<div id="menu"></div>
Ajouter un menu pour gérer les couches
• Dernière étape : Ajouter à la fin du script la commande pour
configurer votre menu // Gestion du menu des couches
var toggleableLayerIds = ['Routes', 'Arrets', 'Equipements', 'Proprietes', 'BatimentsIGN' ];
for (var i = 0; i < [Link]; i++) {var id = toggleableLayerIds[i];
var link = [Link]('a');
[Link] = '#';
[Link] = 'inactive';
[Link] = id;
[Link] = function (e) {var clickedLayer = [Link];
[Link]();
[Link]();
var visibility = [Link](clickedLayer, 'visibility');
if (visibility === 'visible') {
[Link](clickedLayer, 'visibility', 'none');
[Link] = '';} else {[Link] = 'active';
[Link](clickedLayer, 'visibility', 'visible');} };
var layers = [Link]('menu'); [Link](link); }
Ajouter un menu pour gérer les couches
Ajouter un menu pour gérer les couches
• Pour personnaliser si les couches sont active ou pas il suffit de le
préciser dans la commande de visibilité layout
• visible = couche active
• none = couche non visible
[Link]({'id': 'Arrets',
'type': 'circle',
'source': 'Arrets',
'source-layer': 'Bus-5ypx1k',
'layout': {'visibility': 'visible'},
[Link]({'id': 'Arrets',
'paint': {'circle-radius': 7, 'circle-color': '#f5f60d'} });
'type': 'circle',
'source': 'Arrets',
'source-layer': 'Bus-5ypx1k',
'layout': {'visibility': ‘none'},
'paint': {'circle-radius': 7, 'circle-color': '#f5f60d'} });
Ajouter un menu pour gérer les couches
[Link]
Menu en mode CheckBox
[Link]
Filtrer des données
Exemple
[Link]
Les onglets géographiques
Onglets géographiques
• L’idée est de proposer des boutons pour aller directement à un
endroit sur la carte
• Première étape rajouter une boutons dans la div map
<div>
<button id='Gare'>Quartier Gare-Centre</button>
<button id='Rennes1'>Université Rennes 1</button>
<button id='Rennes2'>Université Rennes 2</button>
</div>
Onglets géographiques
• Seconde étape, rajouter dans le script (à la fin) la configuration des
onglets géographiques
// Configuration onglets geographiques
[Link]('Gare').addEventListener('click', function ()
{ [Link]({zoom: 16,
center: [-1.672, 48.1043],
pitch: 145,
bearing: -197.6 });
});
Onglets géographiques
Onglets géographiques
• Configurer les deux autres onglets géographique (Rennes 2 et
Rennes1)
Onglets géographiques
[Link]
Exemple itinéraire
[Link]
Animation
[Link] [Link]
Mise en forme poussée de
données spatiales
Pictogrammes, catégorisation, graduation, cercles gradués, extrusion
3D, combinaison de deux variables, cluster, heatmap,…
Mise en forme de données personnelles
• Mobiliser la bibliothèque vectorielle Maki
[Link]
Utiliser des pictogrammes
• Utiliser la symbologie des symboles (pictos)
[Link]('Arrets', {
type: 'vector',
url: 'mapbox://ninanoun.7mtp5buo'});
[Link]({
"id": "Arrets",
"type": "symbol",
"source": "Arrets",
"source-layer": "topologie-des-points-darret-d-9ya955",
"layout": { "icon-image": "bus-15",
"icon-size": 1.5}
});
Utiliser des pictogrammes
[Link]
Graduation couleur
• Configurer les options de mise en forme
• Il faut spécifier la variable mobilisée, le type d'échelle, les valeurs des bornes
et les couleurs
Cercles Polygones
'paint': {'circle-radius': {'base': 1.5,'stops': [[13, 2], [22, 60]]}, 'paint': {'fill-color': {'property': ‘densite',
'circle-color': {property: 'hauteur', 'stops': [[1, '#1a9850'],
type: 'exponential', [10, '#91cf60'],
stops: [[0, '#edf8e9'], [20, '#d9ef8b'],
[5, '#c7e9c0'], [50, '#ffffbf'],
[10, '#a1d99b'], [100, '#fee08b'],
[15, '#74c476'], [150, '#fc8d59'],
[20, '#006d2c']] [200, '#d73027']]},
} 'fill-opacity': 0.9}
Exemple
[Link]
Exemple
[Link]
Catégorisation
• Configurer les options de mise en forme
• Il faut spécifier la variable mobiliser, les valeurs des catégories et les couleurs
'paint': { 'circle-radius': {'base': 1.75,'stops': [[12, 2], [22, 180]]},
'circle-color’: [
'match',['get', 'ethnicity'],
'White', '#fbb03b',
'Black', '#223b53',
'Hispanic', '#e55e5e',
'Asian', '#3bb2d0’,
'#ccc']
}
Exemple
[Link]
Cercles gradués
• Configurer les options de mise en forme
• Il faut spécifier la variable mobiliser et les valeurs des bornes (valeur, taille du cercle)
paint: {'circle-color': '#D49A66',
'circle-radius': {property: ‘population',
type: 'exponential',
stops: [[10, 1],[2000, 20]]},
'circle-opacity': 0.8}
Exemple
[Link]
Cercles gradués avec graduation de couleur
• Configurer les options de mise en forme
• Il faut spécifier la variable mobiliser et les valeurs des bornes (valeur, taille du cercle)
'paint': {'circle-stroke-color': '#000000’,
'circle-stroke-width': 0.6,
'circle-radius': {property: 'capacity', type: 'exponential', stops:
[[0, 0],[100, 20]]},
'circle-color': {property: 'capacity',stops: [
[20, '#2c7bb6'],
[30, '#abd9e9'],
[40, '#ffffbf'],
[50, '#fdae61'],
[60, '#d7191c'],]},
'circle-opacity':0.9}}
);
Exemple
[Link]
Extrusion 3D
• Récupérer le template
[Link]
6742ec2dcf231059e903b144118c79d42
Extrusion 3D
• Configurer les options de mise [Link]({
en forme 'id': 'extrude',
• Il faut spécifier la variable mobilisée et 'type': 'fill-extrusion',
les modalités de l’extrusion (valeur, 'source': 'Carro',
taille de l’extrusion) 'source-layer': 'karook-dcnhdj',
'layout': {'visibility': 'visible'},
'paint': { 'fill-extrusion-color': '#d9ef8b',
'fill-extrusion-height': {
'property': 'Individus',
'stops': [[1, 0],
[10, 100],
[700, 7000]]},
'fill-extrusion-opacity': 0.95,
'fill-extrusion-base': 0 }
});
Extrusion 3D
'paint': {
• Ajouter des couleurs 'fill-extrusion-color': {
'property': 'Individus',
'stops': [
[1, '#1a9850'],
[10, '#91cf60'],
[20, '#d9ef8b'],
[50, '#ffffbf'],
[100, '#fee08b'],
[150, '#fc8d59'],
[200, '#d73027']]
},
'fill-extrusion-height': {
'property': 'Individus',
'stops': [[1, 0],
[10, 100],
…
Exemple
[Link]
Exemple
[Link]
Deux variables
[Link]({
'id': 'extrudecommunes',
'type': 'fill-extrusion',
'source': 'communes',
'source-layer': 'TD1_Data-3kid81',
'layout': {'visibility': 'visible'},
'paint': { 'fill-extrusion-color': {
'property': 'densite',
'stops': [[20, '#1a9850'],
[50, '#91cf60'],
Symbologie graduation de couleur
(densité)
[100, '#d9ef8b'],
[200, '#ffffbf'],
[500, '#fee08b'],
[1000, '#d73027']]},
'fill-extrusion-height': {'property': 'popOK',
'stops': [[100, 10],
[1000, 100],
[200000, 100000]] }, Symbologie extrusion 3D de la population
'fill-extrusion-opacity': 0.8,
'fill-extrusion-base': 0
}
});
Exemple
[Link]
Heatmap
[Link]
Cluster
[Link]
Cluster thématique
[Link]
Synthèse des modes de visualisation
[Link]
MNT en 3D
• Depuis la version 2.x il est possible de mobiliser un MNT mondial et
de l’extruder en 3D + texture du ciel + caméra (animation)
[Link]
js/example/?topic=3D
MNT en 3D
[Link] [Link]
Exemples divers
• [Link]
Exemples Mapbox
[Link]
Tutoriels
[Link]
Aller plus loin
[Link]
[Link]