Discussion :

[gbloch]

Bonjour,

Je travaille actuellement pour un agence gouvernementale Française dont je ne citerai pas le nom et j'ai obtenu récemment une clé me permettant d'accéder à un grand nombre d'API IGN et notamment celle de l'API "Vecteur tuilé".
➡️URL racine de l'API en question : https://wxs.ign.fr/CLE/geoportail/tms/1.0.0/

Je souhaite m'en servir afin d'afficher des fonds de carte en utilisant la librairie JavaScript Leaflet : https://leafletjs.com/

Ce que je sais d'après la documentation (enfin crois savoir) :

• Les tuiles vectorielles renvoyées par IGN sont au format générique "Map Box Vector Tiles" sous Licence Créative Commons.
• Elles sont dans un format "protocol buffer" initié par Google (du json en plus light)
• Les tuiles retournées sont donc sous la forme https://wxs.ign.fr/CLE/geoportail/tm....IGN/z/x/y.pbf
• Pour "afficher" les cartes vectorielles, il faut 2 choses :
  - Une extension Leaflet permettant de décoder et d’afficher le "pbf" de style Mapbox
  - Un "Style" permettant l’affichage des cartes, qui est basé sur le nom des attributs dans le protobuffer

✅ Pour les styles au format Mapbox ils sont disponibles ici : https://geoservices.ign.fr/documenta...eur-tuile.html

❌ Pour la librairie Leaflet, c'est là où je coince. En effet, j'ai plusieurs pistes mais qui ne sont pas abouties :

1️⃣ Une extension de Leaflet existe pour afficher des "Vector Grid" avec des tuiles au format pbf : https://github.com/Leaflet/Leaflet.VectorGrid
Voici un extrait du code que j'ai adapté pour pouvoir afficher le fond de carte IGN :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const plan = await fetch(`https://wxs.ign.fr/${ignKey}/static/vectorTiles/styles/PLAN.IGN/standard.json`);
const planJson = await plan.json();
 
const ignUrl = "https://wxs.ign.fr/{key}/geoportail/tms/1.0.0/PLAN.IGN/{z}/{x}/{y}.pbf";
const ignVectorTileOptions = {
    rendererFactory: L.canvas.tile,
    attribution: 'Map data &copy; <a href="https://www.ign.fr/">IGN</a> contributors, &copy;' +
        ' <a href="https://www.mapbox.com/about/maps/">MapBox</a>',
    vectorTileLayerStyles: planJson,
    key: ignKey
};
 
const pePbfLayer = L.vectorGrid.protobuf(ignUrl, ignVectorTileOptions);
 
export default pePbfLayer;

Cependant, le style json renvoyé par IGN au format Mapbox ne convient pas à Leaflet qui attend un format OpenMapTiles : https://openmaptiles.org/docs/website/leaflet/

Code JSON :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
  water:{// Apply these options to the "water" layer...    fill: true,
    weight: 1,
    fillColor: '#06cccc',
    color: '#06cccc',
    fillOpacity: 0.2,
    opacity: 0.4,
  },
  transportation: {    // Apply these options to the "transportation" layer...
    weight: 0.5,
    color: '#f2b648',
    fillOpacity: 0.2,
    opacity: 0.4,
  },
 
  // And so on, until every layer in https://openmaptiles.org/schema/ has a style
 
  // aeroway:
  // boundary:
  // building:
  // housenumber:
  // landcover:
  // landuse:
  // park:
  // place:
  // poi:
  // transportation:
  // transportation_name:
  // water:
  // water_name:
  // waterway:
};

2️⃣ Il y une extension de Leaflet créé par Mapbox que je pourrais utiliser : https://github.com/mapbox/mapbox-gl-leaflet

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const ignMapboxLayer = L.mapboxGL({
    accessToken: 'pk.token',
    style: 'https://wxs.ign.fr/CLE/static/vectorTiles/styles/PLAN.IGN/standard.json'
});
 
export default ignMapboxLayer;

Ici, j'ai aussi une début d'affichage avec des styles appliqués mais j'ai des erreurs 404 sur les sprites

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
GET https://wxs.ign.fr/static/vectorTiles/styles/PLAN.IGN/sprite/PlanIgn@2x.png 404 (Not Found)
e {status: 404, url: "https://wxs.ign.fr/static/vectorTiles/styles/PLAN.IGN/sprite/PlanIgn@2x.png", name: "e", message: "Not Found"}

❓ Dernier point, j'ai une question concernant les metadata : https://wxs.ign.fr/choisirgeoportail.../metadata.json
Comment et à quel moment je peux les utiliser pour augmenter l'expérience utilisateur dans l'affichage des cartes sur Leaflet ?

Si l'état actuel de Leaflet ne permet d'afficher les cartes, je me propose de l'implémenter en open-source sur mon compte Github: https://github.com/gaetanBloch

Je vous remercie du temps que vous avez pris pour lire ce message.

Très cordialement,

Gaëtan Bloch

[hcaillaud]

Bonjour,

- Pour la question du format du style je pense que votre problème n'est pas lié au format. Dans l'exemple que vous utilisez le fichier récupéré est bien au format json.
style: 'https://openmaptiles.github.io/osm-bright-gl-style/style-cdn.json'
Je vous fais suivre le lien vers la spécification mapbox qui stipule bien que le format attendu pour le style est un json https://docs.mapbox.com/mapbox-gl-js/style-spec/

- Pour votre problème de sprite : ce n'est pas forcément problématique s'il ne récupère pas PlanIgn2x.png mais veillez à vérifier que
https://wxs.ign.fr/static/vectorTile...te/PlanIgn.png est bien récupéré lors de l'initialisation de votre carte.

- le metadata.json vous donne des indications sur la structure des données et les différents attributs existants avec leurs valeurs. Cela peut vous permettre de faire des filtres attributaires dans le fichier de style pour proposer une cartographie plus adaptée à vos besoins : https://docs.mapbox.com/help/glossary/filter/

[lowzonenose]

j'avais fait qq tests sur le vecteur tuilé / leaflet sur le dépôt suivant :
https://github.com/lowzonenose/test-leaflet-vectortiles
si ça peut aider...

[lowzonenose]

Si l'état actuel de Leaflet ne permet d'afficher les cartes, je me propose de l'implémenter en open-source sur mon compte Github: https://github.com/gaetanBloch

Je suis preneur...

[gbloch]

Bonjour a vous,

@hacaillau merci pour ta réponse

- Pour la question du format du style je pense que votre problème n'est pas lié au format. Dans l'exemple que vous utilisez le fichier récupéré est bien au format json.
style: 'https://openmaptiles.github.io/osm-bright-gl-style/style-cdn.json'

Je sais bien que le format des données doit être en json, je voulais plutôt dire le schema (dtd) qui doit etre celui de Mapbox GL cf : https://openmaptiles.org/docs/website/leaflet/

Define a style
VectorGrid cannot handle vector tile GL styles (yet), therefore first you have to define the styling for all the data layers with the Leaflet specific styling code:

=> Je suis en train de faire une etude faisabilité sur un convertisseur open-source entre les 2 formats.

- Pour votre problème de sprite : ce n'est pas forcément problématique s'il ne récupère pas PlanIgn2x.png

Le problème de sprite vient du fait fait que je travaille avec un écran a haute resolution et que donc css veut utiliser des sprites sur 2px au lieu d'un seul.

Merci @lowzonenose pour tes réponses

Je suis a la recherche d'une solution 100% gratuite, ainsi tous les outils fournis par Mapbox sont un no-go (car ils nécessitent un token), je ne peux donc pas utiliser :

1. L.mapboxGL()
2. L.mapbox.styleLayer()
3. new mapboxgl.Map({})

Ainsi, avant d'avoir fini de développer le convertisseur, je ne peux pas utiliser Leaflet.

