Questions autour des adaptations des API JavaScript Geoportail dans le cadre de la Géoplateforme

**elias couppe** · 23/11/2023, 20h14

Bonsoir,

Des versions beta 3 des Extensions pour OpenLayers, iTowns, Leaflet, et du SDK ont été publiées ce jour. Ces versions beta 3 permettent l'affichage des données à accès restreint de la Géoplateforme.

En préambule, j'invite les utilisateurs à lire cet article sur le site Géoservices qui explique les modalités d'utilisation des données à accès restreint.
Ci-après, voici le détail des manipulations à réaliser pour afficher des données à accès restreint, si votre usage des données correspond aux conditions d'utilisations gratuites des données non-libres, conformément à la licence suivante : https://geoservices.ign.fr/cgu-licences.

1 - Générer un fichier de configuration pour les thèmes souhaités et la clef ign_scan_ws (voir getCap WMS et getCap WMTS) à l'aide de cette interface.
Attention : cette clef est temporaire : il faudra générer votre propre clef une fois les interfaces de la Géoplateforme disponibles.

Nom : Capture d’écran du 2023-11-23 19-08-41.png
Affichages : 969
Taille : 63,7 Ko

Nom : Capture d’écran du 2023-11-23 19-08-41.png
Affichages : 969
Taille : 63,7 Ko

2 - Enregistrer le fichier de configuration json généré après quelques secondes d'attente

Nom : Capture d’écran du 2023-11-23 19-11-23.png
Affichages : 947
Taille : 12,2 Ko

Nom : Capture d’écran du 2023-11-23 19-11-23.png
Affichages : 947
Taille : 12,2 Ko

3 - Utiliser ce fichier de configuration pour charger les couches voulues :

Avec l'extension pour OpenLayers en version 3.4.0-beta3

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
 
            <script src="chemin/vers/GpPluginOpenLayers-3.4.0-beta3.js" data-url="chemin/vers/mon/fichier/customConfig.json"></script>
 
            <script type="text/javascript">    
                var map;
                window.onload = function() {
                    map = new ol.Map({
                        target : "map",
                        view : new ol.View({
                            center : [288074.8449901076, 6247982.515792289],
                            zoom : 6
                        }),
                        layers : [
                            new ol.layer.Tile({
                                source : new ol.source.GeoportalWMTS({
                                    layer : "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR"
                                }),
                                opacity : 0.5
                            }),
                            new ol.layer.Tile({
                                source : new ol.source.GeoportalWMS({
                                    layer : "SCAN100_PYR-JPEG_WLD_WM"
                                })
                            })
                        ]
                    });
                };
            </script>

Avec l'extension pour Leaflet en version 2.4.0-beta3

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
 
        <script src="chemin/vers/GpPluginLeaflet-2.4.0-beta3.js"></script>
        <script type="text/javascript">   
        var createMap = function () {
              // Création de la map
              var layerWMTS = L.geoportalLayer.WMTS({
                layer : "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR"
              });
 
              var layerWMS = L.geoportalLayer.WMS({
                layer : "SCAN100_PYR-JPEG_WLD_WM"
              });
 
              var map  = L.map('map', {
                zoom : 10,
                center : L.latLng(48, 2)
              });
 
              layerWMTS.addTo(map);
              layerWMS.addTo(map);
            };
 
            Gp.Services.getConfig({
                customConfigFile: "chemin/vers/mon/fichier/customConfig.json",
                timeOut: 20000,
                onSuccess: createMap,
                onFailure: function (e) {
                    console.error(e);
                }
            });
         </script>

Avec l'extension pour iTowns en version 2.5.0-beta3

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
<script src="chemin/vers/GpPluginItowns-2.5.0-beta3.js"></script>
 
