Discussion :

[Darkoos0410]

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

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

Merci d'avance pour votre aide

Baptiste

[Doksuri]

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

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

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

[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

[Darkoos0410]

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


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