Afficher des marqueurs dynamiquement

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

Dans mon projet je doit créer une carte leaflet pour placer des points sur cet carte. J'ai donc commencé par récupérer les données sous le format JSON puis je doit les intégrer dans ma carte qui et en JS mais je ne trouve pas dutout de site ou de commande pour faire cela.

Voici mon script JS qui marche bien:

Code:

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
document.addEventListener("DOMContentLoaded", init);
 
function init(event) {
    console.log("Lancement de la fonction init");
 
    document.getElementById("bouton").addEventListener("click", requeteAjax);
 
}
 
function requeteAjax(){
        console.log("requeteAjax")
 
        let id =document.getElementById("valeur").value;
        if (id == "")
        {
            console.log("Le champ n'est pas remplie"); 
        }
        else
        {
 
            $.ajax('recupSQL.php',
            {
            type: 'POST',
            data: 'Num_boitiers=' + id,
            dataType: 'json',
 
            success: function(data, textStatus, jqXHR)
                {
                       $('#lat').text(data['Latitude']);
                       $('#lon').text(data['Longitude']);
                },
 
                error: function(jqXHR, textStatus, errorThrown)
                {
                    console.log(textStatus);
                }
            });
        }
        }

Pièce jointe 599238
La fonction JSON ressort bien la Latitude et la Longitude de chaque capteurs.

Merci d'avance pour votre aide

Baptiste

05/06/2021, 22h29
Doksuri

salut, as-tu regarde le site officiel ? la doc y est tres bien leafletjs.com/
05/06/2021, 23h48
Darkoos0410

Faut-il tuiliser les fichier GEOJSON. (https://leafletjs.com/examples/geojson/)

Ou alors c'est dans ce lien la qu'il y a la réponse (https://leafletjs.com/examples.html)
06/06/2021, 00h19
tag9724

Si j'ai bien compris ta question tu souhaite savoir comment créer et afficher une carte avec Leaflet et ensuite y afficher un marqueur en te servant d'une longitude et d'une latitude ?

Si oui j'ai créer un exemple interactif très basique ici : https://jsfiddle.net/n48amzct/

C'est essentiellement un copier collé du tutoriel "Quick Start Guide" présent sur le site de Leaflet : https://leafletjs.com/examples/quick-start/
06/06/2021, 00h38
Darkoos0410

Oui tu as bien compris. Par contre j'ai déjà réussi a afficher la carte et a ajouter un point mais en fixe directement sur le programme, il me restent plus qu'a prendre les données JSON que j'ai créer avec mon fichier JS et les intégrers dans la carte

1 pièce(s) jointe(s)

Bonjour,

Ma problématique c'est que je n'arrive pas a afficher les points sur une carte web leaflet. La valeurs des points sont stocké dans une BDD, dans un champs Latitude et Longitude.
Je récupère bien les données en JSON sous cet forme là.
Pièce jointe 599403

J'arrive bien a afficher la carte, mais pas les point que je veut. Voici le script de la carte leaflet:

Code:

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
<div id="map">
	    <!-- Ici s'affichera la carte -->
		</div>
 
        <!-- Fichiers Javascript -->
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
	<script>
            // On initialise la latitude et la longitude de Paris (centre de la carte)
            var lat = 48.837579;
            var lon = -1.597302;
            var macarte = null;
            // Fonction d'initialisation de la carte
            function initMap() 
                        {
                // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
                macarte = L.map('map').setView([lat, lon], 11);
                // Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
                L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', 
                                {
                    // Il est toujours bien de laisser le lien vers la source des données
                    attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
                    minZoom: 1,
                    maxZoom: 20
                }).addTo(macarte);
            }
            window.onload = function()
                                                        {
                                                        // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
                                                        initMap(); 
                                                        };      
                                        
                                        // Fonction d'initialisation de la carte
                                        function initMap() 
                                        {
                                                // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
                                                macarte = L.map('map').setView([lat, lon], 11);
                                                // Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
                                                L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', 
                                                {
                                                        // Il est toujours bien de laisser le lien vers la source des données
                                                        attribution: 'données © OpenStreetMap/ODbL - rendu OSM France',
                                                        minZoom: 1,
                                                        maxZoom: 20
                                                }).addTo(macarte);
                                                
                                                function requeteAjax()
                                                {
                                                        console.log("requeteAjax");
                                                        let id =document.getElementById("valeur").value;
                                                        if (id == "")
                                                        {
                                                                console.log("Champs pas rempli !");
                                                        }
                                                        else
                                                        {
                                                                let xmlhttp = new XMLHttpRequest();
                                                                ajax.onreadystatechange = function() 
                                                                {
                                                                        if (this.readyState == 4 && this.status == 200)
                                                                        {
                                                                                console.log(this.responseText);
                                                                                //On traite les données reçues
                                                                                var data=JSON.parse(this.responseText)
                                                                                
                                                                                 // On boucle sur les données (ES8)
                                                                                 Object.entries(donnees.agence).forEach(agence  =>
                                                                                {
                                                                                  // Ici on a un j'ai une seule agence
                                                                                  console.log(donnees.agences)
                                                                                 // On crée un marqueur pour un boitier
                                                                                 let marker = L.marker([agence [1].lat, agence [1].lon]).addTo(macarte)
                                                                                })
                                                                        }
                                                                        else
                                                                        {
                                                                                console.log(this.statusText);
                                                                        }       
                                                                                //document.getElementById("lat").innerHTML=data["Latitude"];
                                                                                //document.getElementById("lon").innerHTML=data["Longitude"];
                                                                }
                                                        }       
                                                };
                                                
                                                /*// Nous ajoutons un marqueur
                                                var marqueur = L.marker([lat, lon]).addTo(macarte);
                                                //marqueur.bindPopup("<p>Paris</p>");*/         
                                        }
                                        
        </script>

