Pas à pas – Insérer une carte OpenStreetMap sur votre site

11 mai 2018 - : HTML Javascript Tutoriel - : 72 commentaires - : 11088 - Tutoriel Javascript Openstreetmap

Google a annoncé il y a quelques jours que son API Google Maps Javascript va devenir payante pour un grand nombre de développeurs, habitués jusqu’à maintenant à une gratuité totale.

Pour être clair, de nombreux sites conserveront la gratuité, mais vous ne serez pas à l’abri d’une facturation si votre site venait à connaître un pic de fréquentation.

Voici une alternative gratuite à Google Maps pour votre site et une mise en œuvre reprenant les exemples indiqués dans l’article Pas à Pas – Insérer une carte Google Maps avec l’API Google Maps Javascript

OpenStreetMap

Pour commencer, parlons un peu d’OpenStreetMap. Il s’agit d’un projet international fondé en 2004 dans le but de créer une carte libre du monde.

En plus de fournir des cartes, open source, de nombreuses API permettent de rendre leur utilisation très proche de Google Maps, ce qui en fait une alternative très crédible.

Initialisation de l’API

Carte OpenStreetMap

Pour initialiser l’API, nous devrons utiliser une bibliothèque Javascript qui nous donnera toutes les ressources pour intéragir avec les serveurs d’OpenStreetMap. La librairie que j’utilise est Leaflet. Nous allons créer un fichier HTML contenant le code ci-dessous

<!DOCTYPE html>
<html>
    <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="" />
        <style type="text/css">
            #map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
                height:400px;
            }
        </style>
        <title>Carte</title>
    </head>
    <body>
        <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 type="text/javascript">
            // On initialise la latitude et la longitude de Paris (centre de la carte)
            var lat = 48.852969;
            var lon = 2.349903;
            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(); 
            };
        </script>
    </body>
</html>

Ajout d’un marqueur

Voir cette partie en vidéo

Bien sûr, cette carte ne fait apparaître aucun marqueur de position. Il pourrait être intéressant de mettre un marqueur aux coordonnées que nous avons entrées.

Carte OpenStreetMap avec marqueur

Pour ce faire, nous allons insérer le code d’ajout de marqueur ci-dessous juste avant la fermeture de notre fonction initMap (au dessus de l’accolade située en ligne 26 sur le code ci-dessus).

// Nous ajoutons un marqueur
var marker = L.marker([lat, lon]).addTo(macarte);

Ajout de plusieurs marqueurs

Voir cette partie en vidéo

Bien sûr, nous pourrions avoir besoin de plusieurs marqueurs. OpenStreetMap nous propose donc d’ajouter ces différents points en effectuant une boucle sur un tableau contenant les différentes coordonnées.

Carte OpenStreetMap avec marqueurs

Dans notre exemple, nous aurons 4 points correspondant à 4 villes. Nous allons initialiser un tableau json « en dur » et le parcourir pour placer les différents marqueurs.

Voici la fonction initMap mise à jour, les lignes ajoutées sont en surbrillance.

// Nous initialisons une liste de marqueurs
var villes = {
	"Paris": { "lat": 48.852969, "lon": 2.349903 },
	"Brest": { "lat": 48.383, "lon": -4.500 },
	"Quimper": { "lat": 48.000, "lon": -4.100 },
	"Bayonne": { "lat": 43.500, "lon": -1.467 }
};
// 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);
	// Nous parcourons la liste des villes
	for (ville in villes) {
		var marker = L.marker([villes[ville].lat, villes[ville].lon]).addTo(macarte);
	}               	
}

Les bulles d’information

Il peut être nécessaire, dans certaines utilisations des cartes OpenStreetMap, de faire apparaître une bulle d’information lorsque l’utilisateur cliquera sur le marqueur.

Carte OpenStreetMap avec popups

Dans l’API, ces bulles sont appelées « Popup ». Elles doivent être « attachées » à chacun des marqueurs et s’activer au clic de l’utilisateur.

