Problème de rafraîchissement de map IGN

**v_denisSopraHR** · 19/07/2016, 18h09

Bonsoir à tous,

Je viens de me lancer à la découverte de l'api IGN et je rencontre actuellement un problème, je m'explique :
J'ai créer une page html contenant un tableau, les colonnes sont les suivantes : nom/prenom/adresse/codePostal/ville/btnGmap/btnIGN/btnDelete
Le but étant de récupérer les informations de la ligne sélectionné pour les convertirs en coordonnée gps et centré ces dernières dans une modale au clic sur le bouton choisis ( gmap ou ign ).
Pour ce qui est de google map, je n'ai eu aucun soucis. Mon script fonctionne à merveille, et lorsque je ferme ma modale et que j'en ouvre une autre, ma geolocalisation s'actualise.
Pour ce qui est de IGN, le premier load fonctionne également bien ( sur le même principe que gmap ). En revanche si je quitte ma modale et que j'appuis sur le bouton ign d'une autre ligne, la geolocalisation ne s'actualise pas. Ce qui est vraiment problématique ..
J'appel à votre aide !

Voici mon tableau :

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
		<table class="table table-striped" class="display" cellspacing="0">
			<thead>
				<tr>
					<th><a class="thTab">Prenom</a></th>
					<th><a class="thTab">Nom</a></th>
					<th><a class="thTab">Adresse</a></th>
					<th><a class="thTab">CP</a></th>
					<th><a class="thTab">Ville</a></th>
					<th>GMap</th>
					<th>IGN</th>
					<th>Supprimer</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Valentin</td>
					<td>dfgh</td>
					<td>xfgsdfgsdf</td>
					<td>dfgsdfgsd</td>
					<td>Saint Aubin Le Cauf</td>
					<td><button class="btnGmap" data-toggle="modal"
							data-backdrop="static" data-keyboard="false"
							data-target="#myModal">
							<a href="#?w=700" rel="popup_name" class="poplight"><img
								class="loupe" src="images/Loupe.png" /></a>
						</button></td>
					<td><button class="btnIGN" data-toggle="modal"
							data-backdrop="static" data-keyboard="false"
							data-target="#myModalIGN">
							<a href="#?w=700" rel="popup_name" class="poplight"><img
								class="loupe" src="images/Loupe.png" /></a>
						</button></td>
					<td><div class="btn removePointer">
							<div class="btn-back">
								<p>Êtes-vous sûr ?</p>
								<button class="yes">Oui</button>
								<button class="no">Non</button>
							</div>
							<div class="btnFront">
								<button class="resizeButton">
									<img class="imgSize" src='images/quit.png'>
								</button>
							</div>
						</div></td>
				</tr>
				<tr>
					<td>Jean</td>
					<td>Dupond</td>
					<td>dfghdfgh</td>
					<td>dfghdfgh</td>
					<td>Sartrouville</td>
					<td><button class="btnGmap" data-toggle="modal"
							data-backdrop="static" data-keyboard="false"
							data-target="#myModal">
							<a href="#?w=700" rel="popup_name" class="poplight"><img
								class="loupe" src="images/Loupe.png" /></a>
						</button></td>
					<td><button class="btnIGN" data-toggle="modal"
							data-backdrop="static" data-keyboard="false"
							data-target="#myModalIGN">
							<a href="#?w=700" rel="popup_name" class="poplight"><img
								class="loupe" src="images/Loupe.png" /></a>
						</button></td>
					<td><div class="btn removePointer">
							<div class="btn-back">
								<p>Êtes-vous sûr ?</p>
								<button class="yes">Oui</button>
								<button class="no">Non</button>
							</div>
							<div class="btnFront">
								<button class="resizeButton">
									<img class="imgSize" src='images/quit.png'>
								</button>
							</div>
						</div></td>
				</tr>
				<tr>
					<td>Jean</td>
					<td>Neymar</td>
					<td>79 rue test</td>
					<td>76200</td>
					<td>Dieppe</td>
					<td><button class="btnGmap" data-toggle="modal"
							data-backdrop="static" data-keyboard="false"
							data-target="#myModal">
							<a href="#?w=700" rel="popup_name" class="poplight"><img
								class="loupe" src="images/Loupe.png" /></a>
						</button></td>
					<td><button class="btnIGN" data-toggle="modal"
							data-backdrop="static" data-keyboard="false"
							data-target="#myModalIGN">
							<a href="#?w=700" rel="popup_name" class="poplight"><img
								class="loupe" src="images/Loupe.png" /></a>
						</button></td>
					<td><div class="btn removePointer">
							<div class="btn-back">
								<p>Êtes-vous sûr ?</p>
								<button class="yes">Oui</button>
								<button class="no">Non</button>
							</div>
							<div class="btnFront">
								<button class="resizeButton">
									<img class="imgSize" src='images/quit.png'>
								</button>
							</div>
						</div></td>
				</tr>
			</tbody>
		</table>