Merci d'avance pour votre aide
Baptiste

Si aucun point ne s'affiche sur la map c'est pour deux raisons :

Tu n'appelle jamais la fonction requeteAjax()
Ta fonction requeteAjax() contient des erreurs

Dans la partie
Code:

1 2 3 4 let xmlhttp = new XMLHttpRequest(); ajax.onreadystatechange = function () { /* [...] */ }
xmlhttp est déclaré mais jamais utilisé quand à ajax.onreadystatechange ajax est une variable qui n'est jamais déclarée.

Ensuite dans la partie
Code:

1 2 3 4 5 6 7 8 9 var data = JSON.parse(this.responseText) // On boucle sur les données (ES8) Object.entries(donnees.agence).forEach(agence => { // Ici on a un j'ai une seule agence console.log(donnees.agences) // On crée un marqueur pour un boitier let marker = L.marker([agence[1].lat, agence[1].lon]).addTo(macarte) })
La variable donnees n'est jamais déclarée, je pense que tu avais voulu écrire data.

Aussi attention à ta fonction initMap, elle est déclarée en double.

oui ne t'inquiète pas j'ai réglé tout ça, voici le nouveau fichier:

Code:

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
	<head>
		<meta charset="utf-8">
        <!-- Nous chargeons les fichiers CDN de Leaflet. Le CSS AVANT le JS -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
        <title>Carte</title>
   </head>
 
	<div id="map">
	    <!-- Ici s'affichera la carte -->
		</div>
 
        <!-- Fichiers Javascript -->
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
	<script>
            // On initialise la latitude et la longitude de Granville (centre de la carte)
            var lat = 48.837579;
            var lon = -1.597302;
                        var latM;
                        var lonM;
            var macarte = null;
                        
            window.onload = function()
                                                        {
                                                        // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
                                                        initMap(); 
                                                        };      
                                        
                        // Fonction d'initialisation de la carte
                        function initMap() 
                        {
                                console.log("init lance")
                                // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
                                macarte = L.map('map').setView([lat, lon], 11);
                                // Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
                                L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', 
                                        {       // Il est toujours bien de laisser le lien vers la source des données
                                                attribution: 'données © OpenStreetMap/ODbL - rendu OSM France',
                                                minZoom: 1,
                                                maxZoom: 20
                                        }).addTo(macarte);
                                requeteAjax();
                        };
                                        
                        function requeteAjax()
                        {
                                console.log("requeteAjax");
                                let id =document.getElementById("valeur").value.substr(7);
                                console.log(id);
                                if (id == "")
                                {
                                        console.log("Champs pas rempli !");
                                }
                                else
                                {
                                        var data = "Num_boitiers="+id;
                                        var url = "recupSQL.php";
                                        var ajax = new XMLHttpRequest();
                                        ajax.open("POST", url, true);
                                        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                                        ajax.send(data);
                                        ajax.onreadystatechange = function() 
                                        {
                                                if (this.readyState == 4 && this.status == 200)
                                                {
                                                        console.log(this.responseText);
                                                        //On traite les données reçues
                                                        var data=JSON.parse(this.responseText);
                                                        console.log(data["Latitude"]);
                                                        var marqueur = L.marker([data["Latitude"], data["Longitude"]]).addTo(macarte);
                                                }
                                                else
                                                {
                                                        console.log(this.statusText);
                                                }       
                                        }
                                }
                                                // Nous ajoutons un marqueur
                                                //var marqueur = L.marker([lati, longi]).addTo(macarte);
                                                //marqueur.bindPopup("<p>Paris</p>");*/         
                        };
                                        
    </script>