Voici le code à ajouter pour nous permettre d’afficher la ville correspondant au marqueur

// Nous parcourons la liste des villes
for (ville in villes) {
	var marker = L.marker([villes[ville].lat, villes[ville].lon]).addTo(macarte);
	// Nous ajoutons la popup. A noter que son contenu (ici la variable ville) peut être du HTML
	marker.bindPopup(ville);
}               	

Les marqueurs personnalisés

Voir cette partie en vidéo

L’API Leaflet permet de personnaliser les marqueurs affichés sur la carte.

Avant d’écrire du code, il sera nécessaire de créer les images correspondantes.

Dans l’exemple suivant, nous allons utiliser une image appelée « autres.png », d’une taille de 64 par 64 pixels, qui sera accessible depuis le chemin http://localhost/carte/icons, ce qui donnera un résultat comme celui ci-dessous.

Carte OpenStreetMap avec marqueurs personnalisés

Voici le code à modifier

function initMap() {
	// Nous définissons le dossier qui contiendra les marqueurs
	var iconBase = 'http://localhost/carte/icons/';
	// 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);
	// Nous parcourons la liste des villes
	for (ville in villes) {
		// Nous définissons l'icône à utiliser pour le marqueur, sa taille affichée (iconSize), sa position (iconAnchor) et le décalage de son ancrage (popupAnchor)
		var myIcon = L.icon({
			iconUrl: iconBase + "autres.png",
			iconSize: [50, 50],
			iconAnchor: [25, 50],
			popupAnchor: [-3, -76],
		});
		var marker = L.marker([villes[ville].lat, villes[ville].lon], { icon: myIcon }).addTo(macarte);
		marker.bindPopup(ville);
	}               	
}

Le regroupement de marqueurs

Voir cette partie en vidéo

Lorsque de nombreux marqueurs se trouvent sur une carte, il peut être nécessaire de les regrouper pour faciliter sa lecture, ceux-ci apparaissant séparés lorsque le zoom le permet.

Carte OpenStreetMap avec regroupement de marqueurs

Les groupes de marqueurs s’appellent des « clusters ».

L’API Leaflet ne permet pas de faire des regroupements de marqueurs. Nous utiliserons une bibliothèque complémentaire appelée Markercluster.

Le code de notre page complète ressemblera à ceci. Les lignes ajoutées ou modifiées sont indiquées

<!DOCTYPE html>
<html>
    <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="" />
        <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
        <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
        <style type="text/css">
	    #map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
	        height:400px;
	    }
	</style>
	<title>Carte</title>
    </head>
    <body>
	<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 type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
	<script type="text/javascript">
	    // On initialise la latitude et la longitude de Paris (centre de la carte)
	    var lat = 48.852969;
	    var lon = 2.349903;
	    var macarte = null;
            var markerClusters; // Servira à stocker les groupes de marqueurs
            // Nous initialisons une liste de marqueurs
            var villes = {
                "Paris": { "lat": 48.852969, "lon": 2.349903 },
                "Brest": { "lat": 48.383, "lon": -4.500 },
                "Quimper": { "lat": 48.000, "lon": -4.100 },
                "Bayonne": { "lat": 43.500, "lon": -1.467 }
            };
	    // Fonction d'initialisation de la carte
            function initMap() {
                // Nous définissons le dossier qui contiendra les marqueurs
                var iconBase = 'http://localhost/carte/icons/';
		// 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);
                markerClusters = L.markerClusterGroup(); // Nous initialisons les groupes de marqueurs
                // 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);
                // Nous parcourons la liste des villes
                for (ville in villes) {
	            // Nous définissons l'icône à utiliser pour le marqueur, sa taille affichée (iconSize), sa position (iconAnchor) et le décalage de son ancrage (popupAnchor)
                    var myIcon = L.icon({
                        iconUrl: iconBase + "autres.png",
                        iconSize: [50, 50],
                        iconAnchor: [25, 50],
                        popupAnchor: [-3, -76],
                    });
                    var marker = L.marker([villes[ville].lat, villes[ville].lon], { icon: myIcon }); // pas de addTo(macarte), l'affichage sera géré par la bibliothèque des clusters
                    marker.bindPopup(ville);
                    markerClusters.addLayer(marker); // Nous ajoutons le marqueur aux groupes
                }
                macarte.addLayer(markerClusters);
            }
	    window.onload = function(){
		// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
		initMap(); 
	    };
	</script>
    </body>