Voici ma modale IGN :

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
	<div class="modal fade" id="myModalIGN" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true"><img src="images/quit.png"
							class="imgQuit"></span>
					</button>
					<h4 class="modal-title coordsIGN" id="myModalLabel"></h4>
				</div>
				<div class="modal-body">
					<div id="map-canvasIGN"
						style="float: center; height: 400px; width: 100%"></div>
				</div>
			</div>
		</div>
	</div>

Voici ma fonction de load de l'api ign:

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
	$('.table-striped').on('click', '.btnIGN' ,function() {
		$('.coordsIGN').text('');
		$(this).each(function() {
		var adr = $(this).parents("tr").find('td').eq(2).html();
		var cp = $(this).parents("tr").find('td').eq(3).html();
		var ville = $(this).parents("tr").find('td').eq(4).html();
		var adreIGN = adr + " " + cp + " " + ville;
		$('.coordsIGN').append('<center>Adresse : ' + adreIGN + '</center>');
			geocoder.geocode( { 'address': adreIGN}, function(results, status) {
					map.setCenter(results[0].geometry.location);
					var latLong = map.getCenter();
					var latLongStr = latLong.toString().split(",",2);
					var latIgn = latLongStr[0].substr(1,latLongStr[0].toString().length);
					var lngIgn = latLongStr[1].substring(0,(latLongStr[1].toString().length - 1));
					window.onload = Geoportal.load(
							'map-canvasIGN',
							[APIkey],
							{
								lon:	parseFloat(lngIgn),
								lat: 	parseFloat(latIgn)
							},
							15,
							{
								type:'js'
					});
			});
		});
	});

Vous noterez que j'utilise une fonction de l'api google map pour convertir mon adresse en coordonnées gps ( mon paramètre 'address: "exemple d'addresse"' ne fonctionne pas je sais pas pourquoi ). Mais le principe reste le même.

Voici un aperçu de ma page web :

Nom : sampleView.png
Affichages : 458
Taille : 49,9 Ko

Nom : sampleView.png
Affichages : 458
Taille : 49,9 Ko

voici le resultat au premier clic :

Nom : premierclic.png
Affichages : 330
Taille : 637,6 Ko

voici le resultat du deuxième clic ( pas de rafraichissement alors que l'adresse est bien prise en compte ) :

Nom : deuxiemeclic.png
Affichages : 324
Taille : 636,9 Ko

Nom : deuxiemeclic.png
Affichages : 324
Taille : 636,9 Ko

Je vous remercie d'avance pour votre aide ...

**v_denisSopraHR** · 21/07/2016, 09h56

Bonjour, petit up par rapport à ce sujet, je n'ai toujours pas trouvé la solution ..

**mga_geo** · 21/07/2016, 10h04

Bonjour,

Il est beaucoup plus simple pour aider quelqu'un d'avoir une url sur une page avec le problème.
Cela permet entre autres d’appréhender plus facilement la dynamique de l'application.

Dans le load de l'api ign, le "window.onload" est suprenant : surcharge d'une fonction dont l'évènement doit déjà être passé.

**v_denisSopraHR** · 21/07/2016, 10h28

Mon application est en localhost et donc je ne peux pas fournir d'url ..
Pour ce qui est du window.onload, je l'ai enlevé sans effet secondaire. J'ai l'impression que lorsque j'applique la fonction Geoportal.load(); la carte est généré une fois et ne peux plus être modifié

**mga_geo** · 21/07/2016, 11h03

Il existe de nombreux hébergeurs offrant un pack gratuit d'hébergement web mutualisé amplement suffisant pour ce genre de test.
J'utilise depuis de nombreuses années un pack de https://www.alwaysdata.com/fr/pricing/ qui me convient parfaitement.

**v_denisSopraHR** · 21/07/2016, 11h39

voici l'url http://v-denis.alwaysdata.net/sample.html#?w=700
En espérant trouver la solution

**gcebelieu** · 21/07/2016, 13h16

Bonjour,

NB : la visu déployée sur alwaysdata n'affiche pas les couches car la clef ne doit pas être paramétrée pour utiliser l'URL alwaysdata (=> à rajouter dans le paramétrage de votre clef).

Cela étant dit, plusieurs choses :

je ne comprends pas trop le passage :

Code :

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

1
2
3
4
	map.setCenter(results[0].geometry.location);
	var latLong = map.getCenter();
                                        ...

en gros, vous récupérez les coordonnées de géocodage, vous les affectez à la carte googlemaps, et vous récupérez le centre de la carte gmaps pour centrer la carte Géoportail. Pourquoi passer par la carte gmaps et ne pas utiliser directement les coordonnées retournées par le géocodage ?

Au passage vous pouvez aussi utiliser le Géocoder Géoportail à l'aide de la bibliothèque d'accès : https://github.com/IGNF/geoportal-access-lib (plus précisément avec la fonction Gp.Services.geocode ).

**v_denisSopraHR** · 21/07/2016, 14h25

Je ne comprends pas de quelle clef vous parlez , celle de l'api IGN ?

Alors pour ce que est du passage en question, c'est une bricole très sale que j'ai mi en place parce que je n'arrive pas à récupérer les coordonnées autrement que sous le format lat/lng :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
					Geoportal.load(
							'map-canvasIGN',
							[APIkey],
							{
								address : adreIGN 
							},
							15,
							{
								type:'js'
					});

Ce code ne fonctionne pas c'est pourquoi je récupère une string des coordonnées de gmap que je parse pour pour avoir accès à deux variables lat/lng.
Effectivement, ce n'est pas jolie jolie ...

Je vais prendre le temps de regarder le Géocoder Géoportail.
Merci

**gcebelieu** · 21/07/2016, 15h09

Oui, je parle bien de la clef APIKey d'accès aux données du Géoportail : lorsque vous l'avez obtenue, vous avez du préciser pour quelle utilisation vous alliez l'utiliser (web, sig ou mobile). Pour une utilisation Web, on précise aussi une URL de déploiement de l'application (referer).

Sinon, pour info, les appels suivants, vous permettent d'obtenir directement les latitude et longitude issues du géocodage (results) sans passer par la carte gmaps :

results[0].geometry.location.lat()
results[0].geometry.location.lon()

**mga_geo** · 21/07/2016, 15h59

Je ne suis pas dans un bon jour pour explorer le code.
J'ai l'impression que le code javascript est dans le fichier http://v-denis.alwaysdata.net/js/gmap.js mais je ne trouve pas comment la clé APIkey est renseignée

**mga_geo** · 21/07/2016, 16h01

Je n'ai pas relu la documentation de l'API récemment, mais pour l'HTML5, avez-vous fait des préconisations ?

**v_denisSopraHR** · 21/07/2016, 16h04

Alors oui quand j'ai obtenue ma clef, j'ai précisé que c'était pour une application web. Lorsque j'ai validé on m'a seulement fournie une clef de l'api et une page html de test. Je n'ai pas eu d'url précise à renseigné pour afficher ma carte, et je n'ai pas trouvé de docs à propo de cette url.

De plus, les fcts location.lat() et location.lon() ne fonctionnent pas. Ce qui est normal puisque :

Code :

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

1
2
3
//ici geocoder fait référence à une ligne plus au dessus :  geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': adreIGN}, function(results, status) {

Il y aurait-il une fonction similaire avec ign ?

En revanche même si cela permettrai d'améliorer la performance de mon code, je ne pense pas que ça change beaucoup chose au niveau de l'actualisation du Geoportal.load().
J'ai pensé qu'il y aurait peut-être une fct Geoportal.delete() mais je n'ai pas trouvé ..

J'ai beaucoup de mal à me familiariser avec cette Api

**v_denisSopraHR** · 21/07/2016, 16h05

Envoyé par mga_geo

Je ne suis pas dans un bon jour pour explorer le code.
J'ai l'impression que le code javascript est dans le fichier http://v-denis.alwaysdata.net/js/gmap.js mais je ne trouve pas comment la clé APIkey est renseignée

Ma clef est renseigné dans une variable globale au début de mon fichier gmap.js

**mga_geo** · 21/07/2016, 17h33

Il faudrait faire une demande de clé pour le domaine http://v-denis.alwaysdata.net et mettre un code du type

var apiKEYs = {
'localhost': "8s6jjkko7dbdvngej5zekhiz",
'v-denis.alwaysdata.net': '...',
};
APIkey = apiKEYs[window.location.host];

Problème de rafraîchissement de map IGN

IGN API Géoportail

Discussions similaires

Partager

Partager