Problème avec carte interactive utilisant le SDK 2D

**mlemonni** · 20/06/2022, 17h55

Bonjour à toutes et tous
Depuis plusieurs mois (!) j'essaie d'afficher une carte interactive en utilisant le kit de développement Géoportail. J'ai fidèlement recopié l'exemple proposé sur jsfiddle dans mes propres fichiers html et css, j'ai importé le SDK, j'ai mis tout dans le même répertoire et adapté les chemins d'accès et de lien. Quand j'appelle la page html, n'y apparait que le cadre de la div censée contenir la carte, mais elle est vide, comme vous pouvez le voir ici. Je m'arrache les cheveux.
Je peux me permettre de vous montrer ça ?
Merci beaucoup d'avance
Marc

Mon fichier html :

Code HTML :

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
<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
 
<head>
    <meta charset="utf-8" />
    <script src="GpSDK2D.js"></script>
    <script src="GpSDK2D-map.js"></script>
 
    <script>
        var map = Gp.Map.load(
            "divMap",   // identifiant du conteneur HTML
            // options d'affichage de la carte (Gp.MapOptions)
            {
                // clef d'accès à la plateforme
                apiKey: "essentiels",
                // 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.PLANIGNV2": {}
                }
            });
    </script>
    <link href="carte.css" rel="stylesheet" />
    <title>Titre page carte</title>
 
 
</head>
 
<body>
    <h1>Affichage de la carte</h1>
    <div id="divMap"></div>
    <p>Fin d'affichage</p>
</body>
</html>

Mon css :

Code CSS :

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
h1 {
    color: blue;
    background-color: yellow;
    border: 1px solid black;
}
 
p {
    color: red;
}
 
#divMap {
    padding: 5px;
    width: 100%;
    height: 600px;
    box-shadow: 0 0 10px #999;
}
 
#info {
    padding: 5px;
    width: 100%;
    height: 20px;
    font-family: "monospace";
    font-size: 10px;
}

**azarzelli** · 21/06/2022, 16h12

Bonjour,

Le problème est que le script est écrit avant la définition de la div qui a pour id divMap. Ainsi, le code va chercher une div qui n'existe pas encore, d'où l'erreur.

Une solution serait de déplacer les balises <script> avec votre code en bas du fichier, avant la fermeture du body :

Code html :

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
<!DOCTYPE html>
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
 
<head>
    <meta charset="utf-8" />
    <script src="GpSDK2D.js"></script>
    <script src="GpSDK2D-map.js"></script>
    <link href="carte.css" rel="stylesheet" />
    <title>Titre page carte</title>
 
 
</head>
 
<body>
    <h1>Affichage de la carte</h1>
    <div id="divMap"></div>
    <p>Fin d'affichage</p>
 
    <script>
        var map = Gp.Map.load(
            "divMap",   // identifiant du conteneur HTML
            // options d'affichage de la carte (Gp.MapOptions)
            {
                // clef d'accès à la plateforme
                apiKey: "essentiels",
                // 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.PLANIGNV2": {}
                }
            });
    </script>
</body>
</html>

**mlemonni** · 21/06/2022, 16h28

Très grand merci azarzelli, le problème n'était pas du tout là où je le cherchais, cela aurait pu durer encore très longtemps. Je vais enfin pouvoir me mettre au travail !
Encore merci
Marc

Problème avec carte interactive utilisant le SDK 2D

IGN API Géoportail

Discussions similaires

Partager

Partager