</html>

Adapter le zoom pour afficher tous les marqueurs

Voir cette partie en vidéo

Il pourra être nécessaire, ponctuellement, d’adapter le zoom de la carte pour afficher automatiquement tous les marqueurs.

L’approche est simple, regrouper tous les marqueurs dans un tableau et demander à ce que le zoom s’adapte pour qu’ils soient tous visibles.

Voici le code de la fonction initMap finalisée

function initMap() {
	var markers = []; // Nous initialisons la liste des marqueurs
	// Nous définissons le dossier qui contiendra les marqueurs
	var iconBase = 'http://localhost/carte/icons/';
	// 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);
	markerClusters = L.markerClusterGroup(); // Nous initialisons les groupes de marqueurs
	// 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);
	// Nous parcourons la liste des villes
	for (ville in villes) {
		// Nous définissons l'icône à utiliser pour le marqueur, sa taille affichée (iconSize), sa position (iconAnchor) et le décalage de son ancrage (popupAnchor)
		var myIcon = L.icon({
			iconUrl: iconBase + "autres.png",
			iconSize: [50, 50],
			iconAnchor: [25, 50],
			popupAnchor: [-3, -76],
		});
		var marker = L.marker([villes[ville].lat, villes[ville].lon], { icon: myIcon }); // pas de addTo(macarte), l'affichage sera géré par la bibliothèque des clusters
		marker.bindPopup(ville);
		markerClusters.addLayer(marker); // Nous ajoutons le marqueur aux groupes
		markers.push(marker); // Nous ajoutons le marqueur à la liste des marqueurs
	}
	var group = new L.featureGroup(markers); // Nous créons le groupe des marqueurs pour adapter le zoom
	macarte.fitBounds(group.getBounds().pad(0.5)); // Nous demandons à ce que tous les marqueurs soient visibles, et ajoutons un padding (pad(0.5)) pour que les marqueurs ne soient pas coupés
	macarte.addLayer(markerClusters);
}

Voilà, bon amusement

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder aux forums de Nouvelle-Techno.fr ou au serveur Discord pour une entraide par chat

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

fzBen a écrit le 8 décembre 2019 à 23:22

Bonjour, 

 

Merci tout d'abord pour ce super tuto!!

 

Je travaille sur un projet en MVC, j'utilise spring et une BDD sqlite.

Je voudrais pouvoir afficher des positions de nodes qui sont stockées dans ma BDD. 

Dans mon exemple de code, je récupère les données et je les affiche dans un tableau (tout moche ^^), 

mais en réalité, je devrais les afficher sur une map. 

Je suis en apprentissage en dév! J'ai pas mal chérché et testé des solutions avant de me permettre de demander de l'aide ici! 

Si vous avez une piste, je suis preneuse. 

NodeCtrl.java

package java.controller;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;


import java.entites.*;
import java.services.IServiceNodes;

@Controller
public class ShowNodesCtrl {
	
	
	@Resource
    private IServiceNodes service;
	//afficher les nodes 
	
	@RequestMapping(value = "/showNodes", method=RequestMethod.GET)
    public String afficher(ModelMap pModel) {
		 //System.out.println("serviceNull : "+(service == null));
        final List<Node> lListNodes = service.getAllNodes();
        pModel.addAttribute("listNodes", lListNodes);
        return "listNodes";
	}	
	
	@RequestMapping(value = "/PNodes", method=RequestMethod.GET)
	public String afficherPositions(ModelMap pModel) {
		final List<Position> lListPositionsNode = service.getAllPositionsNode();
        pModel.addAttribute("ListPositionsOfNode", lListPositionsNode);
		return "listPositionsOfNode"; 
	}
	//afficher les connections 
	
//	@RequestMapping(value = "/nodes/connects", method = RequestMethod.GET, params = {"connects"})
//  public String afficherCon(ModelMap pModel) {
//		 //System.out.println("serviceNull : "+(service == null));
//      final List<Connect> lListConnects = service.getAllConnects();
//      pModel.addAttribute("listConnects", lListConnects);
//      return "listConnects";
//	}
}

vueNode.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	isELIgnored="false" pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<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="" />
<link rel="stylesheet" type="text/css"
	href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" type="text/css"
	href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
<style type="text/css">
#map {
	height: 400px;
}
</style>
<title><spring:message code="titre.listNodes" /></title>

</head>
<body>
	<div id="map">
		<c:forEach items="${listNodes}" var="n">
			<c:out value="${n.positionsNode}" />
		</c:forEach>

		<!-- Fichiers Javascript -->
		<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
			integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
			crossorigin="">
		</script>
		<script type='text/javascript'
			src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'>
		</script>
		<script type="text/javascript">
			// On initialise la latitude et la longitude de gennevilliers (centre de la carte)
			var lat = 48.9426;
			var lon = 2.3058;
			var macarte = null;
			var markerClusters; // Servira à stocker les groupes de marqueurs
			// Nous initialisons une liste de marqueurs
			// !!!faut trouver un moyen de récuperer les markers a partir des positons 
			
			
			var nodes = {

			"Paris" : {
				"lat" : 48.852969,
				"lon" : 2.349903
			},
			"Courbevoie" : {
				"lat" : 48.8953355,
				"lon" : 2.2564448
			},
			"Gennevilliers" : {
				"lat" : 48.9235992432,
				"lon" : 2.2901699543
			},
			"Asnières/Seine" : {
				"lat" : 48.9167,
				"lon" : 2.2833
			} 
			};
			// Fonction d'initialisation de la carte
			function initMap() {
				// Nous initialisons la liste des marqueurs
				var markers = [];
				// 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);
				// Nous initialisons les groupes de marqueurs
				markerClusters = L.markerClusterGroup();

				// 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 : 2,
									maxZoom : 40
								}).addTo(macarte);

				
// 				function addMarker(map, latLng, onClick){
// 					var marker = L.marker(latLng).addTo(map);
// 					if (onClick !== null){
// 						marker.on('click', onClick)
// 					}
// 					return marker; 
// 				}

				// Nous parcourons la liste des nodes
				for (node in nodes) {

					var marker = L.marker([ nodes[node].lat, nodes[node].lon ]); // pas de addTo(macarte), l'affichage sera géré par la bibliothèque des clusters
					marker.bindPopup(node);
					markerClusters.addLayer(marker); // Nous ajoutons le marqueur aux groupes
					markers.push(marker); // Nous ajoutons le marqueur à la liste des marqueurs
				}
				var group = new L.featureGroup(markers); // Nous créons le groupe des marqueurs pour adapter le zoom
				macarte.fitBounds(group.getBounds().pad(0.5)); // Nous demandons à ce que tous les marqueurs soient visibles, et ajoutons un padding (pad(0.5)) pour que les marqueurs ne soient pas coupés
				macarte.addLayer(markerClusters);
			}

			// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
			window.onload = function() {
				initMap();
			};
		</script>
	</div>

