recupération coordonées sur click dans un champ HTM contenant une carte OSM

**joproteck** · 04/11/2024, 09h25

Bonjour,

J'utilise un champ HTM qui affiche une carte Open street map.

Je souhaite récupérer les coordonnées d un point lorsque je clique sur la carte.

Voila le code utilisé qui ne marche pas

Lancé lors de l'initialisation de la fenêtre.

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
 
Maposition est une géoPosition
 
		Maposition.Latitude		= -4.793379 
 
 
		Maposition.Longitude	= 11.859147
		sTmpHTM		est une chaîne 
sTmpHTM = [
			<!-- Inclure les fichiers CSS et JS de Leaflet -->
			<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
			<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
 
			<!-- Div pour afficher la carte -->
			<div id="map" style="width: 100%; height: 100%;"></div>
 
			<script>
			// Initialiser la carte
			var map = L.map('map').setView([%1, %2], 16);  // Coordonnées du site
 
			// Ajouter une couche OpenStreetMap
			L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
			attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
			}).addTo(map);
 
			//;
			marker = L.marker([%1, %2]).addTo(map).bindPopup("centre");
			// Gestionnaire d'événement pour le clic
       		map.on('click', function(e) {
            var lat = e.latlng.lat;
            var lng = e.latlng.lng;
 
            // Appel d'une fonction WinDev pour transmettre les coordonnées
            WL.execute('ProcedureCoordonnees', lat, lng);
        })        ;
			</script>
 
 
		]
 
		sTmpHTM	= ChaîneConstruit(sTmpHTM,Maposition.Latitude,Maposition.Longitude)
//		info(sTmpHTM)
		HTM_OSM	= sTmpHTM

Merci pour votre aide

**DevOcc** · 04/11/2024, 10h00

Bonjour,
Voir l'exemple Post #3 de ce lien :

https://forum.pcsoft.fr/fr-FR/pcsoft...streetmap,clic

Cdlt

**joproteck** · 05/11/2024, 08h44

Bonjour,

Merci beaucoup pour cette indication meme si le code ne fonctionne pas mais cela m'a donné la piste pour résoudre ce soucis.

JE poste mon code fonctionnel pour ceux/celles que ca intéresse sachant que des améliorations sont naturellement possibles :

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
 
PROCÉDURE afficheOSM()
Maposition est une géoPosition
 
Maposition.Latitude		= -4.793379 
 
 
Maposition.Longitude	= 11.859147
sTmpHTM		est une chaîne 
sTmpHTM = [
	<!-- Inclure les fichiers CSS et JS de Leaflet -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
 
	<!-- Div pour afficher la carte -->
	<div id="map" style="width: 100%; height: 100%;"></div>
 
	<script>
	<!-- Initialiser la carte -->
	var marker;
	var map = L.map('map').setView([%1, %2], 16);  // Coordonnées du site
 
	<!-- Ajouter une couche OpenStreetMap -->
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);
	marker = L.marker([%1, %2]).addTo(map).bindPopup("centre"); 
 
 
	<!-- Gestionnaire d'événement pour le clic -->
 
	map.on('click', function(e) {
	var Coordonnees=e.latlng.lat.toFixed(6) +";"+ e.latlng.lng.toFixed(6);
	marker.setLatLng(e.latlng);
	map.setView(e.latlng); //Recentrage de la carte (cosmétique)			
	//marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map).bindPopup("centre");        
	WL.Execute("OSM_LAT_LONG_FROM_JS",Coordonnees);
	})        ;
	</script>
 
 
]
 
sTmpHTM	= ChaîneConstruit(sTmpHTM,Maposition.Latitude,Maposition.Longitude)
HTM_OSM	= 	"<html></html>" //RAZ du champ HTM
 
HTM_OSM	= sTmpHTM

et

Code :

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

1
2
3
4
5
6
 
PROCÉDURE OSM_LAT_LONG_FROM_JS(xCoord est une chaîne)
soit latitude = ExtraitChaîne(xCoord,1,";",DepuisDébut)
soit longitude	= ExtraitChaîne(xCoord,2,";",DepuisDébut)
 
Info(latitude,longitude)

**DevOcc** · 05/11/2024, 11h35

Bonjour joproteck
Pourquoi dites vous que le code ne fonctionne pas ?
Plus bas sur le lien, des personnes ont utilisé ce code avec succès.
Evidemment une adaptation à votre cas est peut être nécessaire.
Cdlt

**joproteck** · 05/11/2024, 11h39

J'ai tenté d'utiliser le code tel quel mais aucune donnée OSM ne s'affiche.... Ceci étant il m'a été d 'un grand secours et m'a orienté pour aboutir a ce que je cherchais. Encore merci

**DevOcc** · 05/11/2024, 12h22

Plus le temps de vérifier cela aujourd'hui mais je testerai pour voir si il y a un problème.
Une chose est certaine, le forum PC Soft est problématique concernant le code, function devrait être en minuscule mais il apparait en majuscule, ce qui fait bugger le code.
Cdlt

**DevOcc** · 06/11/2024, 15h07

Bonjour,
j'ai vérifié, le code fourni sur le lien fonctionne, l'anomalie est bien due à la balise code du forum PC Soft :
Il faut donc remplacer FUNCTION par function

même problème pour : ChaineJSest une chaîne
l'espace après ChaineJS est supprimé par la balise code, il faut donc le rajouter.

Le code remis en forme :

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
 
ChaineJS est une chaîne
// Remise à zéro du champs html : évite l'erreur du multi clic
HTML1="<html></html>"
 
ChaineJS= [
	<html>
	<head>
	<title>Carte Leaflet</title>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
	<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
	</head>
 
	<body>
	<div id="CarteID" style="height:100%;width:100%;"></div>
	<script>
	var MaCarte = L.map('CarteID').setView([42.41, 2.58],5);
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
	minZoom:2,
	maxZoom:18
	}).addTo(MaCarte);
 
	MaCarte.on('click',  function(e) {
	varCoordonnee=e.latlng.lat+";"+e.latlng.lng;
	WL.Execute("ProcCoordFromJS",Coordonnee);
	});
 
	</script>
	</body>
 
	</html>
]
HTML1=ChaineJS
 
	PROCÉDURE INTERNE ProcCoordFromJS2(t)
		VarCoordLat est une chaîne=ExtraitChaîne(t,1,";",DepuisDébut)
		VarCoordLon est une chaîne=ExtraitChaîne(t,2,";",DepuisDébut)
		ToastAffiche("Latitude : "+VarCoordLat+" - Longitude : "+VarCoordLon,toastCourt,cvMilieu)
	FIN

Cdlt

recupération coordonées sur click dans un champ HTM contenant une carte OSM [WD22]

WinDev

Discussions similaires

Partager

Partager