MapLibre GL et ressource vecteur tuilé de l'IGN

**Sylvain5931** · 08/06/2021, 14h04

Bonjour à tous,

J'ai réussi à partir de cette page de l'IGN à créer un .json à utiliser comme vecteur tuilé avec MapLibre.

Toutefois, lorsque j'ouvre ma page, je n'ai aucune tuile entre les niveaux de zoom 11 à 15 environ.
En essayant d'ouvrir le json avec Maputnik pour éditer le style, j'ai exactement le même problème.

Avez-vous une idée de ce qui peut poser problème ?

Merci d'avance

Edit : En utilisant : ce json, j'ai exactement le même souci.

Code HTML :

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
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8" />
<title>Essai n°15z - Vecteur tuilé de l'IGN (style standard)</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
<link href="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css" rel="stylesheet" />
 
<style>
body { 
        margin: 0; 
        padding: 0;
 }
 
#map { 
        position: absolute; 
        top: 0; 
        bottom: 0; 
        width: 100%;
}
 
</style>
</head>
 
<body>
 
<div id="map"></div>
 
<script>
// Configuration de la carte
 
var map = new mapboxgl.Map({
container: 'map',
style: 'geojson/accentue.json', //Style des tuiles vectorielles
zoom: 16, // Zoom
center: [2.8260685, 50.5958040], // Centre de la carte
});
 
// Ajouter des outils de navigation et l'échelle
  
map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));    
map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
 
</script>
</body>
</html>

**lowzonenose** · 08/06/2021, 15h08

Bonjour,
actuellement, nous ne rencontrons pas de problèmes sur les niveaux 11 à 15 pour la couche Plan IGN sur le Portail.
Rencontrez vous encore le problème ?
Merci

**Sylvain5931** · 08/06/2021, 15h31

Effectivement, en utilisant sur Leaflet le fluw WMTS Plan IGN v2, je n'ai aucun souci.

C'est en utilisant le fichier .json pour faire appel au vecteur tuilé que j'ai le souci, que ce soit ce fichier ou en créant un style depuis cette page.

**Sylvain5931** · 09/06/2021, 09h39

Pour illustrer un peu plus le problème :
Voici 2 fichiers .json de style générés depuis la carte dynamique de la page Géoservices sur l'utilisation du vecteur tuilé : Premier fichier et Seconde fichier (hebergés sur Github).

Ces fichiers ont été adaptés comme détaillé par Jean-Marc Viglino dans des posts précédents de cette discussion.

En remplaçant dans mon code la ligne style:'geojson/accentue.json' par les liens raw Github, j'ai le même souci.

Par ailleurs, sur Maputnik, si on suit la procédure Lire une ressource vecteur tuilé de l’IGN avec l’éditeur Maputnik sur le site Géoservices, on a également des soucis d'affichage avec le plan IGN version standard.

**lowzonenose** · 09/06/2021, 12h09

Les tuiles montent bien sur les zooms 11 à 15 avec l'éditeur maputnik pour le json standard
Nom : Capture-20210609120229-1378x988.png
Affichages : 451
Taille : 1,01 Mo

Nom : Capture-20210609120229-1378x988.png
Affichages : 451
Taille : 1,01 Mo

Nom : Capture-20210609120425-1375x990.png
Affichages : 437
Taille : 1,07 Mo

Idem pour le portail
Nom : Capture-20210609120253-1110x992.png
Affichages : 408
Taille : 1,47 Mo

Nom : Capture-20210609120440-1111x992.png
Affichages : 400
Taille : 1,71 Mo

Les temps de réponses semblent un peu long actuellement.

**Sylvain5931** · 09/06/2021, 13h43

Merci de ce retour, mais je constate toujours le souci...

Quel est le json standard que vous utilisez dans votre exemple ?

**lowzonenose** · 09/06/2021, 14h09

Envoyé par Sylvain5931

Merci de ce retour, mais je constate toujours le souci...

Quel est le json standard que vous utilisez dans votre exemple ?

j'utilise ceux mis à disposition sur le Portail :
https://wxs.ign.fr/an7nvfzojv5wa96ds.../standard.json
ou
https://wxs.ign.fr/choisirgeoportail.../standard.json

**Sylvain5931** · 09/06/2021, 14h49

Bizarre bizarre...

En copiant directement les 2 urls que vous avez donnés de ces fichiers dans Maputnik, j'ai ce genre d'affichage :

Nom : capture1.png
Affichages : 401
Taille : 418,1 Ko

Nom : capture1.png
Affichages : 401
Taille : 418,1 Ko

Nom : capture2.png
Affichages : 393
Taille : 756,6 Ko

Nom : capture3.png
Affichages : 392
Taille : 762,7 Ko

Et si je modifie le fichier en changeant la propriété source au début du json comme l'a indiqué Jean-Marc Viglino, j'ai les problèmes entre les zooms 11 à 15.

**lowzonenose** · 09/06/2021, 17h49

Ok, je viens de comprendre le souci sur les niveaux 11 à 15 sur la couche PLAN IGN et MapLibreGL...

Une exception est lancée sur un glyph manquant :

Code :

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

404 Source%20Sans%20Pro%20Semibold/0-255.pbf

Veuillez remplacer dans le fichier de style la police (json) :

Code :

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

Source Sans Pro Semibold --> Source Sans Pro Semi Bold

Nous allons livrer le glyph manquant...

**Sylvain5931** · 10/06/2021, 08h53

Merci !

Les tuiles s'affichent bel et bien maintenant à tout niveau de zoom.

Il me reste juste un petit souci (non constaté avant) au zoom 19, sur l'affichage des numéros et indices de répétitions des adresses.

Nom : capture.png
Affichages : 380
Taille : 275,9 Ko

Nom : capture.png
Affichages : 380
Taille : 275,9 Ko

**Sylvain5931** · 10/06/2021, 14h44

En regardant le fichier de Jean-Marc Vignilo, j'ai procédé au changement suivant dans mon code :

Code :

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

1
2
3
4
5
6
"text-field": [
     "concat",
     "{numero}",
     "{indice_de_repetition}"
],

en

Code :

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

1
2
3
4
5
6
"text-field":[
     "concat",
     ["get","numero"],
     ["get","indice_de_repetition"]
],

Et les numéros et indices de répétitions s'affichent bien maintenant.

MapLibre GL et ressource vecteur tuilé de l'IGN

IGN API Géoportail

Discussions similaires

Partager

Partager