Mais c'est un autre problème que j'ai. J'ai mit la carte dans un fichier séparé et je voudrais l'appeler dans un fichier php mais cela ne marche pas.

Bonjour,

J'ai un petit problème avec une carte leaflet, je ne comprend pas pourquoi je ne n'arrive pas a afficher de marqueur sur la carte.

Voici le code où la carte est intégrée

Code:

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
<?php
 
        // Initialiser la session
        session_start();
        // Vérifiez si l'utilisateur est connecté, sinon redirigez-le vers la page de connexion
        if(!isset($_SESSION["username"])){
                header("Location: login.php");
                exit(); 
        }
require('config.php');
$color = 'white';
?>
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="css/style.css" media="all"/>
	</head>
	<body>
		<div class="sucess">
		<h1>Bienvenue <?php echo $_SESSION['username']; ?> !</h1>
		<p>C'est votre espace utilisateur.</p>
		<a href="logout.php">Déconnexion</a>
		</div>
 
		<b style='color: <?php echo $color; ?>;'><h1>Liste des capteurs :</h1></b>
 
		<?php
                        if (isset($_POST['valider']))
                        {
                                        $nbBoitier = intval($_POST['Capteur']);
                        }
                ?>
 
		<form class="monform" name="connexion" method="post">
		<br>
		<br>
		 <b style='color: <?php echo $color; ?>;'>Choisir un capteur :</b>
		<select id="valeur" name="Capteur">
		 <?php
                 
                        echo $nbBoitier;
                        
                        $req = "SELECT Num_boitiers FROM boitier_qae ORDER BY Num_boitiers ";
                        $sql = mysqli_query($conn, $req) or die('Erreur SQL2 !<br/>'.$req.'<br/>'.mysqli_error($conn));
                
                        while ($row = mysqli_fetch_array($sql, MYSQLI_ASSOC))
                        {
                                echo $row['Num_boitiers'];
                                $i=intval ($row['Num_boitiers']);
                                
                                if ($i==$nbBoitier) 
                                {
                                        echo "<option value=$i selected>capteur $i</option>";
                                        echo "<br>";
                                }
                                else
                                {
                                        echo "<option value=$i>capteur $i</option>";
                                        echo "<br>";
                                }       
                        }
                 ?>
		</select>
 
		 <br>
 
		 <br><input type="submit" class="gauche " name="valider" value="OK"/></br>
         <br><input type="submit" class="gauche" name="annuler" value="ANNULER"/></br>
		 <br>
		 <br>
        </form>
 
        <?php
                
                require('maps.html');
                
                if (isset($_REQUEST['valider']))
                {
                
                // On créé la requête
                $req = "SELECT * FROM boitier_qae WHERE Num_boitiers=".$nbBoitier." ORDER BY Num_boitiers";
                //echo $req;
 
        // on envoie la requête
        $res = $conn->query($req);
        // on va scanner tous les tuples un par un 
        echo "<table class='paleBlueRows' border=2 style='color: $color;'>";
 
                echo "<tr>
                  <th>Numéro Boitier</th>
                  <th>Date_Heure</th>
                  <th>Mesure à 1 µm</th>
                  <th>Mesure à 2,5 µm</th>
                  <th>Mesure à 10 µm</th>
                  <th>Description</th>
                  <th>Latitude</th>
                  <th>Longitude</th>
                 </tr>";
 
        while($data = mysqli_fetch_array($res))
        {
          // on affiche les résultats sous forme de tableau html
 
          echo "<tr>
          <td>".$data['Num_boitiers']."</td> 
                  <td>".$data['Date_Heure']."</td>
                  <td>".$data['PM1']."</td>
                  <td>".$data['PM2_5']."</td>
                  <td>".$data['PM10']."</td>
                  <td>".$data['Description']."</td>
                  <td>".$data['Latitude']."</td>
                  <td>".$data['Longitude']."</td>";
          echo "</tr>" ;
 
        }
        echo "</table>";
 
        // on ferme la connexion
        $conn->close();
                }
        
                ?>
 
    </body>