// affichage des données du des nodes dans un tableau:
	<div>
		<table border="1">
			<thead>
				<tr>
					<th><center>
							<spring:message code="colonne.identifiant" />
						</center></th>
					<th><center>
							<spring:message code="colonne.name" />
						</center></th>
					<th><center>
							<spring:message code="colonne.positions" />
						</center></th>
					<th><center>
							<spring:message code="colonne.audios" />
						</center></th>
					<th><center>
							<spring:message code="colonne.msgs" />
						</center></th>

				</tr>
			</thead>
			<tbody>
				<c:forEach items="${listNodes}" var="n">
					<tr>
						<td><center>
								<c:out value="${n.node_id}" />
							</center></td>
						<td><center>
								<c:out value="${n.node_name}" />
							</center></td>
						<td><center>
								<c:out value="${n.positionsNode}" />
							</center></td>
						<td><center>
								<c:out value="${n.audiosNode}" />
							</center></td>
						<td><center>
								<c:out value="${n.MSGSNode}" />
							</center></td>
					</tr>
				</c:forEach>
			</tbody>
		</table>

		<c:forEach items="${listNodes}" var="n"><br>
		Positions du node "${n.node_name}":	
		<c:out value="${n.positionsNode}" />
		</c:forEach>
	</div>
</body>
</html>

En vous remerciant par avance.

Répondre

Yadugaz07 a écrit le 11 novembre 2019 à 08:53

Bonjour

Bravo pour votre tuto extrêment clair. Pour ceux que cela interesse j'y ai rajouté la possibilité de visualiser plusieurs cartes > ex : http://www.yadugaz07.com/vtt-vallee-drome-vercors.php. Je travaille aussi à pouvoir visualiser plusieurs trace gpx (comme dans les pages équestre) mais plus simplement.

Répondre

hedikarray a écrit le 9 novembre 2019 à 16:01

Bonjour ,

trés beau tuto cher ami .
ma question est: lors de l'affichage du map je remarque ça (comme le montre la photo ) c'est quoi mon problème exactement?

et merci

Répondre

Nouvelle-Techno.fr a répondu le 9 novembre 2019 à 16:30

Bonjour,

Le fichier CSS de Leaflet n'est pas importé, il faudrait vérifier la balise link en haut de la page.

Répondre

Philippe a écrit le 1 novembre 2019 à 12:03

Bonjour,

Super tuto, je vous remercie.

Question: comment récupérer les infos marqueurs pour les mettre dans la variables "villes" à partir du base sql?

Mise en forme de la liste des marqueurs pour utilisation par le script?

Merci d'avance.

Philippe

Répondre

Nouvelle-Techno.fr a répondu le 1 novembre 2019 à 12:15

Bonjour,

Les données doivent être récupérées en PHP puis transformées en une variable compréhensible par Javascript.

Le plus "simple" est d'interroger le serveur en Ajax puis de boucler sur le contenu renvoyé. Je travaille actuellement sur un tutoriel de ce type.

La liste des marqueurs est sous la forme que vous souhaitez, mais habituellement c'est du json.

Répondre

Philippe a répondu le 1 novembre 2019 à 20:21

Merci pour la réponse rapide.

Pour la récupération avec PHP, aucun problème, j'ai bien une variable avec les données mise en forme comme dans le script.

Par contre je n'arrive pas à la passer au script javascript...

Je ne suis oas un champion du javascript...

 

Répondre

Nouvelle-Techno.fr a répondu le 1 novembre 2019 à 20:38

Les informations sont récupérées en Ajax ?

Si oui, une boucle sur la variable de la même façon que dans le tuto suffit.

Si non, est-il possible de voir un exemple de code ?

Merci

Répondre

Philippe a répondu le 1 novembre 2019 à 21:09

1- j'écris les infos dans un fichier texte avec PHP, ensuite je le récupère avec ce script

<script language="JavaScript">
        
    function sendRequest(url,callback,postData) {
    var req = createXMLHTTPObject();
    if (!req) return;
    var method = (postData) ? "POST" : "GET";
    req.open(method,url,true);
    req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    if (postData)
        req.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    req.onreadystatechange = function () {
        if (req.readyState != 4) return;
        if (req.status != 200 && req.status != 304) {
//            alert('HTTP error ' + req.status);
            return;
        }
        callback(req);
    }
    if (req.readyState == 4) return;
    req.send(postData);
}

