[Résolu] afficher un marqueur sur une carte web leaflet par Darkoos - page 1

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 ou la carte et intégrer

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

	<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

Darkoos

14 juin 2021 à 21:31:15

Stonners

18 juin 2021 à 14:35:39

Bonjour, dans votre initMap, vous n'utiliser pas le Marker, voici un lien vers la documentation de comment utiliser un maker sur leaflet :

https://leafletjs.com/reference-1.7.1.html#marker

Un sourire coûte moins cher que l'électricité, mais donne autant de lumière

afficher un marqueur sur une carte web leaflet

Supprimer

Modérer

Signaler le message aux modérateurs