Récupérer les coordonnées d'un marqueur après qu'il soit placé

**lumfast** · 27/07/2016, 18h11

Bonjour à tous,

J'ai un problème que je n'arrive pas à résoudre d'où ma question sur le forum.

j'ai réalise ma propre carte avec Leaflet et une mosaïque que j'ai aussi réalisée.
Ce que je voudrais faire pour la suite est de récupérer les coordonnées de deux marqueurs que l'utilisateur choisis sur la carte (il les a auparavant placés bien entendu).
Pour cela je voudrais que l'utilisateur clique sur un bouton (select 1st marker), choisisse son premier marqueur, clic sur le deuxième bouton (select 2nd Merker) selectionne le deuxième marqueur.

L'idée par la suite est de cliquer sur un boutton pour calculer la distance entre les deux
Seulement je n'arrive qu'à récupérer les coordonnées du dernier marqueur placé sur la carte.

Auriez-vous une idée pour arriver à ce que je veux?

je vous met mon code

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
<html style="background: rgb(204, 204, 204)" >
<!-- saved from url=(0014)about:internet -->
<head>
    <meta charset="UTF-8" />
    <title>test</title>
   	<link rel="icon" type="icon/png" href="icone.png">  
   	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />  
   	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
   	<link rel="stylesheet" type="text/css" href="css.css"/> 
 
</head>
 
<h1>
	<center><strong> UAV Maps </strong></center>
	<div> <img src="images.png" type ="image/png"/></div>
</h1>
 
 
<body>
 
<div id="map"> 
<input id="calc" type="image" src="icon_calculatrice.png" class="img1"/> 
<input type="checkbox" id="test" name="test" onclick="check()" />
<input type="button" id="but-eff" value="Remove marker" onclick="supprime()"/>
<input type="button" id="sel1" name="sel1" value="Select 1st marker" onclick="selectM1()"/>
<input type="button" id="sel2" name="sel2" value="Select 2nd marker" onclick="selectM2()"/>
</div>
 
 
<script type="text/javascript">
var marqueur;
var map;
var markertest;
var tab = new L.LayerGroup();
console.log(tab);
 
// checkbox initilser a faux au chargement de la page
unable_check=document.getElementById("test");
unable_check.checked=false;
 
// test de la checkbox pour connaitre sont état
    var test_check = false;
    var efface = document.getElementById('test'); 
 
    function check() {        
        if (efface.checked == true ){
            test_check = true;
            console.log('ok');
        }
        else if ( efface.checked == false) 
        { test_check = false 
                console.log('NOK');
        }
    }
 
// affichage de la carte aux coordonnées et au niveau de zoom choisis
 
    map = L.map('map').setView([-85, -179.65], 10);
    // création de la carte avec les tuiles présente dans le dossier  
		L.tileLayer('eso/{z}/{x}/{y}.jpg', {
        minZoom: 9, 
        maxZoom: 15,
        attribution: 'University of Lisbon/Antony Vigneron',
        tms:true
    }).addTo(map);
 
 
    map.on('click', onMapClick);
 
    // fonction affichant un marker lors du clic sur un point de la carte. mofication de l'affichage de la souris 
 
   /* markertest=L.marker([-85, -179.65]).addTo(map);*/
 
 
    function onMapClick(e) {
    	if (test_check==true){
    		var curseur = document.getElementById('map');
    		curseur.style.cursor='pointer';
 
    		var coord = e.latlng.toString();
 
        	marqueur = L.marker([e.latlng.lat,e.latlng.lng]).bindPopup("<center> Coordinates : </center>" +"<br>" + e.latlng.lat + "; " + e.latlng.lng + "</br>"/*+ "<br><center><input type='button' id='erase' value='Delete this marker' class='marker-delete-button'/></center></br>" */);
 
        	marqueur.addTo(tab);
        	map.addLayer(tab);
        	console.log(tab);
 
        	var x = e.latlng.lat;
        	var y = e.latlng.lng;
    		/*console.log(x,y);  */       
        }
        else if (test_check==false){ 
        	var curseur = document.getElementById('map');
        	curseur.style.cursor='grab'; 
        }
    }
 
function supprime(e) {
tab.clearLayers();
}
 
/*
function SupOne() {
    var tempMarker = this;
        $(".marker-delete-button:visible").click(function () {
        map.removeLayer(tempMarker);
    });
}*/
 
 
 
function selectM1(e){
 
    marqueur.on('click', function(e){
        if (test_check==false){
            var coord1x = e.latlng.lat ; 
            var coord1y = e.latlng.lng;
            console.log(coord1x, coord1y);
        }
    });
 }
 
 
 
</script>
 
</body>
 
</html>

Merci d'avance à vous

**mathieu** · 27/07/2016, 23h39

étant donnée que nous n'avons pas les images, ce n'est pas évident pour tester. pouvez-vous mettre un lien vers une page de test ?

ensuite je ne suis pas sur d'avoir compris le fonctionnement recherché. est ce que ça ne serait pas plus simple d'enlever les boutons et de récupérer les coordonnées au moment du clic sur la carte ?

**lumfast** · 28/07/2016, 15h41

Mon problème est que je visualise mon code par l'intermédiaire de EASYPHP donc je sais pas si je vous envoie le lien url passant par le local host si cela va vous aider.
http://127.0.0.1/web/Test.html
sinon je peut créer un fichier .zip, mais il sera assez volumineux
comment puijes vous donner accés a cette page autrement ?

l'idée et de laisser la possibilité à l'utilisateur de placer plusieurs markers sur la carte puis lors du calcul de distance lui donner la possibilité de choisir les deux markers entre lesquels il veut réaliser son calcul de distance. Je ne sais pas si ma méthode de bouton est la plus adaptée pour faire ceci.

**mathieu** · 28/07/2016, 18h37

j'ai réussi à tester en utilisant la carte de openstreetmap, j'ai mis le code à la fin si ça peut servir à d'autres personnes voulant essayer

à quoi servira cette page ? j'ai déjà compris qu'elle servira à calculer la distance entre 2 points mais quelles seront les autres fonctionnalités ?

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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
<html style="background: rgb(204, 204, 204)" >
<!-- saved from url=(0014)about:internet -->
<head>
    <meta charset="UTF-8" />
    <title>test</title>
   	<link rel="icon" type="icon/png" href="icone.png">  
   	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />  
   	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
   	<link rel="stylesheet" type="text/css" href="css.css"/> 
 
</head>
 
<h1>
	<center><strong> UAV Maps </strong></center>
</h1>
 
 
<body>
 
<div id="map" style="height : 600px;"></div>
 
<input type="checkbox" id="test" name="test" onclick="check()" />
<input type="button" id="but-eff" value="Remove marker" onclick="supprime()"/>
<input type="button" id="sel1" name="sel1" value="Select 1st marker" onclick="selectM1()"/>
<input type="button" id="sel2" name="sel2" value="Select 2nd marker" onclick="selectM2()"/>
 
 
<script type="text/javascript">
var marqueur;
var map;
var markertest;
var tab = new L.LayerGroup();
console.log(tab);
 
// checkbox initilser a faux au chargement de la page
unable_check=document.getElementById("test");
unable_check.checked=false;
 
// test de la checkbox pour connaitre sont état
    var test_check = false;
    var efface = document.getElementById('test'); 
 
    function check() {        
        if (efface.checked == true ){
            test_check = true;
            console.log('ok');
        }
        else if ( efface.checked == false) 
        { test_check = false 
                console.log('NOK');
        }
    }
 
// affichage de la carte aux coordonnées et au niveau de zoom choisis
 
    map = L.map('map').setView([49, 3], 4);
 
 	L.tileLayer(
		"http://{s}.tile.osm.org/{z}/{x}/{y}.png"
		, {
			attribution: "<a href=\"http://openstreetmap.org/\">OpenStreetMap</a>, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA</a>",
			maxZoom: 19,
		}
	).addTo(map);
 
 
 
    map.on('click', onMapClick);
 
    // fonction affichant un marker lors du clic sur un point de la carte. mofication de l'affichage de la souris 
 
   /* markertest=L.marker([-85, -179.65]).addTo(map);*/
 
 
    function onMapClick(e) {
    	if (test_check==true){
    		var curseur = document.getElementById('map');
    		curseur.style.cursor='pointer';
 
    		var coord = e.latlng.toString();
 
        	marqueur = L.marker([e.latlng.lat,e.latlng.lng]).bindPopup("<center> Coordinates : </center>" +"<br>" + e.latlng.lat + "; " + e.latlng.lng + "</br>"/*+ "<br><center><input type='button' id='erase' value='Delete this marker' class='marker-delete-button'/></center></br>" */);
 
        	marqueur.addTo(tab);
        	map.addLayer(tab);
        	console.log(tab);
 
        	var x = e.latlng.lat;
        	var y = e.latlng.lng;
    		/*console.log(x,y);  */       
        }
        else if (test_check==false){ 
        	var curseur = document.getElementById('map');
        	curseur.style.cursor='grab'; 
        }
    }
 
function supprime(e) {
tab.clearLayers();
}
 
/*
function SupOne() {
    var tempMarker = this;
        $(".marker-delete-button:visible").click(function () {
        map.removeLayer(tempMarker);
    });
}*/
 
 
 
function selectM1(e){
 
    marqueur.on('click', function(e){
        if (test_check==false){
            var coord1x = e.latlng.lat ; 
            var coord1y = e.latlng.lng;
            console.log(coord1x, coord1y);
        }
    });
 }
 
 
 
</script>
 
</body>
 
</html>

**lumfast** · 28/07/2016, 20h03

Le projet s'intègre dans mon stage de fin de deuxième année d'études de mon école.
Ma commanditaire voulait au départ seulement l'affichage d'une ortho mosaique de manière dynamique. Une fois avoir réussi à le faire elle a voulu que je poursuive avec positionnement de marker puis le calcul de distance. L'étapes suivante serais de pouvoir intégrer l'altitude à ma mosaique pour ensuite réaliser une distance en 3 dimensions. Ensuite elle voudrait pouvoir calculer des aires de polygones.

Mais ce qu'elle attendait été surtout la création d'un ortho mosaique à partir de photos aériennes. Le reste n'est que du plus mais je pense que ça peut être intéressant pour après réaliser des calculs de surface sur des propriétés ou certaines zones.

**lumfast** · 28/07/2016, 20h11

Par contre je ne vois pas les modifications que tu as apportée

Récupérer les coordonnées d'un marqueur après qu'il soit placé [LeafLet]

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager