Discussion :

[Eckmül]

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 :

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
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 :

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

[NoSmoking]

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

A lire : Les modules JavaScript

[Eckmül]

Je l'intègre comme ça :

Code html :

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

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" />

[NoSmoking]

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

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.

[Eckmül]

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 :

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 :

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 :

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

1
2
3
<!-- SDK Géoportail -->
<script src="chemin/vers/GpSDK2D.js"></script>
<link rel="stylesheet" href="chemin/vers/GpSDK2D.css" />

Utilisation dans module ES6

Code :

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

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 :

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

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

comme dans la documentation du SDK ou

Code :

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

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

[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 html :

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

1
2
3
4
<!-- SDK Géoportail -->
<script src="../../../api/GpSDK-2D-3.1.9/GpSDK2D.js"></script>
<!-- fichier qui utilise Géoprotail -->
<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.

[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.