"/>

Créer une carte Leaflet

Comment créer une carte Leaflet ?

Dans ce tuto, on va voir comment rapidement créer une carte à l’aide de Leaflet et de donnes GeoJSON.

Vous pourrez retrouver un autre exemple plus complexe, avec l’utilisation des plugin markerCluster.js et awesomeMarker.js ici.

Préparation des données GeoJSON

Les données GeoJson sont un format de donnée conçu pour représenter des entités géographiques simples , basé sur la notation d’objet JavaScript (JSON).  La syntaxe est simple à comprendre, on peut d’ailleurs se baser sur l’exemple fourni sur Wikipedia.

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [102.0, 0.5]
      },
      "properties": {
        "prop0": "value0"
      }
    }
}

Il peut contenir différents « types », mais le plus courant sont les collections de données ou listes d’entités, les « FeatureCollection« . A l’intérieur de celles-ci, on retrouve des « properties« , à l’intérieur desquelles on peut mettre tout ce qu’on veut, et enfin des types de géométrie suivants: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon et GeometryCollection

Un fichier GeoJSON à part ou à l’intérieur du fichier js

La syntaxe est un peu différente si l’on utilise des données GeoJSON dans un fichier à part ou si on intègre directement toutes ces données dans un fichier js;

Dans un fichier GeoJSON

Dans un fichier GeoJSON à part, on ouvre l’accolade directement et on insère toutes ses données. Voici un exemple :

{


        "type": "FeatureCollection",
        "features": [

            {
                "type": "Feature",
                "properties": {
                    "Examen": "CCL 18",
                    "Prelevement": "2 tubes EDTA 4,5 ml (bouchon violet)",
                    "Laboratoire": "Service d'Hématologie Biologique / Secteur de cultures",
                    "Chu": "CHU Estaing",
                    "Adresse": "1 place Raymond et Lucie Aubrac",
                    "Cp": "63003 Clermont Ferrand Cedex 1",
                    "Professeur": "Pr Berger Marc",
                    "Tel": "Tel : 04 73 75 03 68",
                    "Fax": "Fax : 04 73 75 06 83",
                    "Mail": "mberger@chu-clermontferrand.fr",
                    "Url": "http://www.cetl.net",
					"Mode": "Tube",
					"CssName":"ccl18",
					"AutresExamens": "Autres examens pratiqués dans cet hôpital",
					"Gaucher5":"Glucocérébrosidase"
                },
                "geometry": {
                    "type": "Point",
                    "coordinates": [3.108547, 45.7848475]
                }
            },
//ici je mets autant de features que souhaité, et on referme le crochet et l'acolade
			    ]
    }

Vous voyez ici qu’on peut vraiment mettre ce qu’on veut comme: l’adresse, le code postal, la ville le nom etc.. le tout est de respecter la syntaxe : « clé » : « valeur ». Vous pouvez facilement vérifier la validité de votre fichier en allant sur cette adresse.

Ensuite à l’intérieur de son fichier, on peut l’appeler de la manière suivante :

var promise = $.getJSON("examen.json");
promise.then(function(data) {

});

Vous pouvez construire tout un fichier GeoJSON à partir de cet outil en ligne. Cliquez sur la carte pour créer vos marqueurs et il va vous créer automatiquement les « features » au format GeoJSON.

Dans un fichier js

Si on veut tout avoir à dispo dans son fichier js, c’est à peu près la même chose, sauf qu’on va tout insérer dans une variable :

var site =[
{
    "type": "FeatureCollection",
    "features": [
		{
            "type": "Feature",
            "properties": {
                "Ville": "Algérie",
                "Url": "https://www.sanofi.dz/",
            },
            "geometry": {
                "type": "Point",
                 "coordinates": [1.659626,28.033886]
            }
        },
		//Ici la suite de tous vos feature
	]	
}

On peut même prendre une syntaxe plus simple tirée de la doc du site officiel.

var geojsonFeature = {
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "amenity": "Baseball Stadium",
        "popupContent": "This is where the Rockies play!"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [-104.99404, 39.75621]
    }
};

Notre exemple de carte personnalisée

On va donc partir d’un exemple simple, comprenant une ville et un url dans les properties, des « points » et leurs « coordonnées » dans les données geometry. L’exemple de la doc est assez clair, je le remets ici :

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

L.geoJSON(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
}).addTo(map);

A partir de là, on va construire notre carte. Voici tout le code js de ma carte. Tout est commenté à l’intérieur.

var cartoDb = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
            attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
            subdomains: 'abcd',
            maxZoom: 3,
			minZomm:3
        });
   
        var map = L.map('map') //création de la carte
            .addLayer(cartoDb)
            .setView([46.85, 2.3518], 6); // LIGNE 14
		var geojsonMarkerOptions = { //définition des marqueurs "cercle"
			radius: 8,
			fillColor: "#525ca3",
			color: "#fff",
			weight: 1,
			opacity: 1,
			fillOpacity: 0.8,
			iconSize: 0,
		
		};

		L.geoJSON(site, { // appel de nos données GeoJSON
			pointToLayer: function (feature, latlng) { //création du maruqueur
				var marker = L.circleMarker(latlng, geojsonMarkerOptions);
				return marker;
			},
			onEachFeature: onEachFeature // ici, l'appel de notre fonction onEachFeature
			
		}).addTo(map); // on ajoute le tout à la carte
        
       function onEachFeature(feature, layer) {
				
				if (feature.properties && feature.properties.Url) { // ici je crée une fonction pour rendre les maruqueur directement cliquables plutot que d'ouvrir une popup
					layer.on('click',function(){
						var url= feature.properties.Url; // feature.properties.Url va chercher l'url dans mes features
						window.open(url, '_blank'); // le window.location = feature.properties.Url ouvrirait l'url dans la même fenêtre. ici j'utilise donc window.open pour l'ouvrir dans une nouvelle fenêtre
					})
				}
				if( feature.properties && feature.properties.Ville){ //enfin, ici ma fonction pour montrer le nom de la ville dans une popup qui s'ouvre au hover
					layer.bindPopup(feature.properties.Ville);
					layer.on('mouseover', function (e) {
						this.openPopup();
					});
					layer.on('mouseout', function (e) {
						this.closePopup();
					});
				}
			}
});

C’est donc un exemple simple, largement inspiré de la doc officielle. Le style des popup est modifié avec le css suivant :

 .leaflet-popup-content-wrapper,.leaflet-popup-content
 {
   -webkit-border-radius: 0 !important;
   -moz-border-radius: 0 !important;
    border-radius: 0 !important;
 }
 .leaflet-popup-close-button {
   display: none; 
}
.leaflet-popup {left: -100px !important;border:2px solid #525ca3}
/* I moved the "tip" to the right location, but don't succeed in making it visible. */
.leaflet-popup-tip-container {
      top: 0px !important;
      overflow: auto important!;
 }
.leaflet-popup-tip {
      box-shadow: none !important;
      background-clip: none !important;
 }
.leaflet-popup:before {
	content: "";
	position: absolute;
	border: 13px solid transparent;
	border-right-color: white;
	right: 0px;
	bottom:0px;

}

Le rendu final

Et voici le rendu de ma carte sur CodePen. Ouvrez l’éditeur en grand pour voir le rendu.

See the Pen
Simple Leaflet GeoJSON map( circle_marker & _blank url on click)
by blogob (@yuyazz)
on CodePen.

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.