</html>

Et voici le fichier de la carte web leaflet :

Code:

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
	<head>
		<meta charset="utf-8">
        <!-- Nous chargeons les fichiers CDN de Leaflet. Le CSS AVANT le JS -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
        <title>Carte</title>
   </head>
 
	<div id="map">
	    <!-- Ici s'affichera la carte -->
		</div>
 
        <!-- Fichiers Javascript -->
        <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
	<script>
            // On initialise la latitude et la longitude de Granville (centre de la carte)
            var lat = 48.837579;
            var lon = -1.597302;
                        var latM;
                        var lonM;
            var macarte = null;
                        
            window.onload = function()
                                                        {
                                                        // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
                                                        initMap(); 
                                                        };      
                                        
                        // Fonction d'initialisation de la carte
                        function initMap() 
                        {
                                console.log("init lance")
                                // Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
                                macarte = L.map('map').setView([lat, lon], 11);
                                // Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
                                L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', 
                                        {       // Il est toujours bien de laisser le lien vers la source des données
                                                attribution: 'données © OpenStreetMap/ODbL - rendu OSM France',
                                                minZoom: 1,
                                                maxZoom: 20
                                        }).addTo(macarte);
                                //requeteAjax();
                        };
                                        
                        function requeteAjax()
                        {
                                console.log("requeteAjax");
                                let id = document.getElementById("valeur").value.substr(7);
                                //let id = document.getElementById("valeur").value;
                                //console.log (document.getElementById("valeur").value);
                                console.log(id);
                                if (id == "")
                                {
                                        console.log("Champs pas rempli !");
                                }
                                else
                                {
                                        var data = "Num_boitiers="+id;
                                        var url = "recupSQL.php";
                                        var ajax = new XMLHttpRequest();
                                        ajax.open("POST", url, true);
                                        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                                        ajax.send(data);
                                        ajax.onreadystatechange = function() 
                                        {
                                                if (this.readyState == 4 && this.status == 200)
                                                {
                                                        console.log(this.responseText);
                                                        //On traite les données reçues
                                                        var data=JSON.parse(this.responseText);
                                                        console.log(data["Latitude"]);
                                                        var marqueur = L.marker([data["Latitude"], data["Longitude"]]).addTo(macarte);
                                                }
                                                else
                                                {
                                                        console.log(this.statusText);
                                                }       
                                        }
                                }
                                                /* Nous ajoutons un marqueur
                                                var marqueur = L.marker([lati, longi]).addTo(macarte);
                                                marqueur.bindPopup("<p>Paris</p>");*/           
                        };
                                        
    </script>

Merci d'avance pour votre aide

Baptiste