Afficher des marqueurs dynamiquement

**Darkoos0410** · 05/06/2021, 19h41

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 :

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
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);
                }
            });
        }
        }

Nom : 1.png
Affichages : 347
Taille : 212,3 Ko

La fonction JSON ressort bien la Latitude et la Longitude de chaque capteurs.

Merci d'avance pour votre aide

Baptiste

**Doksuri** · 05/06/2021, 22h29

salut, as-tu regarde le site officiel ? la doc y est tres bien leafletjs.com/

**Darkoos0410** · 05/06/2021, 23h48

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)

**tag9724** · 06/06/2021, 00h19

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/

**Darkoos0410** · 06/06/2021, 00h38

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

**Darkoos0410** · 08/06/2021, 14h07

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à.
Nom : 1.png
Affichages : 267
Taille : 212,3 Ko

Nom : 1.png
Affichages : 267
Taille : 212,3 Ko

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

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
<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

**tag9724** · 08/06/2021, 19h37

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 :

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

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 :

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

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.

**Darkoos0410** · 09/06/2021, 14h34

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

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
	<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.

**Darkoos0410** · 14/06/2021, 21h32

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 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
<?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 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
	<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

Afficher des marqueurs dynamiquement

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager