Fin 2011 Google lançait sa version WebGL de Google Maps en version expérimentale. Quelques temps plus tard elle était proposée par défaut aux utilisateurs ayant un navigateur compatible.

A l’époque j’avais pas mal pesté contre cette version et notamment dans des lieux où je n’avais accès qu’a des machines à la configuration très modeste et des navigateurs obsolètes (ahh, le monde des collectivités…). Depuis ça a pas mal changé, les navigateurs prennent mieux en charge le WebGL et la technologie est devenue plus mature.

Le WebGL permet de tirer partie de la puissance graphique de la machine cliente afin de pouvoir afficher de façon fluide des éléments complexes pour de la 3D par exemple ou encore des cartes. Il est ainsi possible de déléguer des rendus complexes au client et non plus au serveur ce qui allège donc considérablement sa charge et offre d’autres avantages.

De manière classique, pour afficher un fond de plan Openstreetmap sur une carte dynamique, on utilise des tuiles d’images générées sur un serveur à partir des données OSM que l’on ‘stylise’ en utilisant habituellement Mapnik. De cette façon, à chaque déplacement de la carte ou à chaque zoom, les tuiles de la zone avec le style défini sont générées par le serveur. Pour les 20 niveaux de zoom, il y a donc 20 « styles » adapté à une echelle spécifique, ce sont donc des images statiques sans possibilité de transition fluide entre les zoom.

Avec le WebGL, c’est le navigateur qui va s’occuper du rendu, le serveur va se contenter de lui fournir des données vectorielles. Ainsi les transitions deviennent possibles, les éléments grossissent et apparaissent de manière fluide durant un zoom, la rotation de la carte devient possible tout en conservant l’orientation horizontale des étiquettes ou des pictos. Un style ou une animation peut également être appliqué directement sur le client sans aucune surcharge pour le serveur.

Dans ce monde relativement récent deux startups sont à la pointe :

Les données

Pour la transmission des données, Mapbox, Mapzen ou encore Google utilisent le PBF pour les compresser. C’est ce que l’on peut voir sur Google Maps en regardant l’onglet Network dans l’outil de développement.

network-pbf-googlemaps

Mapzen et Mapbox proposent un service de flux des données openstreetmap.  Pour le premier il n’y apas de limitation du nombre de cartes affichés mais il faut tout de même se procurer une clé. Pour Mapbox, si vous dépassez les 50 000 cartes vous devrez passer à la caisse.

Il est possible d’afficher les données provenant de Mapzen dans Mapbox GL mais malheuresement le contenu de celles-ci diffèrent entre les deux services. Il sera donc impossible d’utilisé une feuille de style fournit par mapbox sans l’adapter.

Heureusement il existe d’autres alternatives pour ne pas dépendre de Mapbox ou Mapzen. OSM2Vectortiles fourni tous les éléments pour créer son propre serveur de « vectortile ». Ils proposent également un service qu’ils hébergent ne nécessitant pas de clé. Petit bémol, OSM2Vectortiles ne propose pas les données ‘terrain’ (le relief quoi) contrairement à Mapbox. Dommage.

La théorie c’est bien, mais le concret c’est mieux!

MapBox GL en utilisant des données alternatives

ll est donc possible d’héberger ses propres données où si d’utiliser un autre flux tout en utilisant Mapbox GL mais il va falloir faire quelques modifications. Par défaut, les polices (fonts) et les pictogrammes (sprites) sont hébergés sur le serveur Mapbox et nécessite donc un clé pour y accéder. Pour s’en affranchir on peut les placer directement sur le serveur (dans le répertoire « assets » dans notre cas), OSM2Vectrotilesnous fournit encore une fois tout cela. Si vous souhaitez générer des fonts supplémentaires compatibles (en pbf) vous pouvez utiliser le script build-glyphs.

Nous sommes prêt! Nous allons modifier le style basic-v8 que nous avons préalablement déposé dans le répertoire « styles ».

Les lignes :

"sources": {
  "mapbox": {
    "url": "mapbox://mapbox.mapbox-streets-v6",
    "type": "vector"
  }
},
"sprite": "mapbox://sprites/mapbox/basic-v8",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",

Après

Deviennent :

"sources": {
  "mapbox": {
     "url": "http://osm2vectortiles.tileserver.com/v1.json",
    "type": "vector"
  }
},
  "sprite": "assets/sprite",
  "glyphs": "assets/font/{fontstack}/{range}.pbf",

Après

Du côté de la page principale, rien de compliqué, on initialise la carte et on lui indique que l’on veut utiliser les style « basic-v8.json »

var map = new mapboxgl.Map({
             container: 'map',      		
             center: [5.72,45.19],
             zoom: 15,
             style: 'styles/basic-v8.json'
         });

Pour changer le style, il suffit de modifier le .json. Par exemple pour que les « road-major » deviennent rouge :

{
  "id": "road_major",
  "type": "line",
  "source": "mapbox",
  "source-layer": "road",
  "filter": [
    "all",
    ["==","$type","LineString"],
    ["in","class","motorway","main"]
  ],
  "layout": {
    "line-cap": "round",
    "line-join": "round"
  },
  "paint": {
    "line-color": "#de2b2b",
    "line-width": {"base": 1.4,"stops": [[6,0.5],[20,30]]}}
},

Les specs détaillés des styles et des sources de données sont accessibles ici.

La démo présente plusieurs styles dont celui avec les routes majeurs en rouge que nous avons modifié plus haut. Le clic droit sert à faire pivoter la carte.

mapboxGL-bright-rotation

Sachez qu’il est possible de personnaliser un style avec Mapbox Studio, tout est expliqué ici.

MapBox GL et Tangram ouvre donc de nouvelles possibilités très interressante mais il manque encore quelques fonctionnalités de base pour pouvoir pleinement les exploiter.Par exemple, ajouter un marker personnalisé sur Mapox GL se révèle être un vrai parcours du combattant là où quelques lignes suffisent sur Leaflet ou encore il semble impossible de faire un drag&drop d’un marker.

Leaflet Mapbox-GL

Vladimir Agafonkin, à mis en place un plugin permettant d’afficher du MapboxGL sur Leaflet mais il semblerait qu’il ne soit pas encore compatible avec la version 1 de Leaflet. Pour le faire fonctionner, rien de très compliqué, il faut juste ajouter le js et le .css de mapbox-gl puis

var gl = L.mapboxGL({
    accessToken: ' ',
    style: 'styles/bright-v8.json' 
}).addTo(map);

Petit détail, même si l’on utilise pas de service Mapbox, il est nécessaire d’indiquer un ‘token’, même vide.

Demo

leaflet-mapboxgl

Sources

Les sources des 2 cartes sont disponibles ici