Intégration à ipyleaflet

SylvainCorlay commented 4 years ago

Bonjour, je suis co-auteur du paquet ipyleaflet, une intégration de LeafletJS à Jupyter.

Je trouve qu'il serait intéressant d'exposer les fonctionalités du geopartal à ipyleaflet. ipyleaflet est assez populaire dans l'écosystème "pydata" pour la visualisation en géosciences et est notamment intégrée au projet PanGeo. Il y a également de nombreuses demos d'intégration à Google Earth Engine.

Seriez-vous intéressés pour discuter de la façon dont cela pourrait être fait - et notamment la gestion des clefs etc...

cc @martinRenou @davidbrochart

lboulanger commented 4 years ago

Bonjour !

Effectivement, ce serait intéressant que vous puissiez intégrer les fonctionnalités Géoportail à votre outil. :) Avez-vous déjà essayé de les intégrer ? Si oui, quels étaient les points bloquants ? Sinon, quelques éléments de documentation concernant l'extension Géoportail pour Leaflet : https://github.com/IGNF/geoportal-extensions/blob/develop/doc/README-leaflet.md Et concernant les clés (accès aux ressources Géoportail) : https://geoservices.ign.fr/documentation/services-acces.html#obtention-dune-clef-dacc%C3%A8s-aux-services-web .

bonne journée !

davidbrochart commented 4 years ago

Bonjour,

J'ai rapidement essayé d'inclure geoportal-extensions-leaflet dans package.json, mais j'ai l'erreur suivante en faisant npm run build:

Module not found: Error: Can't resolve 'fs' in '/home/david/git/davidbrochart/ipyleaflet/js/node_modules/request/lib'

Je n'ai pas cherché plus que ça, mais si vous connaissez le problème...

Merci!

lboulanger commented 4 years ago

Bonjour, est-ce que vous utilisez un framework type angularJS ? Si oui, je vous redirige vers des exemples d'intégration dans ce type de framework : https://github.com/IGNF/geoportal-third-party-integration

SylvainCorlay commented 3 years ago

@elias75015 pourquoi fermer le ticket?

davidbrochart commented 3 years ago

Bonjour, est-ce que vous utilisez un framework type angularJS ?

Desole pour la reponse tardive, non nous n'utilisons pas un framework de type angularJS.

elias75015 commented 3 years ago

@elias75015 pourquoi fermer le ticket?

Il n'y avait pas de réponse depuis un certain temps, et nous avons entrepris de "nettoyer" les tickets inactifs sur notre github. Je rouvre le ticket, pas de soucis.

Bonjour, est-ce que vous utilisez un framework type angularJS ?

Desole pour la reponse tardive, non nous n'utilisons pas un framework de type angularJS.

Rencontrez-vous toujours le problème lors du build avec la dernière version des extensions géoportail pour leaflet (2.1.6) ? Avez-vous pu avancer sur l'intégration ?

davidbrochart commented 3 years ago

Merci, je vais reessayer avec la derniere version.

davidbrochart commented 3 years ago

