SDK : erreurs css et js

Version imprimable

22/08/2017, 10h14
michelD13

SDK : erreurs css et js

Bonjour,

J'essaye de passer à la version 3 de l'API ; j'ai commencé par utiliser SDK avec le premier script d'exemple trouvé à l'adresse : http://jsfiddle.net/ignfgeoportail/a...t,js,html,css/

Je n'ai modifié que la clé Geoportail.
visible à l'adresse : http://gpx2tdm.free.fr/sdk.html

J'obtiens une page blanche avec un grand nombre d'erreurs css et js ; j'ai pensé à un problème lors du téléchargement de SDK ; j'ai donc téléchargé et décompressé à nouveau SDK mais j'obtiens toujours les mêmes erreurs.

D'autres utilisateurs rencontrent-ils les mêmes problèmes ?
Y a-t-il des solutions ?

Voici la liste des erreurs obtenues :

Nom d’attribut ou espace de noms attendu, mais « ^= » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:26:334
Nom d’attribut ou espace de noms attendu, mais « ^= » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:26:385
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:26:1185
« : » attendus, mais « margin-top » trouvé. Déclaration abandonnée. GpOl3.css:27:4
« : » attendus, mais « margin-bottom » trouvé. Déclaration abandonnée. GpOl3.css:27:25
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:3691
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:6137
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:6909
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:7842
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:9393
Propriété « user-select » inconnue. Déclaration abandonnée. GpOl3.css:27:10285
Pseudo-classe ou pseudo-élément « -webkit-slider-runnable-track » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:13116
Pseudo-classe ou pseudo-élément « -webkit-slider-thumb » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:13216
Pseudo-classe ou pseudo-élément « -webkit-slider-thumb » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:13356
Erreur d’analyse de la valeur pour « box-shadow ». Déclaration abandonnée. GpOl3.css:27:13695
Pseudo-classe ou pseudo-élément « -ms-track » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:13774
Pseudo-classe ou pseudo-élément « -ms-fill-lower » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:13896
Pseudo-classe ou pseudo-élément « -ms-thumb » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:14027
Pseudo-classe ou pseudo-élément « -ms-tooltip » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:14141
Une fin de valeur était attendue, mais « 15px » a été trouvé. Erreur d’analyse de la valeur pour « padding-left ». Déclaration abandonnée. GpOl3.css:27:18282
Sélecteur attendu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:20162
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:20425
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:21200
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:22506
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:24066
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:24824
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:25517
« ] » pour terminer un sélecteur d’attribut attendu, mais « . » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:33608
« ] » pour terminer un sélecteur d’attribut attendu, mais « . » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:33737
« ] » pour terminer un sélecteur d’attribut attendu, mais « . » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:33875
« ] » pour terminer un sélecteur d’attribut attendu, mais « . » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:34006
« ] » pour terminer un sélecteur d’attribut attendu, mais « . » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:34137
« ] » pour terminer un sélecteur d’attribut attendu, mais « . » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:34273
« ] » pour terminer un sélecteur d’attribut attendu, mais « . » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:34409
« ] » pour terminer un sélecteur d’attribut attendu, mais « . » trouvé. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:34543
Erreur d’analyse de la valeur pour « margin ». Déclaration abandonnée. GpOl3.css:27:37198
Pseudo-classe ou pseudo-élément « -webkit-slider-runnable-track » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:37429
Pseudo-classe ou pseudo-élément « -webkit-slider-thumb » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:37554
Pseudo-classe ou pseudo-élément « -webkit-slider-thumb » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:37697
Erreur d’analyse de la valeur pour « box-shadow ». Déclaration abandonnée. GpOl3.css:27:38091
Pseudo-classe ou pseudo-élément « -ms-track » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:38148
Pseudo-classe ou pseudo-élément « -ms-fill-lower » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:38295
Pseudo-classe ou pseudo-élément « -ms-thumb » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:38536
Pseudo-classe ou pseudo-élément « -ms-tooltip » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:38662
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:41122
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:41520
Erreur d’analyse de la valeur pour « display ». Déclaration abandonnée. GpOl3.css:27:41987
Pseudo-classe ou pseudo-élément « -webkit-slider-runnable-track » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:44073
Pseudo-classe ou pseudo-élément « -ms-track » inconnu. Jeu de règles ignoré suite à un mauvais sélecteur. GpOl3.css:27:44270
« : » attendus, mais « z-index » trouvé. Déclaration abandonnée. GpOl3.css:28:2
Propriété « user-select » inconnue. Déclaration abandonnée. GpOl3.css:29:669
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:36:5303
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:36:5571
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:36:7563
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:36:14254
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:36:26421
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:39:1572
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:39:2090
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:39:2197
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:39:6780
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:39:25134
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:40:2056
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:42:7993
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:43:16317
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:44:25923
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:44:30381
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:45:2284
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:53:7074
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:59:9044
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:59:10042
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:59:11942
SyntaxError: test for equality (==) mistyped as assignment (=)?[En savoir plus] GpOl3.js:67:15802
Error: HTML element with id [null] not found. GpOl3.js:71:23423
load http://gpx2tdm.free.fr/sdk-ol3/GpOl3.js:71:23423
<anonyme> http://gpx2tdm.free.fr/sdk.html:29:14

