Intégration module carte API geoportail

Version imprimable

Bonjour,

Je voulais essayer de suivre ce tuto pour créer une API SDK sur mon site afin de faire référence à Geoportail, mais j'ai deux problèmes :

- Quand j'importe la ligne de bibliothèque j'ai un message d'erreur qui est renvoyé
- Je ne suis pas sur de comment obtenir les clès, j'ai essayer de télécharger un pdf qui permet d'avoir les clés, mais je ne suis pas sur d'à quoi correspondent les clés

voici mon code JS :

Code:

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
import * as Gp from "@ignf-geoportal/sdk-2d";
 
// votre utilisation du SDK
var map = Gp.Map.load(
    "mapSDK",   // identifiant du conteneur HTML
    // options d'affichage de la carte (Gp.MapOptions)
    {           
         // clef d'accès à la plateforme
         apiKey: "GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2 - WMTS",
         // centrage de la carte
         center : {
             location : "73 avenue de Paris, Saint-Mandé"
         },
         // niveau de zoom de la carte (de 1 à 21)
         zoom : 17,
         // Couches à afficher
         layersOptions : {
             "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD" : {
             }
         },
         // Outils additionnels à proposer sur la carte
         controlsOptions : {
             // ajout d'une barre de recherche
             "search" : {
                 maximised : true
             }
         },
         // Repères visuels
         markersOptions : [{
             content : "<h1>Pôle Géosciences</h1><br/><p>73 avenue de Paris, Saint-Mandé</p><br/><p><a href='http://www.pôle-géosciences.fr/index.htm' target='_blank'>Site Web</a></p>"
         }]
    }    
) ;

et le renvoi de la console sous firefox :

Citation:

Uncaught SyntaxError: import declarations may only appear at top level of a module

07/07/2021, 18h54
NoSmoking

Bonjour,
comment intègres tu ton script dans ta page ?

A lire : Les modules JavaScript

Je l'intègre comme ça :

Code:

1
2
3
4
5
6
7
8
<div id="mapSDK"></div>
 
...
 
        <script src="../../js/map.js"></script>
        <!-- SDK Géoportail -->
        <script src="../../../api/GpSDK-2D-3.1.9/GpSDK2D.js"></script>
        <link rel="stylesheet" href="../../../api/GpSDK-2D-3.1.9/GpSDK2D.css" />

09/07/2021, 09h44
NoSmoking

T'es tu donné la peine de lire le lien fourni !?!
A minima :

Citation:

Envoyé par MDN

Tout d'abord, il est nécessaire d'indiquer type="module" dans l'élément <script> afin d'indiquer qu'on charge des modules :

D'autre part si dans ton script tu utilises des méthodes décrites dans l'API SDK, il y a lieu d'intégrer celui-ci après l’intégration de l'API SDK, mais cela fait parte des bases.
12/07/2021, 10h18
Eckmül
Citation:

T'es tu donné la peine de lire le lien fourni !?!

@NoSmoking

Loin de moi l'idée d'ignorer tes conseils, je voulais juste répondre à la deuxième partie de ta question. Je lis les liens qu'on m'envoie en général et je ne pense pas être irrespectueux sur les forums. Merci du coup pour le lien de documentation. Après lecture de cette documentation j'ai plusieurs questions qui me viennent :

La documentation Mozilla dit :

Citation:

On utilise ici l'instruction import, suivi d'une liste d'identifiants séparées par des virgules et délimitée par des accolades, suivie du mot-clé from puis du chemin vers le fichier du module. Le chemin est relatif à la racine du site. Dans notre cas, pour basic-module, on écrira /js-examples/modules/basic-modules.

et la documentation de l'appli SDK dit :
Citation:
Intégration dans une page web

Placez les fichiers du SDK géoportail dans l’arborescence de votre serveur web. Vous pouvez positionner à votre guise les fichiers css et javascript.

Intégrez le SDK géoportail dans votre page web classiquement à l’aide d’une balise script pour charger le fichier javascript et d’une balise link pour charger le fichier css.

Code:

1 2 3  <script src="chemin/vers/GpSDK2D.js"></script> <link rel="stylesheet" href="chemin/vers/GpSDK2D.css" />

Utilisation dans module ES6

Code:

1 2 3 4 5 6 7 import * as Gp from "@ignf-geoportal/sdk-2d"; // votre utilisation du SDK var map = Gp.Map.load("myDivId",{ apiKey : "myApiKey", ... });
du coup je ne suis pas sur de ce que représente le "chemin" que je dois rentrer pour faire référence à la bonne bibliothèque :

Code:

import * as Gp from "@ignf-geoportal/sdk-2d"

comme dans la documentation du SDK ou

Code:

import * as Gp from "./api/GpSDK-2D-3.1.9/GpSDK2D-map.js";

sachant que c'est l'endroit où j'ai rangé les api GpSDK qui doivent servir à afficher les cartes
15/07/2021, 11h03
NoSmoking
Le plus simple inclure, dans le bon ordre, les fichiers JS dans la page et supprimer le import dans ton fichier JS d''initialisation de la carte.
Code:

1 2 3 4  <script src="../../../api/GpSDK-2D-3.1.9/GpSDK2D.js"></script>  <script src="../../js/map.js"></script>
Bien faire attention à l’emplacement des fichiers, par rapport à l'appelant, qui visiblement ne sont pas au même niveau.
15/07/2021, 11h25
Eckmül

Merci pour tes infos, à priori, ça a amélioré quelque chose puisque j'ai réussi à afficher l'interface de l'API avec la barre "rechercher" les boutons de zooms et un marqueur, je n'ai pas encore le couches, mais je vais essayer de me débrouiller seul. Au pire je reviendrai sur un autre sujet.