Bonjour, j'ai toujours les memes problemes:

    ERROR in ../node_modules/request/lib/har.js
    Module not found: Error: Can't resolve 'fs' in '/home/david/github/davidbrochart/ipyleaflet/node_modules/request/lib'
     @ ../node_modules/request/lib/har.js 3:9-22
     @ ../node_modules/request/request.js
     @ ../node_modules/request/index.js
     @ ../node_modules/geoportal-access-lib/src/Protocols/XHR.js
     @ ../node_modules/geoportal-access-lib/src/Gp.js
     @ ../node_modules/geoportal-extensions-leaflet/src/Leaflet/index.js
     @ ./src/leaflet.js
     @ ./src/Map.js
     @ ./src/jupyter-leaflet.js
     @ ./src/index.js
     @ ./src/embed.js

    ERROR in ../node_modules/forever-agent/index.js
    Module not found: Error: Can't resolve 'net' in '/home/david/github/davidbrochart/ipyleaflet/node_modules/forever-agent'
     @ ../node_modules/forever-agent/index.js 6:10-24
     @ ../node_modules/request/request.js
     @ ../node_modules/request/index.js
     @ ../node_modules/geoportal-access-lib/src/Protocols/XHR.js
     @ ../node_modules/geoportal-access-lib/src/Gp.js
     @ ../node_modules/geoportal-extensions-leaflet/src/Leaflet/index.js
     @ ./src/leaflet.js
     @ ./src/Map.js
     @ ./src/jupyter-leaflet.js
     @ ./src/index.js
     @ ./src/embed.js

    ERROR in ../node_modules/tough-cookie/lib/cookie.js
    Module not found: Error: Can't resolve 'net' in '/home/david/github/davidbrochart/ipyleaflet/node_modules/tough-cookie/lib'
     @ ../node_modules/tough-cookie/lib/cookie.js 32:10-24
     @ ../node_modules/request/lib/cookies.js
     @ ../node_modules/request/index.js
     @ ../node_modules/geoportal-access-lib/src/Protocols/XHR.js
     @ ../node_modules/geoportal-access-lib/src/Gp.js
     @ ../node_modules/geoportal-extensions-leaflet/src/Leaflet/index.js
     @ ./src/leaflet.js
     @ ./src/Map.js
     @ ./src/jupyter-leaflet.js
     @ ./src/index.js
     @ ./src/embed.js

    ERROR in ../node_modules/tunnel-agent/index.js
    Module not found: Error: Can't resolve 'net' in '/home/david/github/davidbrochart/ipyleaflet/node_modules/tunnel-agent'
     @ ../node_modules/tunnel-agent/index.js 3:10-24
     @ ../node_modules/request/lib/tunnel.js
     @ ../node_modules/request/request.js
     @ ../node_modules/request/index.js
     @ ../node_modules/geoportal-access-lib/src/Protocols/XHR.js
     @ ../node_modules/geoportal-access-lib/src/Gp.js
     @ ../node_modules/geoportal-extensions-leaflet/src/Leaflet/index.js
     @ ./src/leaflet.js
     @ ./src/Map.js
     @ ./src/jupyter-leaflet.js
     @ ./src/index.js
     @ ./src/embed.js

    ERROR in ../node_modules/forever-agent/index.js
    Module not found: Error: Can't resolve 'tls' in '/home/david/github/davidbrochart/ipyleaflet/node_modules/forever-agent'
     @ ../node_modules/forever-agent/index.js 7:10-24
     @ ../node_modules/request/request.js
     @ ../node_modules/request/index.js
     @ ../node_modules/geoportal-access-lib/src/Protocols/XHR.js
     @ ../node_modules/geoportal-access-lib/src/Gp.js
     @ ../node_modules/geoportal-extensions-leaflet/src/Leaflet/index.js
     @ ./src/leaflet.js
     @ ./src/Map.js
     @ ./src/jupyter-leaflet.js
     @ ./src/index.js
     @ ./src/embed.js

    ERROR in ../node_modules/tunnel-agent/index.js
    Module not found: Error: Can't resolve 'tls' in '/home/david/github/davidbrochart/ipyleaflet/node_modules/tunnel-agent'
     @ ../node_modules/tunnel-agent/index.js 4:10-24
     @ ../node_modules/request/lib/tunnel.js
     @ ../node_modules/request/request.js
     @ ../node_modules/request/index.js
     @ ../node_modules/geoportal-access-lib/src/Protocols/XHR.js
     @ ../node_modules/geoportal-access-lib/src/Gp.js
     @ ../node_modules/geoportal-extensions-leaflet/src/Leaflet/index.js
     @ ./src/leaflet.js
     @ ./src/Map.js
     @ ./src/jupyter-leaflet.js
     @ ./src/index.js
     @ ./src/embed.js

elias75015 commented 3 years ago