Cordialement

Michel D
22/08/2017, 16h15
IGNC_XT

Bonjour,
Je prends connaissance de ce message et n'ai pas pris le temps de tester.

Je remarque seulement que vous utilisez une version du SDK (@version 1.0.0-beta1) différente de l'exemple fiddle (version 1.0.0-beta2-dev). Avez vous testé en changeant de version?

J'ai par contre bien noté que cette ambiguité était aussi sur le site geoservices.ign.fr, je fais remonter le problème.
22/08/2017, 16h30
michelD13

Merci pour votre réponse.
J'ai téléchargé la version beta2 à l'adresse : https://depot.ign.fr/geoportail/sdk/develop/bin/ol3/
Mais j'obtiens les mêmes erreurs : http://gpx2tdm.free.fr/sdk_dev.html
Cordialement

Bonjour,
Ce n'est pas le CSS le problème. Je suppose qu'il est prévu pour appliquer un style à de nouvelles fonctionnalités en cours de développement d'où les erreurs à la lecture par le navigateur.

En fermant la balise head après la balise style et en intégrant le script dans le body, la page apparait.
Code ci-dessous mais n'oubliez pas de modifier les src du css et du 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
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
63
<html  lang="fr-fr">
	<head>
		<title>gpxRandoEditeur</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<!-- SDK Géoportail -->
<!-- SDK Géoportail -->
	<script src="../apis/GpSDK/sdk-ol3/GpOl3.js"></script>
	<link rel="stylesheet" href="../apis/GpSDK/sdk-ol3/GpOl3.css" />
		<style type="text/css">
                        #map {
                                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;
                        }
                </style>
</head>
		<body>
		<div id="map"></div>		
		<script type="text/javascript">
                // source : http://jsfiddle.net/ignfgeoportail/a9Lhp3tz/embedded/result,js,html,css/
                        var map = Gp.Map.load(
                                "map", // html div
                                {
                                        // Geoportal access key obtained here : http://professionnels.ign.fr/ign/contrats
                                        apiKey: "llnhvu54fgp0z8qbdspxenim",
                                        // map center
                                        center : {
                                                location : "73 avenue de Paris, Saint-Mandé"
                                        },
                                        // map zoom level
                                        zoom : 15,
                                        // layers to display
                                        layersOptions : {
                                                "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD" : {
                                                }
                                        },
                                        // additional tools to display on the map
                                        controlsOptions : {
                                                "search" : {
                                                        maximised : true
                                                }
                                        
                                        },
                                        // markers to put in the map
                                        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>"
                                        }]
                                }    
                        ) ;
                
                </script>
 
	</body>
</html>

23/08/2017, 08h58
lowzonenose

Sur cette URL http://gpx2tdm.free.fr/sdk_dev.html, La CSS et le JS du SDK ne correspondent pas !?

Citation:

JS
* @version 1.0.0-beta1
* @date 2016-12-07
CSS
* @version 1.0.0-beta2-dev
* @date 2017-08-22

div map pas encore chargée au moment de l'exécution

Bonjour,

Si je teste votre code, je constate une erreur simple : les balises <div id="map"></div> et <div id="info"></div> sont placées après la balise <script>, elles ne sont donc pas encore chargées dans le document lors de l’exécution du code JavaScript. (la carte ne peut donc pas être ajoutée à la balise "map" qui n'existe pas encore).

Deux solutions :
* simplement déplacer ces balises AVANT la balise <script> :
Code:

1 2 3 4 5 6 7 8 9 10 11 <body> <div id="map"></div> <div id="info"></div> <script type="text/javascript"> // source : http://jsfiddle.net/ignfgeoportail/a9Lhp3tz/embedded/result,js,html,css/ var map = Gp.Map.load( (...) ) ; (...) </script> </body>
* ou intégrer le code JavaScript dans une fonction window.onload afin d'attendre que l'ensemble de la page soit chargé (document + images + sources (y compris la librairie GpOl3.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 34 35 36 37 38 39 40 41 <body> <script type="text/javascript"> window.onload = function () { // source : http://jsfiddle.net/ignfgeoportail/a9Lhp3tz/embedded/result,js,html,css/ var map = Gp.Map.load( "map", // html div { // Geoportal access key obtained here : http://professionnels.ign.fr/ign/contrats apiKey: "llnhvu54fgp0z8qbdspxenim", // map center center : { location : "73 avenue de Paris, Saint-Mandé" }, // map zoom level zoom : 15, // layers to display layersOptions : { "GEOGRAPHICALGRIDSYSTEMS.MAPS.SCAN-EXPRESS.STANDARD" : { } }, // additional tools to display on the map controlsOptions : { "search" : { maximised : true } }, // markers to put in the map 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>" }] } ) ; var infoDiv = document.getElementById("info"); infoDiv.innerHTML = "<p> SDK version " + Gp.sdkVersion + " (" + Gp.sdkDate + ")</p>"; }; </script> <div id="map"></div> <div id="info"></div> </body>
Pour plus d'infos sur l'exécution de la balise script : https://developer.mozilla.org/fr/doc...Element/script.

Laurane