var XMLHttpFactories = [
    function () {return new XMLHttpRequest()},
    function () {return new ActiveXObject("Msxml2.XMLHTTP")},
    function () {return new ActiveXObject("Msxml3.XMLHTTP")},
    function () {return new ActiveXObject("Microsoft.XMLHTTP")}
];

    function createXMLHTTPObject() {
        var xmlhttp = false;
        for (var i=0;i<XMLHttpFactories.length;i++) {
            try {xmlhttp = XMLHttpFactories[i]();    }
            catch (e) {    continue;    }
            break;
        }
    return xmlhttp;
}       

puis j'ai essaiyé de v=créer la variable villes

sendRequest('../admin/moussesgps.txt',handleRequest);
    //document.getElementById("demo").innerHTML = "mon premier JavaScript";
    function handleRequest(req){

alert(req.responseText); // pour voir la réponse

       return  req.responseText;
    }

si je copie manuellement les infos récupérées dans la boite d'alerte,dans le script cela fonctionne.

Répondre

Nouvelle-Techno.fr a répondu le 1 novembre 2019 à 21:14

Ok, c'est donc dans la fonction handleRequest qu'il faut mettre la boucle de création des marqueurs dans ce cas

Répondre

Philippe a répondu le 2 novembre 2019 à 11:51

Bonjour,

Je bloque justement sur l'écriture de ce bout de code...

Pouriez vous m'aider ? 

Je ne sais pas passer le résultat à votre script.

Répondre

Nouvelle-Techno.fr a répondu le 2 novembre 2019 à 12:28

Bonjour,

J'imagine quelquechose comme ça

// Dans la fonction handleRequest
let villes = JSON.parse(req.responseText);

for (ville in villes) {
    var marker = L.marker([villes[ville].lat, villes[ville].lon]).addTo(macarte);
    marker.bindPopup(ville);
}

 

Répondre

Jarod a écrit le 25 octobre 2019 à 14:00

Très bon Tuto clair et détaillé 

Envisager-vous de faire de même pour les polygones définissant des régions ?

Merci pour votre retour

 

Répondre

Nouvelle-Techno.fr a répondu le 25 octobre 2019 à 15:29

Bonjour,

Je vais effectivement mettre en place un tutoriel sur les polygones et l'utilisation de données GeoJson dans les prochaines semaines.

Répondre

Nouvelle-Techno.fr a répondu le 11 septembre 2019 à 21:42

Bonsoir,

Merci pour votre commentaire. Pour KML, ce n'était pas à l'ordre du jour, mais je vais étudier la question.

Répondre

Muriel a écrit le 7 septembre 2019 à 10:54

Bonjour,

Votre tuto est très bien fait mais il est aussi très dense et je n'ai pas bien noté où on enregistre le fichier une fois que tout est fait.

Pouvez-vous m'indiquer le chemin ?

Merci.

 

Répondre

Nouvelle-Techno.fr a répondu le 7 septembre 2019 à 11:05

Bonjour,

Merci pour votre commentaire.

Vous enregistrez le fichier où vous le souhaitez, là où il vous servira, il est totalement autonome.

Répondre

halee a écrit le 16 juillet 2019 à 16:05

Bonjour, savez-vous comment ajouter le fait de pouvoir "Créer un rayon de x km autour d'un marqueur en choisissant le nombre x" ?

Répondre

awnaf a écrit le 30 mai 2019 à 14:08

Comment effacer un marker ???

jai fai ça :

marker = L.marker([lat, lon]).addTo(macarte);
marker.clear();

L.marker([lat, lon]).clear(macarte);

L.marker([lat, lon]).destroy(macarte);

marker.clear();

aucune ne marche

Répondre

Streliz a écrit le 17 mai 2019 à 11:37

Bonjour à vous !

J'imagine que vous avez du déjà trouver le soucis depuis le dépot de votre commentaire mais je vais tout de même y répondre ne sait-on jamais haha.
C'est simplement l'ouverture de votre balise script qui n'as pas été correctement ouverte. :p

Bonne journée à vous !

 

Répondre

Ecrire un commentaire