Bonjour,

ces erreurs apparaissent lors d'un npm run builddans le dossier ipyleaflet/js après avoir ajouté "geoportal-extensions-leaflet' en dépendance dans votre package.json et fait un npm install?

Dans vos tests, de quelle manière faite vous appel aux extensions géoportail pour Leaflet ? Pourriez vous me fournir les étapes que vous avez suivies (ou une branche avec vos tests) afin que nous essayions de reproduire le problème ?

Merci

davidbrochart commented 3 years ago

ces erreurs apparaissent lors d'un npm run builddans le dossier ipyleaflet/js après avoir ajouté "geoportal-extensions-leaflet' en dépendance dans votre package.json et fait un npm install?

Oui.

Dans vos tests, de quelle manière faite vous appel aux extensions géoportail pour Leaflet ? Pourriez vous me fournir les étapes que vous avez suivies (ou une branche avec vos tests) afin que nous essayions de reproduire le problème ?

Pour l'instant je n'ai pas fait de test. Voici ma branche: https://github.com/davidbrochart/ipyleaflet/tree/geoportail

lowzonenose commented 3 years ago

on peut essayer en ajoutant ce bout de code pour chaque bundle dans le js/webpack.config.js :

(...)
externals: [
            '@jupyter-widgets/base',
            {
                fs: 'empty',
                global: true,
                crypto: 'empty',
                tls: 'empty',
                net: 'empty',
                process: true,
                module: false,
                clearImmediate: false,
                setImmediate: false
            }
        ]
(...)

Ça build... À tester...

davidbrochart commented 3 years ago

Effectivement ca build, mais la carte ne s'affiche plus. J'ai poussé dans ma branche si vous voulez voir. Vous pouvez ouvrir n'importe quel notebook:

jupyter notebook examples/BaseMap.ipynb

davidbrochart commented 2 years ago

Bonjour, nous nous intéressons à l'intégration de geoportal dans ipyleaflet à nouveau. Il semble que les problèmes d'installation/compilation aient disparus, je pense qu'il nous manque une clef pour pouvoir profiter des services de la plateforme. Serait-il possible d'en obtenir une, même provisoire, afin que nous puissions développer? Le lien apiKey sur cette page donne sur une page non trouvée.

elias75015 commented 2 years ago

Bonjour,

désormais, les clefs sont gratuites et ouvertes. Ce sont des clefs génériques, auxquelles sont associées plusieurs ressources. Tout dépend donc des ressources que vous souhaitez exploiter.

Je vous laisse consulter cette page qui détaille les clefs génériques disponibles : https://geoservices.ign.fr/services-web-essentiels

Avec les API Géoportail, il est possible d'utiliser plusieurs clefs.

Par exemple, pour utiliser les clefs "ortho", "cartes", et "administratif" avec l'API géoportail pour Leaflet :

<script src="GpPluginLeaflet-src.js" data-key="ortho,cartes,administratif"></script>

Si vous souhaitez savoir dans le détail à quelle clef est associée une ressource, vous pouvez consulter ce tableau : https://geoservices.ign.fr/documentation/services/tableau_ressources

HaudinFlorence commented 2 years ago

