une aide svp

**gbosnay** · 01/11/2017, 11h43

j'ai mis sur mon site des traces gpx avec l'ancienne API
cela fonctionner mais depuis ca ne fonctionne plus
voila un exemple qui fonctionner
https://www.uzesveloclub.fr/geoportail/VTTUZES/

quelqu'un peut m'aider pour que cela fonctionne a nouveau
merci

index.html.zip

j'ai installe la nouvelle version
https://www.uzesveloclub.fr/ign/
mais je ne comprends pas du tout les nouvelles fonctions
merci

**lboulanger** · 02/11/2017, 10h26

Bonjour,

Ancienne API

Tout d'abord, nous attirons votre attention sur le fait que l'API Géoportail v2, que vous utilisez dans votre premier exemple, n'est plus maintenue par l'IGN (par exemple le lien vers l'image de chargement (loading.gif) est cassé).
(Cf. cette annonce et cette FAQ sur les changements de l'API).

Ce premier exemple (https://www.uzesveloclub.fr/geoportail/VTTUZES/) ne fonctionne plus entre autres car votre site est en https, alors que l'url utilisée pour récupérer la librairie de l'API est en http, elle est donc bloquée par le navigateur. Il faudrait donc déjà essayer de modifier l'url d'appel en "https://api.ign.fr/geoportail/api/js/2.1.2/GeoportalExtended.js".

Cependant, comme nous ne garantissons plus l'accès à cette version de l'API et donc à cette url, je vous conseille de récupérer le contenu de cette librairie en local, et de remplacer l'url d'accès par la votre et non plus celle sur le site api.ign.fr.

Leaflet

Dans votre deuxième page, vous utilisez Leaflet, mais j'ai l'impression que les appels aux librairies sont aussi bloqués pour des raisons de sécurité (site en https et requêtes http).
Pour intégrer ensuite des couches dans votre carte, n'hésitez pas à parcourir ce tutoriel ou encore les documentations de Leaflet, ainsi que les plugins proposés pour Leaflet, pour l'intégration de KML par exemple.

N'hésitez pas à préciser vos besoins afin qu'on puisse mieux vous aiguiller.

Laurane

**gbosnay** · 15/11/2017, 21h21

Mais c'est beaucoup trop compliquer pour moi

avec la v2 j'avais trouver un page exemple, j'avais mis une clef api ign que j'avais recuperer sur un compte pro (http://professionnels.ign.fr) car etant une association j'ai une clef gratuite

j'ai mis mes couche KML ou gpx et cela à focntionner depuis 2013

mais avec la V3 tout a changer et meme en lisant les tutos je ne comprends rien

j'ai juste besoin de faire une page html avec couche (ign ) et de poser dessus plusieures traces GPX ou KML de circuits VTT

est-ce quelqu'un peux me donner une page exemple avec l'api V3 ou je n'ai plus qu'a changer la clef API et les couches KML ou gpx

genre :

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>12 circuits</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <style type="text/css"><!--/*--><![CDATA[/*><!--*/
    div#viewerDiv {
        width:1600px;
        height:1200px;
        background-color:white;
        background-image:url(<a href="http://api.ign.fr/geoportail/api/js/1.3/theme/geoportal/img/loading.gif);" target="_blank">http://api.ign.fr/geoportail/api/js/.../loading.gif);</a>
        background-position:center center;
        background-repeat:no-repeat;
    }
        /*]]>*/--></style>
 
  </head>
<body>
<div id="viewerDiv"></div>
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    window.onload= function() {
        Geoportal.load(
            // div's ID:
            'viewerDiv',
            // API's keys:
            ['jvih6v86xkfa1y0x0lzwm13b'],
            {// map's center :
                // longitude:
                lon:4.47140,
                // latitude:
                lat:44.00320,
            },
                        //zoom
                        14,
                        {// les options
                        viewerClass:Geoportal.Viewer.Default, //pour mettre la boite à outil standard (zoom, coordonnées, gestion des couches de données..)
                        //layers:['ORTHOIMAGERY.ORTHOPHOTOS:WMSC', 'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC'],
                        layersOption:{  'ORTHOIMAGERY.ORTHOPHOTOS:WMSC':{visibility:true,opacity:0.65},
                                                        'GEOGRAPHICALGRIDSYSTEMS.MAPS:WMSC':{visibility:true,opacity:0.1},
                                                        },//fin des options des couches Géoportail                     
                                //overlay{...} sert à ajouter des couches locales (gpx et kml) et des web services (wms)
                        overlays:{      
                        
                                                'kml':[
                                                
                                                  
                                                {'name':"CIrcuit 1", 'url':'1.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                {'name':"CIrcuit 2", 'url':'2.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                {'name':"CIrcuit 3", 'url':'3.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                {'name':"CIrcuit 4", 'url':'4.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                {'name':"CIrcuit 5", 'url':'5.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                {'name':"CIrcuit 6", 'url':'6.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                {'name':"CIrcuit 7", 'url':'7.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                {'name':"CIrcuit 8", 'url':'8.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                {'name':"CIrcuit 9", 'url':'9.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                {'name':"CIrcuit 10", 'url':'10.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                {'name':"CIrcuit 11", 'url':'11.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                {'name':"CIrcuit 12", 'url':'12.kml', options:{minZoomLevel:8,maxZoomLevel:17}},
                                                                                        
                                        
                                                        ],
                                                
                                                                
                                        }//fin de overlays
                                         
                                        
                        }//fin des options
        );
    };
    //--><!]]></script>
 
    <script type="text/javascript" charset="utf-8" src="https://api.ign.fr/geoportail/api/js/2.1.2/GeoportalExtended.js">
</script>
</body>
</html>

**lboulanger** · 17/11/2017, 15h53

Bonjour,

* Télécharger le dossier suivant contenant les librairies du SDK Géoportail : https://github.com/ignf/geoportal-sd...ta.1/GpSDK.zip
* Extraire l'archive dans un dossier où vous souhaitez déployer votre exemple
* Créer un fichier HTML avec le code suivant (en remplaçant éventuellement les informations en gras, en particulier la clé de contrat) :

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
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Carte IGN avec ajout de KML</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- Extension Géoportail pour OpenLayers 3 -->
        <link rel="stylesheet" href="sdk-ol3/GpOl3.css" />
        <script src="sdk-ol3/GpOl3.js"></script>
    </head>
    <body>
	<div>
		<p>Carte IGN avec ajout de KML (utilisation du SDK Géoportail)</p>
	</div>
	<div id="map" style="width: 700px; height: 400px;"></div>
        <script>
		var map = Gp.Map.load(
			"map", // div html <div id="map">
			{
				 // Votre clé de contrat
				 apiKey: "VOTRE_CLE",
				 // centre (ici en longitude / latitude, en EPSG:4326. Plus d'options ici : https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Center.html)
				 center : {
					 x : 4.47140,
					 y : 44.00320,
					 projection : "EPSG:4326"
				 },
				 // map zoom level
				 zoom : 14,
				 // Couches à afficher. Plus d'options ici : https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html
				 layersOptions : {
					 // Photographies aériennes
				 	"ORTHOIMAGERY.ORTHOPHOTOS" : {
						opacity : 0.5
					},
   					 // Cartes IGN
				 	"GEOGRAPHICALGRIDSYSTEMS.MAPS" : {
						opacity : 0.1
					},
					// vos couches KML
					"kml1" :
					 {
						 format : "kml", // format, obligatoire
						 title : "Circuit 1", // nom de votre kml à afficher dans le gestionnaire de couches
						 url : "data/kml1.kml", // Url vers votre fichier KML
						 minZoom : 8,
						 maxZoom : 17
					 },
 					"kml2" :
 					 {
 						 format : "kml", // format, obligatoire
 						 title : "Circuit 2", // nom de votre kml à afficher dans le gestionnaire de couches
 						 url : "data/kml2.kml", // Url vers votre fichier KML
						 minZoom : 8,
						 maxZoom : 17
 					 }
				 },
				 // Contrôles additionnels (ici le gestionnaire de couches)
				 controlsOptions : {
					 "layerswitcher" : {
						 maximised : true
					 }
				 }
			}
		) ;
        </script>
    </body>
</html>

Cela devrait vous permettre d'afficher vos KML comme avant. (ça fonctionne chez moi, donc vérifiez dans la console de développement les erreurs si ça ne fonctionne pas chez vous, c'est probablement un problème d'urls).

Laurane

**gbosnay30** · 18/11/2017, 11h03

La couche photo ne s"affiche pas ? (c'est bon j'ai trouve , je n'avais pas mis les autorisations dans ma licence)

est-ce possible d'avoir la couche ign scan 25 en plus (c'est bon j'ai trouve , je n'avais pas mis les autorisations dans ma licence)

et un exemple de code pour mettre des couche gpx

et alors la genial ca resoud mon probleme

http://uzesveloclub.fr/geoportail/VT...8/indexv3.html

j'avais reussi a remettre en route la v2 mais c'est plus rapide avec la v3

http://uzesveloclub.fr/geoportail/VT...018/index.html

Envoyé par lboulanger

Bonjour,

* Télécharger le dossier suivant contenant les librairies du SDK Géoportail : https://github.com/ignf/geoportal-sd...ta.1/GpSDK.zip
* Extraire l'archive dans un dossier où vous souhaitez déployer votre exemple
* Créer un fichier HTML avec le code suivant (en remplaçant éventuellement les informations en gras, en particulier la clé de contrat) :

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
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Carte IGN avec ajout de KML</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- Extension Géoportail pour OpenLayers 3 -->
        <link rel="stylesheet" href="sdk-ol3/GpOl3.css" />
        <script src="sdk-ol3/GpOl3.js"></script>
    </head>
    <body>
	<div>
		<p>Carte IGN avec ajout de KML (utilisation du SDK Géoportail)</p>
	</div>
	<div id="map" style="width: 700px; height: 400px;"></div>
        <script>
		var map = Gp.Map.load(
			"map", // div html <div id="map">
			{
				 // Votre clé de contrat
				 apiKey: "VOTRE_CLE",
				 // centre (ici en longitude / latitude, en EPSG:4326. Plus d'options ici : https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Center.html)
				 center : {
					 x : 4.47140,
					 y : 44.00320,
					 projection : "EPSG:4326"
				 },
				 // map zoom level
				 zoom : 14,
				 // Couches à afficher. Plus d'options ici : https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html
				 layersOptions : {
					 // Photographies aériennes
				 	"ORTHOIMAGERY.ORTHOPHOTOS" : {
						opacity : 0.5
					},
   					 // Cartes IGN
				 	"GEOGRAPHICALGRIDSYSTEMS.MAPS" : {
						opacity : 0.1
					},
					// vos couches KML
					"kml1" :
					 {
						 format : "kml", // format, obligatoire
						 title : "Circuit 1", // nom de votre kml à afficher dans le gestionnaire de couches
						 url : "data/kml1.kml", // Url vers votre fichier KML
						 minZoom : 8,
						 maxZoom : 17
					 },
 					"kml2" :
 					 {
 						 format : "kml", // format, obligatoire
 						 title : "Circuit 2", // nom de votre kml à afficher dans le gestionnaire de couches
 						 url : "data/kml2.kml", // Url vers votre fichier KML
						 minZoom : 8,
						 maxZoom : 17
 					 }
				 },
				 // Contrôles additionnels (ici le gestionnaire de couches)
				 controlsOptions : {
					 "layerswitcher" : {
						 maximised : true
					 }
				 }
			}
		) ;
        </script>
    </body>
</html>

Cela devrait vous permettre d'afficher vos KML comme avant. (ça fonctionne chez moi, donc vérifiez dans la console de développement les erreurs si ça ne fonctionne pas chez vous, c'est probablement un problème d'urls).

Laurane

**lboulanger** · 27/11/2017, 16h46

Bonjour, ce sujet est-il donc

?

**gbosnay30** · 27/11/2017, 17h50

merci
il me manque le code pour les fichiers gpx , mais ca ne me bloque pas

je te remercie

a bientot
je ne sais pas mettre "Sujet resolu"

Envoyé par lboulanger

Bonjour, ce sujet est-il donc

?

**lboulanger** · 27/11/2017, 17h58

Pour les GPX, c'est la même chose que pour les KML, mais en spécifiant "gpx" comme format

Par exemple (modifications en gras dans le code suivant, en rouge à modifier) :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Carte IGN avec ajout de KML</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- Extension Géoportail pour OpenLayers 3 -->
        <link rel="stylesheet" href="sdk-ol3/GpOl3.css" />
        <script src="sdk-ol3/GpOl3.js"></script>
    </head>
    <body>
	<div>
		<p>Carte IGN avec ajout de KML (utilisation du SDK Géoportail)</p>
	</div>
	<div id="map" style="width: 700px; height: 400px;"></div>
        <script>
		var map = Gp.Map.load(
			"map", // div html <div id="map">
			{
				 // Votre clé de contrat
				 apiKey: "VOTRE_CLE",
				 // centre (ici en longitude / latitude, en EPSG:4326. Plus d'options ici : https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Center.html)
				 center : {
					 x : 4.47140,
					 y : 44.00320,
					 projection : "EPSG:4326"
				 },
				 // map zoom level
				 zoom : 14,
				 // Couches à afficher. Plus d'options ici : https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html
				 layersOptions : {
					 // Photographies aériennes
				 	"ORTHOIMAGERY.ORTHOPHOTOS" : {
						opacity : 0.5
					},
   					 // Cartes IGN
				 	"GEOGRAPHICALGRIDSYSTEMS.MAPS" : {
						opacity : 0.1
					},
					// vos couches KML
					"kml1" :
					 {
						 format : "kml", // format, obligatoire
						 title : "Circuit 1", // nom de votre kml à afficher dans le gestionnaire de couches
						 url : "data/kml1.kml", // Url vers votre fichier KML
						 minZoom : 8,
						 maxZoom : 17
					 },
 					"kml2" :
 					 {
 						 format : "kml", // format, obligatoire
 						 title : "Circuit 2", // nom de votre kml à afficher dans le gestionnaire de couches
 						 url : "data/kml2.kml", // Url vers votre fichier KML
						 minZoom : 8,
						 maxZoom : 17
 					 },
 					"GPX1" :
 					 {
 						 format : "gpx", // format, obligatoire
 						 title : "Fichier GPX", // nom de votre gpx à afficher dans le gestionnaire de couches
 						 url : "data/votre_fichier_gpx.gpx", // Url vers votre fichier GPX
						 minZoom : 8,
						 maxZoom : 17
 					 }
				 },
				 // Contrôles additionnels (ici le gestionnaire de couches)
				 controlsOptions : {
					 "layerswitcher" : {
						 maximised : true
					 }
				 }
			}
		) ;
        </script>
    </body>
</html>

**gbosnay30** · 27/11/2017, 18h01

et voila le resultat

http://uzesveloclub.fr/geoportail/VTTruffes2018/

Envoyé par lboulanger

Pour les GPX, c'est la même chose que pour les KML, mais en spécifiant "gpx" comme format

Par exemple (modifications en gras dans le code suivant, en rouge à modifier) :

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
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Carte IGN avec ajout de KML</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <!-- Extension Géoportail pour OpenLayers 3 -->
        <link rel="stylesheet" href="sdk-ol3/GpOl3.css" />
        <script src="sdk-ol3/GpOl3.js"></script>
    </head>
    <body>
	<div>
		<p>Carte IGN avec ajout de KML (utilisation du SDK Géoportail)</p>
	</div>
	<div id="map" style="width: 700px; height: 400px;"></div>
        <script>
		var map = Gp.Map.load(
			"map", // div html <div id="map">
			{
				 // Votre clé de contrat
				 apiKey: "VOTRE_CLE",
				 // centre (ici en longitude / latitude, en EPSG:4326. Plus d'options ici : https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.Center.html)
				 center : {
					 x : 4.47140,
					 y : 44.00320,
					 projection : "EPSG:4326"
				 },
				 // map zoom level
				 zoom : 14,
				 // Couches à afficher. Plus d'options ici : https://ignf.github.io/geoportal-sdk/latest/jsdoc/Gp.LayerOptions.html
				 layersOptions : {
					 // Photographies aériennes
				 	"ORTHOIMAGERY.ORTHOPHOTOS" : {
						opacity : 0.5
					},
   					 // Cartes IGN
				 	"GEOGRAPHICALGRIDSYSTEMS.MAPS" : {
						opacity : 0.1
					},
					// vos couches KML
					"kml1" :
					 {
						 format : "kml", // format, obligatoire
						 title : "Circuit 1", // nom de votre kml à afficher dans le gestionnaire de couches
						 url : "data/kml1.kml", // Url vers votre fichier KML
						 minZoom : 8,
						 maxZoom : 17
					 },
 					"kml2" :
 					 {
 						 format : "kml", // format, obligatoire
 						 title : "Circuit 2", // nom de votre kml à afficher dans le gestionnaire de couches
 						 url : "data/kml2.kml", // Url vers votre fichier KML
						 minZoom : 8,
						 maxZoom : 17
 					 },
 					"GPX1" :
 					 {
 						 format : "gpx", // format, obligatoire
 						 title : "Fichier GPX", // nom de votre gpx à afficher dans le gestionnaire de couches
 						 url : "data/votre_fichier_gpx.gpx", // Url vers votre fichier GPX
						 minZoom : 8,
						 maxZoom : 17
 					 }
				 },
				 // Contrôles additionnels (ici le gestionnaire de couches)
				 controlsOptions : {
					 "layerswitcher" : {
						 maximised : true
					 }
				 }
			}
		) ;
        </script>
    </body>
</html>

une aide svp

IGN API Géoportail

Discussions similaires

Partager

Partager