Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

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


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre à l'essai
    Récupérer les coordonnées d'un marqueur après qu'il soit placé
    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

  2. #2
    Expert éminent sénior
    é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 ?

  3. #3
    Membre à l'essai
    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.

  4. #4
    Expert éminent sénior
    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>

  5. #5
    Membre à l'essai
    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.

  6. #6
    Membre à l'essai
    Par contre je ne vois pas les modifications que tu as apportée

  7. #7
    Expert éminent sénior
    d'accord, j'aurais appris le mot "orthomosaïque" aujourd'hui :-)
    pour le code de test j'ai changé l'appel à "L.tileLayer" pour mettre un plan à la place des tuiles que vous fournissez

    si dans une 1re étape il s'agit juste de calculer une distance entre 2 points, je serai parti sur une interface plus simple sans bouton et juste en cliquant à 2 endroits sur le plan, le calcul se fait. Pour faire ça, il suffit de créer 2 marqueur et une variable "marqueurSuivant" qui contient "1" ou "2" pour indiquer quel marqueur sera concerné par le prochain clic

    ensuite pour faire la fonction de calcul de surface d'un polygone, ça pourrait donner une barre d'outil avec des boutons : 1 bouton "distance" avec le système des 2 marqueurs et un autre bouton qui permet de positionner plusieurs marqueurs, etc ...
    il y a un exemple de barre d'outil sur la page suivante, le fond de carte ne fonctionne plus mais le barre est en haut à gauche :
    http://leaflet.github.io/Leaflet.too...es/popup.html#
    le code est expliqué là :
    https://github.com/Leaflet/Leaflet.t...ustom-toolbars

  8. #8
    Membre à l'essai
    D'accord .

    C'est toujours bien d'avoir un avis extérieur pour voir un peu les différentes manières de penser le même problème. Je vais essayer de garder quand même ma solution avec mes deux boutons. Par contre le lien que tu m'as donné va énormément me servir d'une part pour réussir à supprimer un marker précis et non tous les markers comme je fais moi. D'autre part pour la barre d'outils ainsi que certains des outils qui sont dedans.

    Merci beaucoup à toi.

  9. #9
    Membre à l'essai
    En revanche je n'arrive toujours pas à récupérer les coordonnées d'un marker quand je clique dessus :/

  10. #10
    Expert éminent sénior
    dans votre code vous récupérez bien les coordonnées dans l'objet "e" au moment du clic, non ?
    expliquez nous plus en détail ce que vous voulez faire

  11. #11
    Modérateur

    Bonjour,
    effectivement, comme dit par mathieu, les coordonnées du marqueur appartiennent à l'objet event transmis
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    oMarker.on('click', function( e){
      var posMarker = e.latlng;
      console.log( posMarker);
    });


    C'est toujours bien d'avoir un avis extérieur pour voir un peu les différentes manières de penser le même problème.
    Perso je passerais par l'événement contextmenu des marqueurs pour gérer les différentes options
    • Choisir comme destination
    • Choisir comme départ
    • Supprimer ce marqueur
    • Autres...


    ...pour réussir à supprimer un marker précis et non tous les markers comme je fais moi.
    dans ce cas il ne te faut pas faire un tabMarkers.clearLayers() mais un tabMarkers.removeLayer( refMarker).

  12. #12
    Membre à l'essai
    Bonjour,

    effectivement la méthode du contextmenu semblerait simple à mettre en place pour ma solution seulement je ne sais pas comment elle se construit et je ne trouve pas de doc claire à son sujet.


    Pour la suppression d'un seul marker j'ai essayé de créer un bouton à l'interieur d'un popup avec une fonction attribuée

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    marqueur.addTo(tab).addTo(map).bindPopup("<center> Coordinates : </center>" +"<br>" +e.latlng.lat + "; " + e.latlng.lng + "</br>"+"<a id="+e.latlng.lat+"_"+e.latlng.lng+"></a>"+ "<br><center><input type='button' value='Delete this marker' class='marker-delete-button' onclick='SupOne()'/></center></br>");
     
     
     
    function SupOne() {
        tempMarker=this
        tab.removeLayer(tempMarker);
    }


    Cela ne marche pas bien sûre.



    J'ai vu une méthode ou ont récupère le bouton dans une fonction
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    function onPopupOpen() {
        var tempMarker = this;
        $(".marker-delete-button:visible").click(function () {
            map.removeLayer(tempMarker);
        });
    }

    Mais cela ne marche pas

  13. #13
    Membre à l'essai
    Alors j'ai changé un peut le fonctionnement.

    Lorsque je clic sur le bouton en icone calculette il m'ouvre une boite de dialogue du type prompt.
    Dedans de trouve la possibilité de seéléction du premier puis du deuxième marker et la validation se fera avec les boiton on sur lequel sera affecté la fonction de calcul de distance.

    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
     
     
    <div id="monPrompt" class="conteneurPrompt"> 
      <div class="titrePrompt">
           Distance Calculator
      </div> 
      <div class="contenuPrompt">
        <!-- debut - elements de la boite de dialogue -->
        Distance Calcul&nbsp;:<br />
        <p>Choose 1st marker </p>
            <input type="button" value="1st" id="1st" class="1st" onclick="()" />
        <p>Choose 2nd marker </p>
            <input type="button" value="2nd" id="2nd" class="1st" onclick="()" /><br />
        <!-- fin - elements de la boite de dialogue --> 
        <div class="boutonsPrompt">
          <br />
          <input type="button" value="Calculate" id="idOk" class="ok" onclick="Calc()" />
          <input type="button" value="Annuler" id="idAnnuler" class="annuler" onclick="clicAnnuler()" />
        </div>
      </div> 
    </div>
     
    <script type="text/javascript">
     
    function ouvreBoite()
    {
      document.getElementById("monPrompt").style.display = "block";
      document.getElementById("idFond").style.display = "block";
    }
     
    function fermeBoite()
    {
      document.getElementById("monPrompt").style.display = "none";
      document.getElementById("idFond").style.display = "none";
    }
     
    function Calc()
    {
      fermeBoite();
     
      /** Autres actions a realiser si clic sur Ok **/
      /** ... **/
    } 
     
    function clicAnnuler()
    {
      fermeBoite();
     
    }


    Comment je peux faire maintenant pour que ma page me laisse le choix de choisir un marker lors du clic sur le bouton "1st" ou le bouton "2nd" ?

  14. #14
    Modérateur

    effectivement la méthode du contextmenu semblerait simple à mettre en place pour ma solution seulement je ne sais pas comment elle se construit
    Cela reste basique mais si tu ne le sens pas il existe un pluggin Leaflet.contextmenu.

    Pour la suppression d'un seul marker j'ai essayé de créer un bouton à l'interieur d'un popup avec une fonction attribuée
    je t'ai donné une solution dans cette discussion.

    Alors j'ai changé un peut le fonctionnement.
    (...)
    cela me paraît pas très intuitif à preuve ton soucis de sélection

    Ergonomiquement parlant il me semble quand même que le « context-menu » reste un plus.

    Je te mets un exemple de ce que cela pourrait donner avec un « context-menu » light et maison (donc forcément boguer )
    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
    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
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="utf-8">
    <title>Markers avec context-Menu simple</title>
    <meta name="Author" content="NoSmoking">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>
    <style>
    html, body {
      margin: 0;
      padding: 0;
      font: 1em/1.5 Verdana, sans-serif;
    }
    h1, h2, h3 {
      margin-bottom: .5em;
      color: #069;
    }
    #main {
      margin: 0 auto;
      max-width: 60em;
      border-top: 1px solid transparent;
    }
    .section {
      margin: 0 2em 1em;
    }
    #cde {
      position: relative;
      margin: 1em auto;
    }
    #carte {
      height: 37em;
      margin: 0 auto;
      max-width: 50em;
      border: 5px solid #FFF;
      font-size: 1em;
      box-shadow: 0 2px 4px 2px #CCC;
    }
    .leaflet-popup-content-wrapper {
      border-radius: .25em;
      font-family: Verdana;
      font-size: .8em;
    }
    .leaflet-popup-content {
      text-align: center;
    }
    .leaflet-popup-content input {
      margin: .5em auto;
      font-family: inherit;
    }
    #context_menu {
      display: none;
      position: absolute;
      padding: .125em;
      border: 1px solid #abc;
      background: #fff;
      box-shadow: 2px 2px 5px #ccc;
    }
    #context_menu ul {
      margin: 0;
      padding: 0;
      font-size: .8em;
      list-style: none;
      cursor: pointer;
    }
    #context_menu ul li {
      padding: .25em 1em;
      line-height: 1.5em;
      background: #fff;  
    }
    /* separator */
    #context_menu ul li:empty {
      margin: .125em 0;
      padding: 0 1em 1px;    
      background: #abc;
    }
    #context_menu ul li[id]:hover {
      background: #cde;
    }
    #context_menu ul hr {
      margin: 0;
      padding: 0;
    }
    </style>
    </head>
    <body>
    <div id="main">
      <div class="header">
        <h1>Markers avec context-Menu simple</h1>
      </div>
      <div class="section">
        <p>Un clic sur la carte ajoute un marqueur à la carte.</p>
        <p>Un clic droit sur le marqueur fait apparaître un « context-menu ».</p>
      </div>
      <div class="section">
        <div id="carte"></div>
      </div>
    </div>
    <!-- le context-menu -->
    <div id="context_menu">
      <ul>
        <li id="cm_debut">Définir comme Début</li>
        <li id="cm_fin">Définir comme Fin</li>  
        <li></li>  
        <li id="cm_supprime">Supprimer</li>
      </ul>  
    </div>
    <script>
    var oMap;
    var lgMarkers;
     
    // création de la carte
    oMap = L.map('carte', {
        center: [ 46.8, 1.7 ],
        zoom: 6
    });
    oMap.addLayer( L.tileLayer(
        'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }
      ));
    // création et ajout du LayerGroup
    lgMarkers = new L.LayerGroup();
    oMap.addLayer(lgMarkers);
     
    // fonction sur click oMap
    oMap.on('click', function (e) {
        addMarker( e);
    });
    // efface context-menu
    oMap.on('mousedown', function (e) {
        hideContextMenu();
    });
     
     
    function addMarker(e) {
      // création du marker
      var m = L.marker([e.latlng.lat, e.latlng.lng]);
      // attache le marker au layerGroup
      m.addTo(lgMarkers);
      // sur le click droit du marker le sous menu s'ouvre
      m.on('contextmenu', function( e){
        var me_ = this;
        // position pour affichage
        var pos = {
          x: e.originalEvent.pageX,
          y: e.originalEvent.pageY
        };
        // affiche le context-menu
        showContextMenu( me_, pos);
      });    
    }
    function hideContextMenu(){
      document.getElementById('context_menu').style.display = 'none';
    }
    function showContextMenu( marker, pos){
      // positionne le context menu
      var oElem = document.getElementById('context_menu');  
      oElem.style.left = pos.x +'px';
      oElem.style.top = pos.y +'px';
      oElem.style.display = 'block';
      //affecte les fonctions
      document.getElementById('cm_supprime').onclick =  function(){
        lgMarkers.removeLayer( marker);
      };
      document.getElementById('cm_debut').onclick =  function(){
        console.log( 'Deb : ', marker.getLatLng());
        alert( 'Deb : '+ marker.getLatLng().toString());    
      };  
      document.getElementById('cm_fin').onclick =  function(){
        console.log( 'Fin : ', marker.getLatLng());
        alert( 'Fin : ' + marker.getLatLng().toString());    
      };  
    }
    // pour fermer le contextMenu
    document.addEventListener('click', function(){
        hideContextMenu();
    }, false);
    document.addEventListener('keydown', function (e) {
        var key = e.keyCode;
        if (key === 27) {
            hideContextMenu();
        }
    });
    </script>
    </body>
    </html>

  15. #15
    Membre à l'essai
    Merci beaucoup à toi, je vais intégrer le code que tu m'as donné au miens pour faire marcher tout ca.

    Je vous remercie tous votre aide m'a été précieuse comme toujours