<script type="text/javascript">
    var createMap = function () {
        const positionOnGlobe = {
            coord: new itowns.Coordinates('EPSG:4326', 2.3465, 48.88, 0),
            zoom: 10,
            tilt: 45,
            heading: 0
        };
        // iTowns namespace defined here
        const viewerDiv = document.getElementById('viewerDiv');
        const globeView = new Gp.itownsExtended.GlobeViewExtended(viewerDiv, positionOnGlobe);
 
        globeView.listen(Gp.itownsExtended.GlobeViewExtended.EVENTS.GLOBE_INITIALIZED, () => {
            // Couche WMTS Geoportail
            globeView.addLayer(new Gp.itownsExtended.layer.GeoportalWMTS({
                layer: "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR",
                ssl: true
            }));
            // Couche WMS Geoportail 
            globeView.addLayer(new Gp.itownsExtended.layer.GeoportalWMS({
                layer: "SCAN100_PYR-JPEG_WLD_WM",
                ssl: true,
                itownsParams: {
                    opacity: 0.5
                }
            }));
        });
    }
 
    Gp.Services.getConfig({
        customConfigFile: "chemin/vers/mon/fichier/customConfig.json",
        timeOut: 20000,
        onSuccess: createMap
    });
</script>

Avec le SDK en version 3.5.0-beta3

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
 
     <script src="chemin/vers/GpSDK2D-3.5.0-beta3.js"></script>
 
    <script>
        var map = Gp.Map.load('viewerDiv',{
            customConfigFile : "chemin/vers/mon/fichier/customConfig.json",
            azimuth : 45,
            zoom : 13,
            center : {
                x : -511270,
                y : 6151620
            },
            layersOptions : {
                'GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN25TOUR': {
                },
                'SCAN100_PYR-JPEG_WLD_WM': {
                }
            },
            controlsOptions : {
                layerSwitcher : {
                    maximised : true
                }
            }
        })
    </script>

**saxrub** · 24/11/2023, 14h10

Et ça fonctionne en plus mais .... avec Leaflet, juste en mettant en ligne la beta3 ET sans modifier le customconfig, la carte IGN historique s'affiche !
Notez qu'avec OpenLayer, sans le nouveau fichier customconfig, la carte IGN ne s'affiche pas !

**elias couppe** · 24/11/2023, 18h55

Envoyé par saxrub

Et ça fonctionne en plus mais .... avec Leaflet, juste en mettant en ligne la beta3 ET sans modifier le customconfig, la carte IGN historique s'affiche !
Notez qu'avec OpenLayer, sans le nouveau fichier customconfig, la carte IGN ne s'affiche pas !

Bonjour,

effectivement, avec l'extension pour Leaflet, il va être possible d'ajouter une couche à accès restreint sans fichier de configuration comme suit :

Code javascript :

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

1
2
3
4
5
 
      var layer3 = L.geoportalLayer.WMTS({
        layer: "SCAN100_PYR-JPEG_WLD_WM_WMTS_3D",
        apiKey: "ign_scan_ws"
      });

Mais Attention ! Ce sera un affichage avec des paramètres par défaut (par exemple, dans le LayerSwitcher le titre de la couche ne s'affichera pas correctement sans paramétrage supplémentaire). Il faut privilégier la génération du fichier de configuration dans le cadre de l'utilisation de données à accès restreint.

**saxrub** · 29/11/2023, 11h58

Bonjour
Je viens de qualifier, avec pas mal d'adaptations, la bêta 3 pour les utilisations que j en fait !
Questions :
- Le planning se rétrécissant, la date de mise en ligne de la V1 de la version de production est-elle connue ?
- Comme je le présume, il ne devrait pas y avoir de grands changements par rapport à la bêta 3, est-il raisonnable de mettre en production mes pages utilisant Bêta 3 ?

**elias couppe** · 29/11/2023, 12h53

Bonjour,

j'ai déplacé ton retour sur le geocodage inverse dans la discussion dédiée au retours sur le service de géocodage de la Géoplateforme. L'ensemble des retours a bien été transmis aux experts et responsables du service.

Je ne suis malheureusement pas en mesure de te donner une date de version de production car celà dépend de la validation et mise en production des services à valeur ajoutée de la Géoplateforme.

Mais sache qu'il manque encore :
- le service d'itinéraire de la Géoplateforme
- le service d'isochrone/isodistance de la Géoplateforme
- le service d'altimétrie de la Géoplateforme

Ces services seront intégrés aux API au fur et à mesure, dès que validés en production, via de nouvelles Bêta.

La Bêta 3 par rapport à la Bêta 2 n'intègre que la possibilité d'utiliser des ressources à accès restreints via un fichier de configuration intégrant une clé Géoplateforme "privée".

**Guiguiii** · 30/11/2023, 11h25

Bonjour,
Comment se passera la génération de clés privées ? Quels éléments il faudra fournir pour obtenir une clé privée ?

**Karim IGN** · 30/11/2023, 13h21

Bonjour,

Les interfaces sont en cours de développement, toutefois le fonctionnement de création de clé et les informations à fournir sera similaire à celui existant actuellement sur le site des Géoservices.

Bonne journée

Karim

**cevennes34** · 09/12/2023, 08h45

Bonjour
Je ne comprends pas ce qu'il va falloir faire dans le cadre de la bascule geoplateforme.
J'ai questionnée geoservices par mail mais ils ne répondent pas clairement à ma question.
Je joins un script simplifié qui est une partie de ce que j'utilise sur mes 3 sites.
C'est tout bête, cela affiche une ortho et une carte IGN SCAN 25.
Est-ce que quelqu'un peut me dire s'il faudra modifier quelque chose dans ce script une fois la bascule réalisée ?
Pour info, actuellement, le nouveau service d'autoconfig ne marche pas (pour moie en tout cas), je dois saisir l'apiKey, mais ce n'est pas très gênant.
Merci.

Code :

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
58
59
60
61
62
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel='stylesheet' type='text/css' href='css/bootstrap.min.css' />
	<link rel='stylesheet' type='text/css' href='css/GpSDK2D.css' />
    <script src='js/GpSDK2D.js' language='JavaScript'></script> 
	<script src="js/jquery.min.js" language="JavaScript"></script>
	<script src="js/bootstrap.min.js" language="JavaScript"></script>
</head>
<body>
Test Geoportail
<div id="gp">

    <div  class='row mx-0' id='mapDiv' style='height:750px'>Carte  ici :</div>
    <script type="text/javascript">
        var map = Gp.Map.load("mapDiv",   
        {           
         // clef d'accés à la plateforme ou chemin acces fichier json pour acces plus rapide 
         //configUrl deprecated
         //configUrl: "js/autoconf-https.json",
         // clef d'accès à la plateforme
         apiKey: "th45xxxxxxxxxxxxxx",
         //customConfigFile : "js/customConfig.json",
         // centrage de la carte
         center :  {
                x : 3.386993,
                y : 43.647746,
                    projection : "CRS:84"
                },
         // Couches à afficher
         layersOptions : {

            "orthophoto" : {
                 title : "vues aeriennes",
                 format : "WMS",
                 version : "1.3.0",
                 url : "https://wxs.ign.fr/ortho/geoportail/r/wms",
                 layers : ["ORTHOIMAGERY.ORTHOPHOTOS"],
                 outputFormat : "image/png",
                 opacity : 0.8,
             },


             "GEOGRAPHICALGRIDSYSTEMS.MAPS" : {
                 title : "carte IGN",
                 opacity : 0.8,
                 },

                },
                controlsOptions : {
             "layerSwitcher" : {},
             "graphicscale" : {}
         
            },
               
    }) ;
    </script>
</div>

</body>

**Karim IGN** · 11/12/2023, 18h38

Bonjour,

Nous vous avons envoyé suite à votre demande support les éléments demandés à savoir le fichier de config et un compte rendu conforme user_test_SDK (1).html
Nous avons vu vos différents messages sur la Communauté Osmose et le forum développez.net.
Vous retrouverez dans en PJ la configuration pour votre site avec les données souhaitées.

Nous vous invitons à bien utiliser la Release 3.5.0-beta3 du SDK, autrement la config ne fonctionnera pas puisque les versions antérieures n’intègrent pas ces changements.

Si vous utilisez les services d'altimétrie, il faudra passer à la beta4 (quand elle sortira) pour les intégrer de nouveau à votre site.

Nous avons ajouté dans votre code les commentaires qui décrivent les adaptations à faire à savoir:

1/ générer une customConfig personnalisée en fonction des couches désirées (ici le SCAN + l'orthophoto) à l'aide de l'outil temporaire: https://geoplateforme-configuration.onrender.com/

2/ remplacer le [configUrl : "../resources/autoconf.js"] par [customConfigFile : "chemin/vers/ma/config/customConfig.json"] comme expliqué ici: https://www.developpez.net/forums/d2...geoplateforme/

3/ changer la syntaxe d'ajout de couche, qui peut être simplifiée grâce à l'appel à la customConfi

Bonne soirée

**elias couppe** · 15/12/2023, 16h09

Les versions bêta 4 des API JavaScript ont été publiées pour y utiliser le service d'altimétrie de la Géoplateforme.

Elles permettent d'utiliser le service d'altimétrie de la géoplateforme via :
- la bibliothèque d'accès aux services
- les widgets de profil altimétrique et de mousePosition des extensions pour OpenLayers, extensions pour Leaflet, extensions pour iTowns.
- les widgets de profil altimétrique et de mousePosition du SDK.

Plus d'informations sur le service d'altimétrie de la Géoplateforme sur cette page de Géoservices.

Ci-après, quelques exemples d'utilisation :

Bibliothèque d'accès au services bêta 4 :

Altimétrie

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
        var options = {
            apiKey : "{{ apikey }}",
            onSuccess : function (response) {
                print(response.elevations);
            },
            // spécifique au service
            positions : [{
                lon : 8.8,
                lat : 42
            }]
        };
        Gp.Services.getAltitude(options);

Extensions pour OpenLayers en bêta 4 :

Profil altimétrique

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var elevation_gpf_options = {
                active: true,
                elevationOptions: {
                    sampling: sampling, // 200 par défaut
                    resource: resource, // ign_rge_alti_wld par défaut
                    measures: measuresParam, // false par défaut
                    onSuccess: function (response) {
                        print(response, "divId");
                    }
                }
            };
 
var elevation_gpf = new ol.control.ElevationPath(elevation_gpf_options);

SDK bêta 4 :

Profil altimétrique & MousePosition

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
        var map = Gp.Map.load('geoportalMap',{
            azimuth : 45,
            zoom : 12,
            layersOptions : {
                'ORTHOIMAGERY.ORTHOPHOTOS': {
                },
            },
            controlsOptions : {
                mousePosition : {
                },
                elevationPath : {
                }
            }
        });

**EPINRAP** · 22/12/2023, 10h45

Bonjour,
est-il prévu de rendre l'extension OL compatible avec les dernières versions 7 et 8 ?
si oui quand ?
Sachant que si les écarts de versions deviennent trop grands, cela pourrait inciter à chercher d'autres solutions ailleurs ou à développer ses propres outils...

**elias couppe** · 22/12/2023, 11h56

Envoyé par EPINRAP

Bonjour,
est-il prévu de rendre l'extension OL compatible avec les dernières versions 7 et 8 ?
si oui quand ?
Sachant que si les écarts de versions deviennent trop grands, cela pourrait inciter à chercher d'autres solutions ailleurs ou à développer ses propres outils...

Bonjour,

sauf mauvaise surprise, en 2024.

Nous ne pouvions raisonnablement pas forcer les utilisateurs à monter de version les API JS pour être compatible Géoplateforme et en même temps les forcer à passer à OpenLayers 8 (certains étaient encore sous OpenLayers 3).

Nous avons donc décidé de le faire en deux temps :
- des premières versions adaptatives à la Géoplateforme que les utilisateurs doivent intégrer à leur application pour qu'elles continuent de fonctionner en 2024.
- des nouvelles versions compatibles OpenLayers 7/8 courant 2024 des API JS sans contrainte spécifique pour les utilisateurs.

**EPINRAP** · 22/12/2023, 12h04

Envoyé par elias couppe

Bonjour,

sauf mauvaise surprise, en 2024.

Nous ne pouvions raisonnablement pas forcer les utilisateurs à monter de version les API JS pour être compatible Géoplateforme et en même temps les forcer à passer à OpenLayers 8 (certains étaient encore sous OpenLayers 3).

Nous avons donc décidé de le faire en deux temps :
- des premières versions adaptatives à la Géoplateforme que les utilisateurs doivent intégrer à leur application pour qu'elles continuent de fonctionner en 2024.
- des nouvelles versions compatibles OpenLayers 7/8 courant 2024 des API JS sans contrainte spécifique pour les utilisateurs.

Donc c'est prévu en 2024.
C'est bon à savoir.
Merci

**fabienGer** · 10/01/2024, 12h12

Bonjour,

Je cherche à générer le fichier customconfig avec les nouvelles urls de la geoplateforme.
l'utilitaire https://geoportal-configuration.onrender.com/ semble générer des fichiers avec les urls du geoportail https://wxs.ign.fr/ortho/geoportail

existe t'il un utilitaire qui fait ça pour la geoplateforme ?

Cordialement.

**saxrub** · 10/01/2024, 12h48

Salut
Ton lien de test date un peu !
Je viens de faire un test avec https://geoplateforme-configuration.onrender.com/ et les adresses des URL pointent bien vers https://data.geopf.fr

**elias couppe** · 10/01/2024, 15h40

Effectivement, comme le dit saxrub, l'utilitaire pour la geoplateforme est accessible sur https://geoplateforme-configuration.onrender.com/

**fabienGer** · 10/01/2024, 15h50

Envoyé par saxrub

Salut
Ton lien de test date un peu !
Je viens de faire un test avec https://geoplateforme-configuration.onrender.com/ et les adresses des URL pointent bien vers https://data.geopf.fr

Merci pour la réponse rapide, j'était tombé sur cette url, mais j'ai été troublé par la notion de clef privé que je pensais obligatoire.

J'ai également une question qui concerne la transparence des couches, j'utilise openLayer, et lorsque je déclare un groupe de couhce avec par exemple :
GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2 et LIMITES_ADMINISTRATIVES_EXPRESS.LATEST
La couche LIMITES_ADMINISTRATIVES_EXPRESS.LATEST est "opaque" le fond est blanc et non transparant, ~~celà est il lié au flux lui même ou bien à ma configuration ?~~

Après quelques tests, cela semble lié au fait que j'ajoutais la couche LIMITES_ADMINISTRATIVES_EXPRESS.LATEST en WMS en non en WMTS, le WMTS semble fonctionner correctement.

**saxrub** · 11/01/2024, 08h36

Ce sujet a été traité dans un autre post (https://www.developpez.net/forums/d2...-api-beta-4-a/).
Le plus simple (à plus d'un égard) est d'utiliser les fichiers customconfig qui affranchissent de passer tous les paramètres dans les URL quand on les ajoute dans la map.

**jripolles** · 07/02/2024, 18h06

Bonjour,

Je teste l'extension Leaflet beta-3 sur un serveur web local.
La version leaflet utilisée est la 1.7.1.
J'ai généré le fichier customConfig.json en utilisant la page de configuration https://geoplateforme-configuration.onrender.com/.

Cela fonctionne globalement, mais certaines tuiles ne se chargent pas.

En regardant la console JavaScript, le message d'erreur "Layer GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2 inconnu" est étrange puisque c'est la même couche pour les requêtes qui aboutissent / tuiles qui sont chargées.

Je vous joins une copie d'écran du test pour éclairer ces propos:
Nom : leaflet_test_screen_shot.jpg
Affichages : 568
Taille : 529,7 Ko

Nom : leaflet_test_screen_shot.jpg
Affichages : 568
Taille : 529,7 Ko

A toutes fins utiles, je joins également à ce post le fichier index.html.
Ce forum n'accepte pas le fichier customConfig.json mais je peux vous le transmettre également si besoin.

1 - Pourquoi ce message d'erreur sur certaines tuiles ?
2 - Comment peut-on recharger les tuiles en erreur avec l'extension GpPluginLeaflet.js ?

En vous remerciant pour votre aide.

**xavlight** · 07/02/2024, 18h16

Salut jripolles,

Touche pas ton code, il doit être bon. Pour moi il y a un soucis sur la plateforme Geoplateforme.
J'ai le même problème avec l'extension OpenLayers.
Erreur 400 (Bad Request)

Il y avait hier un incident qui est indiqué résolu.
https://geoservices.ign.fr/actualite...-actu-incident

Tu devrais attendre un peu.
Et voir si le support de l'IGN nous indique s'il y a un incident.

Xav

Questions autour des adaptations des API JavaScript Geoportail dans le cadre de la Géoplateforme

IGN API Géoportail

Discussions similaires

Partager

Partager