IGN

Géoservices IGN

Lire une ressource vecteur tuilé de l’IGN avec l’éditeur maputnik

Dernière mise à jour : 4 Juillet 2019

Dans cet article nous allons apprendre à ouvrir une ressource vecteur tuilé IGN avec l’éditeur de style maputnik et à modifier son style, ensuite on appliquera le style modifié dans le démonstrateur. La ressource visée dans cet exemple est le plan IGN (encore en version beta). Maputnik est un éditeur open source compatible avec la spécification Mapbox GL style. Il nous permet de modifier le style des cartes vecteur tuilé en temps réel. Une documentation plus complète sur l’utilisation de cet outil se trouve ici.

Il y a (au moins) trois manières de lire un flux vecteur tuilé dans cet éditeur :

Une fois la carte chargée, il est possible de modifier le style des couches et de l’exporter vers un fichier JSON. Note : Pour remettre la carte à l’état initial il est nécessaire de vider le cache et supprimer les cookies associés dans le navigateur.

Via un fichier de style

  1. Ouvrir l’éditeur dans un navigateur web : https://maputnik.github.io/editor Par défaut, maputinik affichera les données open map tiles (OSM).
    IMAGE MANQUANTE

  2. Ouvrir le fichier de style du plan IGN : cliquer sur le bouton Open (en haut à gauche) cela ouvrira une boite de dialogue. Dans la section Load from URL, coller l’URL suivante : https://vectortiles.ign.fr/demonstrateur/styles/planign.json ensuite, cliquer sur Open URL
    IMAGE MANQUANTE

La carte plan IGN s’affiche sur l’écran :
IMAGE MANQUANTE

Modifier le style

Nous pouvons maintenant modifier le style que nous venons de charger. À titre d’exemple, nous allons modifier la couleur des autoroutes : le style des autoroutes est déterminé par deux layers dans le fichier de style : un pour le filet extérieur et l’autre pour le filet intérieur. Nous allons donner une couleur verte au filet intérieur, et une couleur bleu au filet extérieur:

  1. Dans la liste de layers, qui se trouve à gauche dans l’écran, cliquer sur le groupe « Routier a niveau », ensuite chercher le layer avec l’id : « Routier a niveau - filet extérieur – autoroute » et cliquer sur le layer pour le sélectionner.
    IMAGE MANQUANTE
    Le menu Layer nous affiche plusieurs options pour modifier le style de ce layer. Tout en bas dans ce menu on peut voir le texte JSON qui correspond au style de ce layer dans le fichier de style.

  2. Modifier les deux couleurs dans la section Paint properties par deux différents tons de bleu :
    IMAGE MANQUANTE Le texte en bas du menu aura changé. Nous allons modifier ensuite le style du filet intérieur :

  3. Dans le même groupe, chercher le layer avec id : « Routier a niveau - filet interieur - autoroute »
    IMAGE MANQUANTE

  4. Modifier les deux couleurs dans la section Paint properties par deux différents tons de vert :
    IMAGE MANQUANTE
    Le texte en bas du menu aura changé. Nous pouvons naviguer dans la carte pour vérifier que les autoroutes sont maintenant vertes avec un fond bleu.
    IMAGE MANQUANTE

  5. Exporter le nouveau style vers un fichier JSON : cliquer dans le bouton Export (en haut de l’écran). Cela ouvrira une boîte de dialogue. Ne rien renseigner dans les champs de texte et cliquer sur Download. Nous avons maintenant notre nouveau fichier de style enregistré en local.

Appliquer un style local dans le démonstrateur vecteur tuilé de l’IGN

Une fois notre fichier de style crée, il est possible d’appliquer ce style à la carte affichée dans le démonstrateur :

  1. Ouvrir le démonstrateur dans un navigateur web : https://vectortiles.ign.fr/demonstrateur/

  2. Cliquer sur le bouton Choisir un style en local …
    IMAGE MANQUANTE

  3. Charger le fichier de style que nous avons crée précédemment. Nous avons maintenant notre plan IGN avec des autoroutes vertes.
    IMAGE MANQUANTE

Via un fichier metadata.json

Dans ce cas nous allons devoir rajouter une à une les couches de la ressource plan IGN et leur donner un style. À titre d’exemple, nous allons rajouter la couche hydro surfacique. La liste complète de couches présentes dans le plan IGN se trouve dans le fichier metadata.json

  1. Ouvrir l’éditeur dans un navigateur web : https://maputnik.github.io/editor

  2. Pour commencer avec une carte vide, nous devons supprimer de la liste de couches (menu Layers à gauche) toutes les couches OSM qui s’affichent par défaut. Vous pouvez garder la couche background.

  3. Cliquer sur le bouton Data Sources, cela ouvrira une boite de dialogue. Dans la section Add New Source :
    • Source ID : taper un ID au choix. Ex : PlanIGN
    • Source Type : sélectionner Vector (TileJSON URL)
    • TileJSON URL : l’url du fichier metadata.json : https://vectortiles.ign.fr/rok4server/1.0.0/PLAN.IGN/metadata.json
      IMAGE MANQUANTE
      ensuite, cliquer sur Add Source
      La ressource #PlanIGN est rajoutée en haut de la boite de dialogue. Fermer la boîte de dialogue.
  4. Rajouter les couches une à une : Cliquer sur le bouton Add Layer (en haut à gauche). Cela ouvrira une boîte de dialogue :
    • ID : taper un identifiant au choix, ex : hydro surfacique
    • Type : Fill
    • Source écrire le même id renseigné dans le pas précèdent, ex : PlanIGN
    • Source Layer : id de la couche tel qu’elle existe dans le flux, dans notre exemple : hydro_surf
      IMAGE MANQUANTE
      Cliquer sur Add Layer. Cela affichera la couche hydro surfacique à l’écran (par défaut la couleur est noire) IMAGE MANQUANTE
  5. Nous pouvons ensuite modifier le style de la couche à l’aide de la boite à outils à gauche de l’écran. Il est possible aussi de modifier le texte JSON directement. Pour rappel, le style de cette couche dans le fichier de style du Plan IGN est ci-dessous :
{
  "id": "hydro surfacique",
  "type": "fill",
  "source": "plan_ign",
  "source-layer": "hydro_surf",
  "layout": {
    "visibility": "visible"
  },
  "filter": [
    "in",
    "symbo",
    "SURFACE_D_EAU",
    "BASSIN",
    "ZONE_MARINE"
  ],
  "paint": {
    "fill-color": "#AAD5E9"
  }
}

Sans fichier metadata.json ni fichier de style

Ce cas est similaire à celui avec un fichier metadata.json (cas précédent), la seule différence étant la façon de charger la ressource dans le menu Data Sources :

  1. Repeter les étapes 1 et 2 de la rubrique précédente et ensuite :

  2. Cliquer sur le bouton Data Sources, cela ouvrira une boite de dialogue. Dans la section Add Source :