Demo Leaflet & VectorTiles

La librairie Leaflet peut elle gérer correctement le vecteur tuilé ?

Nativement, Leaflet ne gère pas le vecteur tuilé, mais il existe plusieurs plugins (cf. https://leafletjs.com/plugins.html#vector-tiles):

• mapbox-gl-leaflet
• leaflet.vectorgrid
• mapbox.js

Liste des json :

• osm
• qwant
• planign
• mapbox

HOWTO

1. lancer le serveur local :

>$ node server.js

2. ouvrir le navigateur : http://localhost:9001

1. mapbox-gl-leaflet

Utilisation d'une surcouche mapbox-gl (ISC © Mapbox).

Depôt GitHub

https://github.com/mapbox/mapbox-gl-leaflet

Exemples

exemple1 exemple2 exemple3 exemple4 exemple5 exemple6

✔️ OK

var token = "pk.eyJ1IjoibG93em9uZW5vc2UiLCJhIjoiY2pqNW9pM3BnMDh3YzNxc3d1NDBrOXJiYiJ9.fpJA4mi3Dau4qgEHiqdbpw";

var gl = L.mapboxGL({
    style : "mapbox://styles/mapbox/bright-v9",
    accessToken : token
}).addTo(map);

ou

✔️ OK

var gl = L.mapboxGL({
    style : "data/planign.json",
    accessToken : 'no-token'
}).addTo(map);

Tests avec des fichiers de styles

✔️ OK

exemple

style: 'https://s3-eu-west-1.amazonaws.com/tiles.os.uk/v2/styles/open-zoomstack-outdoor/style.json ',

accessToken: 'no-token'

✔️ OK

exemple

style : "mapbox://styles/mapbox/bright-v9",

accessToken : token

✔️ OK

exemple

style : "data/mapbox.json ",

accessToken : token

✔️ OK

exemple

style : "data/planign.json ",

accessToken: 'no-token'

✔️ OK

exemple

style : "data/qwant.json ",

accessToken: 'no-token'

✔️ OK

exemple

style : "data/osm.json ",

accessToken: 'no-token'

2. leaflet.vectorgrid

⚠️ Notes:

Ce plugin ne permet pas d'exploiter le fichier de style ou le metadata.json !?

Il faudrait donc un parser du type ol-mapbox-style pour transformer les objets de styles mapbox en objet leaflet... : Parser for mapbox-like vector stylesheets

Depôt GitHub

https://github.com/Leaflet/Leaflet.VectorGrid

API:

https://leaflet.github.io/Leaflet.VectorGrid/vectorgrid-api-docs.html#vectorgrid-protobuf

Exemple

⚠️ style unique par defaut (bleu) si aucun n'est renseigné !

cf. exemple

var planign = L.vectorGrid.protobuf("https://vectortiles.ign.fr/rok4server/1.0.0/PLAN.IGN/{z}/{x}/{y}.pbf", {
    rendererFactory: L.canvas.tile,
    attribution: "",
    vectorTileLayerStyles: {
        // howto styles !?
    }
    // token: "",
    // subdomains: "123",
    // key: "",
    // maxNativeZoom : 14
}).addTo(map);

Parser for mapbox-like vector stylesheets

cf. test

Faire un switch entre les 2 objets :

// mapbox vector stylesheets
{
    "id":"landuse_park",
    "type":"fill",
    "source":"mapbox",
    "source-layer":"landuse",
    "filter":[
        "==",
        "class",
        "park"
    ],
    "paint":{
        "fill-color":"#d8e8c8",
        "fill-opacity":1
    }
},

vers

// A plain set of L.Path options.
// https://leafletjs.com/reference-1.5.0.html#path
landuse_park: {
    "fillColor": "#d8e8c8",
    "fillOpacity": 1,
    "fill": false
},

3. mapbox.js

Mapbox JavaScript API, a Leaflet Plugin (Copyright (c), Mapbox All rights reserved)

Depôt GitHub

https://github.com/mapbox/mapbox.js/

API:

https://docs.mapbox.com/mapbox.js/api/v3.2.0/

Exemple

cf. exemple

❌ NOK

var styleLayer = L.mapbox.styleLayer("data/planign.json")
    .addTo(map);

Exception:

les urls doivent être avec le protocole mapbox:// !?

✔️ OK

L.mapbox.accessToken = "<your public access token>";
var styleLayer = L.mapbox.styleLayer("mapbox://styles/mapbox/bright-v9")
    .addTo(map);

4. OTHER

cf. https://github.com/mapbox/awesome-vector-tiles