En revanche, OpenLayers (https://openlayers.org/) supporte ce format "out of the box" via :

1. olms('map', 'style.json', (map)=>{//handle your map})
2. Seconde méthode :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
const layer = new ol.layer.VectorTile({
   title: "Plan IGN",
   renderMode: 'hybrid',
   source: new ol.source.VectorTile({
       tilePixelRatio: 1,
       tileGrid: ol.tilegrid.createXYZ({maxZoom: 19}),
       format: new ol.format.MVT(),
       url: "https://wxs.ign.fr/CLE/geoportail/tms/1.0.0/PLAN.IGN/{z}/{x}/{y}.pbf",
       attributions: '<a href="https://geoservices.ign.fr/blog/2018/07/08/nouveautes_vecteur.html">&copy; IGN-Géoportail</a>',
  }),
  declutter: true
});

puis olms.applyStyle(layer, style.json, "plan_ign")

C'est d'ailleurs cette seconde méthode que vous utiliser sur votre démonstrateur dont j'ai pris la liberté de m'inspiré : https://viglino.github.io/ol-ext/exa....gppvtile.html

Cependant, je n'ai pas le même rendu a plusieurs niveau (mais surtout sur la toponymie) :

exemple 1 (Démonstrateur) :


exemple 1 (Maison) :


exemple 2 (Démonstrateur) :


exemple 2 (Maison) :


Pourriez vous m'orienter vers une solution ? J'utilise les dernières version d'OpenLayers et les plugins.

---

Si l'état actuel de Leaflet ne permet d'afficher les cartes, je me propose de l'implémenter en open-source sur mon compte Github: https://github.com/gaetanBloch

Je suis preneur...

J'y travaille

Très cordialement,

Gaetan Bloch

[lowzonenose]

https://vectortiles.ign.fr/demonstrateur/

[gbloch]

Bonjour,

j'ai adapté mon code en me servant du démonstrateur comme exemple mais j'obtiens toujours des problèmes au niveau de la toponymie et des icons.





Mon code est le suivant :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
 
// Lazy loading map
const loadMap = (map, loadingCallback) => {
    displayMap(map);
    if (!map.loaded) {
        loadingCallback();
        map.loaded = true;
    }
}
 
const createOpenLayersMap = (targetedMap) => {
    const ignOLLayer = new ol.layer.VectorTile({
        title: "Plan IGN vecteur",
        visible: true,
        source: new ol.source.VectorTile({
            format: new ol.format.MVT(),
            url: `https://wxs.ign.fr/${ignKey}/geoportail/tms/1.0.0/PLAN.IGN/{z}/{x}/{y}.pbf`,
        }),
        attributions: '<a href="https://geoservices.ign.fr/documentation/geoservices/vecteur-tuile.html">&copy; IGN</a>',
        declutter: true
    });
 
    const fetchStyle = async () => {
        const plan = await fetch(
            `https://wxs.ign.fr/${ignKey}/static/vectorTiles/styles/PLAN.IGN/standard.json`
        );
        const style = await plan.json();
        olms.applyStyle(ignOLLayer, style, "plan_ign");
    }
 
    const go = () => {
        new ol.Map({
            layers: [ignOLLayer],
            controls: ol.control.defaults({
                zoom: true,
                attribution: true,
                rotate: true
            }),
            target: targetedMap.id,
            view: new ol.View({
                center: [287963, 5948655],
                zoom: 6,
                constrainResolution: true
            })
        });
        fetchStyle().catch(console.error);
    }
 
    loadMap(targetedMap, () => {
        Gp.Services.getConfig({
            serverUrl: './data/autoconf.json',
            callbackSuffix: '',
            apiKey: ignKey,
            onSuccess: go
        })
    });
}

Quel pourrait-être le problème selon vous ?

Très cordialement,

Gaëtan Bloch

[gbloch]

Bonjour,

Est-ce que l'on pourrait avoir du support sur ma question précédente s'il vous plaît ?

Très cordialement,

Gaëtan Bloch - Pôle Emploi

[lowzonenose]

pouvez vous nous envoyer les informations suivantes :
* version openlayers
* version olms
* page exemple fonctionnel

merci

[gbloch]

Version openlayers : v6.5.0
Version olms : v6.3.2

Vous voulez que je vous fournisse le code source fonctionnel dans un bundle en mp c'est bien cela?
Je ne peux pas le diffuser ssi simplement (à part la partie que je vous ai montré) car il contient notre clé IGN.

Très cordialement,

Gaëtan Bloch - Pôle Emploi

[lowzonenose]

Ok, on va faire sans...

Que fait la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

displayMap(map)

qui est appelée avant la callback de création de la carte ?
Dans le DOM de la page principale, combien y'a t il de viewport ?

J'ai le sentiment que le DOM de la page n'est pas encore finalisé au moment où on ajoute la carte...

[gbloch]

Bonjour @lowzonenose,

Merci pour tes réponses.

En fait je ne pouvais pas exposer l'application telle quelle car c'est une partie d'un plus grosse application en React / Next.js.

J'ai extrait la partie du code qui affiche le fond de carte vectoriel d'IGN avec OpenLeayers et ai créé une application basique avec node.js pour afficher la carte.

Code source publique : https://github.com/gaetanBloch/Vanilla-GIS

Je n'ai qu'un seul viewport et l'application est très basique, je ne comprends pas ce qui ne fonctionne pas.

Je vais vous ajouté au projet comme cela vous pourrez le modifier et faire des tests si vous le désirez.

Bien cordialement,

Gaëtan Bloch - Pôle Emploi

[gbloch]

Bonjour,

Merci pour votre contribution au projet.

J'ai fais quelques modifications et merge la PR.

J'ai aussi ajouté des commentaires sur les problèmes restants : https://github.com/gaetanBloch/Vanil...ment-877622401

Cordialement,

Gaëtan Bloch

[gbloch]

Bonjour,

Je n’ai pas encore eu de retour sur mes remarques et le sujet.
Est-ce à cause de la périodee creuse des vacances ?

Tres cordialement,

Gaëtan Bloch - Pole Emploi

[lowzonenose]

Bonjour,
j'ai fait qq correctifs sur le dépôt de code.
Le rendu est mieux, mais il y'a encore qq coquilles sur les toponymes.
Je suis en vacances ce soir, un collègue va reprendre les investigations en mon absence.

[gbloch]

Je vous remercie pour l'update.

Je vous souhaite de tres bonnes vacances.

Cordialement

[gbloch]

Bonjour,

J’ai fait quelques modifications sur le repo et j’ai bumpe la version d’Openlayers a 6.6.1.

Plusieurs soucis persistent :

• Les toponymes sont toujours tronqués malgré l’update d’OL
• Je ne comprends pas pourquoi je suis obligé de copier la feuille de style MapBox dans mon repo pour avoir un bon rendu, je devrai pouvoir accéder a `https://wxs.ign.fr/${ignKey}/static/vectorTiles/styles/PLAN.IGN/standard.json` et avoir le même rendu, car sinon ce ne sera pas maintenable en cas d’évolutions
• Quand est-ce que les sprites 2x seront disponibles ? Vous avez une idée ?

Lien vers le repo : https://github.com/gaetanBloch/Vanilla-GIS

Bien cordialement,

Gaetan Bloch - Pole Emploi

[elias couppe]

Bonjour,

pour le point 1, lowzonenose pourra certainement vous répondre mieux que moi.

pour le point 2, un correctif à justement été réalisé hier pour que l'url https://wxs.ign.fr/${ignKey}/static/vectorTiles/styles/PLAN.IGN/standard.json renvoie bien un fichier de style avec la clé dans l'url mapbox des sources. Je ne sais pas si votre problème est lié à ca, mais a priori il n'y a pas de problème à requêter le fichier de style distant tant que votre clé a les droits sur la couche VT...

pour le point 3, j'ai essayé de publier les sprites x2, mais malheureusement ca n'a pas été concluant. Je pense aussi que lowzonenose pourra reprendre son action à ce sujet à son retour qui ne tardera plus désormais.

[gbloch]

Bonjour Elias,

Je vous remercie pour votre réponsee.

En effet, maintenant que je requete la feuille de style https://wxs.ign.fr/${ignKey}/static/vectorTiles/styles/PLAN.IGN/standard.json j'arrive a avoir le meme rendu qu'avec la feuille de style telechargee et modifiee, auparavant.

Pour les autres questions j'attenderai le retour de lowezonenose.

Bien cordialement,

Gaetan Bloch - Pole Emploi

[gbloch]

Je viens de résoudre le problème de section des toponymes avec ce commit : https://github.com/gaetanBloch/fr-gi...710fce7c1be134

Il ne me reste que les sprites a avoir.