Bonjour, Merci pour ces précisions. Nous avons réussi comme premier test à afficher quelques layers WMTS dans ipyleaflet (par exemple la carte d'altimétrie ELEVATION.SLOPES avec l'apiKey altimetrie ou bien encore les vues photo aériennes ORTHOIMAGERY.ORTHOPHOTOS avec l'apiKey essentiels ). Cependant, toutes les layers testées ne s'affichent pas sans pour autant avoir un message d'erreur (on voit juste la map sans layer). Par exemple, nous n'avons pas réussi à afficher un plan IGN. Peut-être que juste la donnée du nom de la layer et d'une apiKey ne suffit pas.

elias75015 commented 2 years ago

Bonjour,

il n'y a pas de raison que Plan IGN ne s'affiche pas. Il s'agit soit d'un incident ponctuel sur la plateforme, soit d'une mauvaise configuration de votre côté.

Snippet Leaflet pour afficher PLAN IGN, avec la clé "cartes" par exemple :

L.geoportalLayer.WMTS({
    layer : "GEOGRAPHICALGRIDSYSTEMS.PLANIGN"
}).addTo(map);

L.geoportalLayer.WMTS({
    layer : "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2"
}).addTo(map);

A noter que la couche GEOGRAPHICALGRIDSYSTEMS.MAPS n'est plus disponible via les clefs génériques.

Si le problème persiste n'hésitez pas à nous fournir le code qui ajoute les couches ne s'affichant pas, ainsi que leurs identifiants.

PS : https://ignf.github.io/geoportal-extensions-leaflet-samples/ pour s'aider avec un générateur d'exemples

davidbrochart commented 2 years ago

Snippet Leaflet pour afficher PLAN IGN, avec la clé "cartes" par exemple :
L.geoportalLayer.WMTS({
    layer : "GEOGRAPHICALGRIDSYSTEMS.PLANIGN"
}).addTo(map);

L.geoportalLayer.WMTS({
    layer : "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2"
}).addTo(map);

Avec ce code, les requêtes échouent avec un403et ce body:

<ExceptionReport><Exception exceptionCode="MissingRights">No rights for this ressource or ressource does not exist</Exception></ExceptionReport>

Peut-être que la clef "cartes" n'est pas la bonne?

elias75015 commented 2 years ago

Peut être que la requête ne contient pas tous les paramètres nécessaires alors...car la clef "cartes donne bien accès aux couches PLAN IGN (voir exemple ci-dessous).

Exemple d'une requête WMTS en succès avec la clef "cartes" sur la couche "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2" : https://wxs.ign.fr/cartes/geoportail/wmts?layer=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&style=normal&tilematrixset=PM&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=15&TileCol=16472&TileRow=11819

Pouvez-vous vérifier que les requêtes en erreur ressemblent à celle ci-dessus svp ?

PS : nous vous conseillons d'utiliser la couche PLANIGNV2, car c'est cette couche qui est tenue à jour.

davidbrochart commented 2 years ago

Le 403 est pour GEOGRAPHICALGRIDSYSTEMS.PLANIGN. Pour GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2 j'obtiens un 400 avec:

<ExceptionReport xmlns="http://www.opengis.net/ows/1.1">
<Exception exceptionCode="InvalidParameterValue" >
  Le format image/jpeg n'est pas gere pour la couche GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2
</Exception>
</ExceptionReport>

Effectivement le format demandé est image/jpeg au lieu de image/png: https://wxs.ign.fr/cartes/geoportail/wmts?gp-leaflet-ext=2.2.4&service=WMTS&request=GetTile&version=1.0.0&layer=GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2&style=normal&tilematrixset=PM&format=image%2Fjpeg&tilematrix=10&tilerow=353&tilecol=519

elias75015 commented 2 years ago

Effectivement, GEOGRAPHICALGRIDSYSTEMS.PLANIGN n'est en fait plus diffusée, mea culpa.

PLANIGNV2 est diffusé en png uniquement

lowzonenose commented 2 years ago

// surcharge du format image en PNG :
var wmts = L.geoportalLayer.WMTS({
  layer : "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2"
}, {
  format : "image/png"
});

HaudinFlorence commented 2 years ago

Merci pour les précisions. L'affichage de la layer GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2 fonctionne effectivement avec la surchage de l'image au format png. J'ai dû passer à côté de l'information mais y-a-t-il un moyen de connaître a priori le format d'image attendu pour les différentes layers du fichier https://geoservices.ign.fr/documentation/services/tableau_ressources ? Merci.

elias75015 commented 2 years ago

Bonjour,

l'information est disponible dans le getCapabilities des différents services. Par exemple, pour la clef "cartes" :

Service WMTS : https://wxs.ign.fr/cartes/geoportail/wmts?REQUEST=GetCapabilities&SERVICE=wmts

Service WMS raster : https://wxs.ign.fr/cartes/geoportail/r/wms?REQUEST=GetCapabilities&SERVICE=wms

Service WMS vecteur : https://wxs.ign.fr/cartes/geoportail/v/wms?REQUEST=GetCapabilities&SERVICE=wms

Pour une layer donnée, l'information est disponible dans la balise format

HaudinFlorence commented 2 years ago

Je ne vois pas dans la réponse à la requête getCapabilites d'information sur les zoom minimum et maximum respectifs des différentes layers. C'est peut-être évident mais où peut on trouver ces données svp? Merci d'avance

elias75015 commented 2 years ago

Bonjour,

je vous invite à lire cette page : https://geoservices.ign.fr/documentation/services/api-et-services-ogc/images-tuilees-wmts-ogc

Les points 3.7 et 4.2 répondent à votre question (pour le WMTS). A noter que les définitions des différents tileMatrixSet sont renvoyés par le getGap :

Pour le WMS, dans le getCapabilities, pour chaque couche, un min et max ScaleDenominator caractérisent la plage de définition de la couche :

HaudinFlorence commented 2 years ago

Bonjour, Je vous remercie pour ces précisions. Il est écrit dans le paragraphe 3.7 "Les seuils de zoom sont définis pour chacune des ressources dont vous trouverez la description ici" mais sur la page en question et les pages dérivées, je ne trouve pas où sont mentionnés ces seuils. Ou peut-être que tous les zooms sont accessibles entre 0 et 21 pour les layers de type wmts ? Ce qui n'est pas le cas pour les wms où sont définis des MinScaleDenominatoret MaxScaleDenominator. Merci d'avance.

elias75015 commented 2 years ago

Bonjour,

2 méthodes :

Méthode 1 : Par le getCapabilities, regarder la définition des tileMatrixSetLimits :

Pour cette couche par exemple, les TMS Limits sont définis des niveaux 10 à 15. Il suffit ensuite de regarder le tableau de correspondance pour connaitre les min et max scale denominators qui correspondent aux limites des niveaux 10 et 15.

Méthode 2 : Les API extensions Géoportail intègrent en elles l'API Bibliothèque d'accès aux services Géoportail : https://github.com/IGNF/geoportal-access-lib

Cette bibliothèque permet à l'utilisateur d'accèder dynamiquement à la configuration qu'il a chargé pour sa carte via l'objet Gp.Config.

Par exemple : Gp.Config.getLayerConf("GEOGRAPHICALGRIDSYSTEMS.PLANIGN$GEOPORTAIL:OGC:WMTS");

Cela vous renverra la configuration de la couche GEOGRAPHICALGRIDSYSTEMS.PLANIGN$GEOPORTAIL:OGC:WMTS si vous y avez accès.`

Pour les scale dénominators :

Gp.Config.getLayerConf("GEOGRAPHICALGRIDSYSTEMS.PLANIGN$GEOPORTAIL:OGC:WMTS").getMinScaleDenominator()
Gp.Config.getLayerConf("GEOGRAPHICALGRIDSYSTEMS.PLANIGN$GEOPORTAIL:OGC:WMTS").getMaxScaleDenominator()

Voir doc http://ignf.github.io/geoportal-access-lib/latest/jsdoc/Gp.Services.Config.Layer.html par exemple. Plein d'autres propriétés sont accessibles via l'objet Gp.Config

HaudinFlorence commented 2 years ago

Bonjour, Merci pour ces précisions. Concernant ma question sur les zooms, nous n'avons besoin que du zoom min et max donc j'ai seulement récupéré les niveaux limites. A partir des paramètres de la réponse à la requête GetCapabilities correspondant aux tilelayers wmts, j'ai essayé d'afficher les tilelayers avec Leaflet dans une page web. Je n'ai pas réussi à voir certaines d'entres notamment celles correspondant aux clés clc, ocsge, lambert, economie (celles de de l'INSEE), securoute plus quelques autres. Je ne sais pas d'où vient le souci pour l'instant. Si vous avez des pistes ? Merci d'avance.

elias75015 commented 2 years ago

Bonjour,

il faudrait regarder l'onglet réseau de la console de dev pour voir si ces couches sont requêtées et si oui quelles réponses sont renvoyées.

Ca peut être un problème de droit (403), une absence de données sur la zone requêtée (404), une erreur sur l'id de la couche, ...

HaudinFlorence commented 2 years ago

Bonjour, Merci de votre réponse et pour les pistes évoquées. Je n'ai pour l'instant pas investigué dans le détail la cause de non affichage de certaines layers mais sur cette PR, vous avez accès à une page web Geoportail_gallery.html avec les 294 layers wmts disponibles sur Geoportail France et leur métadata respectives : https://github.com/HaudinFlorence/LeafletGallery/tree/add_GeoportailFrance_tilelayers.

HaudinFlorence commented 2 years ago

Peut-être que le souci pour les cartes qui ne s'affichent pas, vient de style que j'ai forcé à normal partout mais je vois qu'il peut y avoir des variantes pour certaines tilelayers.

HaudinFlorence commented 2 years ago

Bonjour, Finalement, il ne reste que les tile layers aux formatsimage/x-bil;bits=32 et application/x-protobuf et celles associées à la clé lambert93 (peut-être est-ce liée à la projection?) qui semblent ne pas s'afficher. Une visualisation à partir de la branche mentionnée ci-dessus est possible avec la page Geoportail_gallery.html (les cartes qui ne s'affichaient pas ont été enlevées pour l'instant).

elias75015 commented 2 years ago

image/x-bil;bits=32 : Ce format est déstiné à l'affichage en 3D via une couche MNT (avec iTowns par exemple) application/x-protobuf : ce format est destiné à l'affichage de couches en tuiles vectorielles lambert93 : effectivement, le lambert 93 est une projection conique conforme dont le domaine de définition est la France métropolitane. Les autres couches sont en général en web mercator, projection la plus répandue sur le web pour une utilisaion mondiale.

Si ce n'est pas indiscret, quel est l'objectif final de vos travaux ?

HaudinFlorence commented 2 years ago

Bonjour, Désolée pour ma réponse tardive. Nous cherchons à ajouter les layers wmts IGN disponibles dans les providers de basemaps d'ipyleaflet qui est fourni par geopandas/xyzservices : https://github.com/geopandas/xyzservices/blob/main/xyzservices/data/providers.json. Pour cela, nous avons essayé d'automatiser l'ajout des metadata relatives aux basemaps IGN en partant des résultats de la requête xml getCapabilities. Une PR est en cours de revue : https://github.com/geopandas/xyzservices/pull/126

HaudinFlorence commented 2 years ago

Bonjour, Faisant suite à ma précédente réponse, la PR https://github.com/geopandas/xyzservices/pull/126 a été mergée. Vous pouvez trouver des visuels des layers wmts Geoportail ajoutées dans la galerie de tous les layers disponibles en faisant une recherche du mot clé GeoportailFrance sur la page : https://xyzservices.readthedocs.io/en/latest/gallery.html. Le provider incluant les metadata est disponible ici : https://github.com/geopandas/xyzservices/blob/main/xyzservices/data/providers.json. A l'avenir après la prochaine release de xyzservices, ces cartes seront donc disponibles dans ipyleaflet.

elias75015 commented 2 years ago

Cool !

Ce ticket peut-il être fermé ? Quitte à en rouvrir d'autres plus spécifiques en cas de nouvelles questions ou problèmes.

SylvainCorlay commented 2 years ago

OK, fermons l'issue.

IGNF / geoportal-extensions

Intégration à ipyleaflet #260