Intégrer une carte OpenStreetMap sur son site internet et gérer les Clusters


    
        
        
        
        
 

Depuis pas mal de temps je suis à la recherche d’une solution optimale pour afficher un certains nombres de points sur un fond de carte pour mon site Rêvedemontagne.

J’ai d’abords fais du développement en utilisant l’API V3 de chez google. Cependant cette solution est devenue payante et impose désormais que l’on donne son numéro de carte bleue. Personnellement je ne veux pas communiquer ce genre d’information à Google

Après de multiples recherches sur le net je me suis inspiré des tutoriels mis à disposition sur le site https://nouvelle-techno.fr pour développer solution optimale pour mon site avec la solution mondiale openstreetmap.

Je vais donc profiter de ce billet pour vous présenter un Pas à Pas de ce que j’ai fais.

Les prérequis :

Avant de suivre mon Pas à Pas je vous recommande d’abord d’avoir assimiler les deux tutoriels ci-dessous :

Cahiers des charges :

  • Localiser différents types de points sur une carte (Sommets, refuges, cols…)
  • Trouver une solution OpenSource
  • Gérer une grande quantité de données en les groupant sous forme de cluster (plus de 600 points au moments ou j’écris ces lignes)
  • Rendre tous ça dynamique

Déroulement du Pas à Pas :

Dans un premier temps je vous transmet la structure XHTML que nous allons utiliser

				
					<!DOCTYPE html>
<html>
    /*génération de l'entête de la page*/
    <head>
        <meta charset="utf-8">
	<title>Ma carte de test</title>
    </head>

    /*génération du corps de la page */
    <body data-rsssl=1>

    </body>

    /*génération du pieds de page*/
    <footer>

    </footer>

</html>
				
			

Je déclare en tête du fichier les librairies CSS propre à l’utilisation des cartes openstreetmap. Afin de s’assurer d’en avoir toujours la dernière version je vous recommande de les récupérer sur le site internet unpkg.com.

				
					<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" 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" />
				
			
Comme pour le point précédent je rajoute dans le bas du fichier les fichiers javascript indispensables pour l’utilisation d’openstreetmap. hébergés sur unpkg.com
				
					<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
				
			

Je rajoute le DIV « map » à l’endroit ou je veux afficher la carte.

				
					<div id="map"></div>
				
			

Je met un peu de CSS dans le header pour mettre en forme le DIV.
Important, veillez à bien lui assigner une hauteur. Dans le cas contraire votre carte ne s’affichera pas.

				
					<style>
  body{margin:0}
  #map{height: 100vh; width:60%; margin:auto;}
  h1 font-size:16px; color:#228b22; text-align:center;}
  footer{font-size:12px; text-align:center;}
</style>
				
			

Partie javascript

Nous allons voir maintenant la partie un peu plus technique du javascript. Avant toute chose vous aurez besoin d’une liste de points. Comme évoqué dans les prérequis pour notre exemple nous allons utiliser celle mise à disposition sur RêvedeMontagne que vous pourrez retrouver ici. Nous l’appellerons avec la méthode « GET ».

				
					<!-- Fichiers Javascript -->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
<script>
    
	// On initialise la carte
	var markers = []; 
	var macarte = null;
	var markerClusters; 
	macarte = L.map('map').setView([48.852969, 2.349903], 13);
	markerClusters = L.markerClusterGroup();
	

            

    L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
    
	
    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);

    let xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = () => 
	{

		if(xmlhttp.readyState == 4)
		{

			if(xmlhttp.status == 200){
			
				let donnees = JSON.parse(xmlhttp.responseText)
							
				Object.entries(donnees.agences).forEach(point => {
				
					var myIcon = L.icon({
                    iconUrl: point[1].iconRDM,
                    iconSize: [23, 23],
                    iconAnchor: [15, 23],
                    popupAnchor: [-3, -76],
                    });
									
					let marker = L.marker([point[1].lat, point[1].lon], { icon: myIcon })
					marker.bindPopup(point[1].nom + point[1].lien)
					markerClusters.addLayer(marker)
					markers.push(marker);
					

				})
				var group = new L.featureGroup(markers); 
				macarte.fitBounds(group.getBounds().pad(0.5)); 
				macarte.addLayer(markerClusters);
				
			}else
			{
				console.log(xmlhttp.statusText);
			}
		}
			
    }
	
    xmlhttp.open("GET", "https://revedemontagne.fr//google/carte_gene.php?idmass=2&typep=10");
	xmlhttp.send(null);

</script>	
				
			

Conclusion :

Vous trouverez ci-dessous l’intégralité du code qui me permet d’afficher les cartes openstreetmap sur le site internet RêvedeMontagne.

				
					<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta charset="utf-8">
    <title>ABCduWeb - démontstration de l'utilisation des Clusters sur OpenStreetMap</title>
	
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" 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>
        body{margin:0}
        #map{height: 100vh; width:60%; margin:auto;}
		h1{font-size:16px; color:#228b22; text-align:center;}
		footer{font-size:12px; text-align:center;}
    </style>
</head>

<body data-rsssl=1 data-cmplz=1 onload="init();">
	<h1>Exemple d'affichage d'une carte openstreetmap en gérant les clusters</h1>
	<div id="map"></div>

<!-- Fichiers Javascript -->
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
<script>
    
	// On initialise la carte
	var markers = []; 
	var macarte = null;
	var markerClusters; 
	macarte = L.map('map').setView([48.852969, 2.349903], 13);
	markerClusters = L.markerClusterGroup();
	

            

    L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
    
	
    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);

    let xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = () => 
	{

		if(xmlhttp.readyState == 4)
		{

			if(xmlhttp.status == 200){
			
				let donnees = JSON.parse(xmlhttp.responseText)
							
				Object.entries(donnees.agences).forEach(point => {
				
					var myIcon = L.icon({
                    iconUrl: point[1].iconRDM,
                    iconSize: [23, 23],
                    iconAnchor: [15, 23],
                    popupAnchor: [-3, -76],
                    });
									
					let marker = L.marker([point[1].lat, point[1].lon], { icon: myIcon })
					marker.bindPopup(point[1].nom + point[1].lien)
					markerClusters.addLayer(marker)
					markers.push(marker);
					

				})
				var group = new L.featureGroup(markers); 
				macarte.fitBounds(group.getBounds().pad(0.5)); 
				macarte.addLayer(markerClusters);
				
			}else
			{
				console.log(xmlhttp.statusText);
			}
		}
			
    }
	
    xmlhttp.open("GET", "https://revedemontagne.fr//google/carte_gene.php?idmass=2&typep=10");
	xmlhttp.send(null);

</script>	
</body>
<footer>
Script de démonstaration pour présenter la fonction "Cluster" <a href="https://www.openstreetmap.fr">d'openstreetmap</a>,<br />
mise à disposition sur le site internet <a href="https://abcduweb.fr">ABCduWeb</a> avec une liste de données disponibles sur le site internet <a href="https://revedemontagne.fr">Rêvedemontagne</a>
</footer>
</html>
				
			

J’espère que ce tutoriel vous sera utile. N’hésitez pas à utiliser les commentaires pour toutes questions ou demande d’informations complémentaires.

Adrien

Je suis passionné par les nouvelles technologies, notamment par tous ce qui a un rapport avec le multimédia et la domotique. Ce milieu demande une constante remise en question de ces connaissance. Il faut être constamment à la recherche des dernières actualités. J'ai donc décidé de mettre en place ce blog pour instaurer un lieu d'échange et de partage d'informations. Dans un premier temps je serais l'unique auteur des billets qui seront proposés. en fonction de l'attrait que prendra le site internet je serais peut être amené à demander de l'aide à d'autres personnes.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

%d blogueurs aiment cette page :