Leaflet : Identifier et personnaliser un marker avec GeoJson

Je n’ai pas prit le plus facile, comme d’habitude. Sur Leaflet (bibliothèque Javascript pour manipuler un carte Open Street Map), nous pouvons ajouter des marqueurs de la même manière que Google Map, la particularité de Leaflet, c’est que nous pouvons aussi intégrer directement à partir d’un flux JSON (GeoJson).

J’ai décidé d’utiliser cette méthode. Seulement voilà, si on veut personnaliser les marqueurs, ça se complique un peu.

Initialisation

var map = L.map( "ma_carte" );

/**
* Mon flux json
*/
var json = {"type":"FeatureCollection","features":[{"type":"Feature","id":349326,"geometry":{"type":"Point","coordinates":[-1.6129303,47.2062751]},"properties":{"name":"Chez toi","description":"Voici le description de chez toi","bindPopup_content":"<strong>Chez toi<\/strong><br>\r\n<p>Voici le description de chez toi"},"title":"Chez toi"},{"type":"Feature","id":349322,"geometry":{"type":"Point","coordinates":[-0.4665756,46.3334174]},"properties":{"name":"Chez moi","description":"Voici le description de chez moi","bindPopup_content":"<strong>Chez moi<\/strong><br>\r\n<p>Voici le description de chez moi<br>"},"title":"Chez moi"}]};
;

/**
* Mon nombre de points / marqueurs
*/
var nbFeature = Object.keys(json.features).length;

/**
* On créer la carte à partir du serveur de tuile d'OSM
*/
L.tileLayer( '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
	minZoom: 1,
	maxZoom: 21,
}).addTo(map);

Vous noterez que nous avons ajouter au format geojson classique d’autre élément dans les propriété mais aussi un id, reprédentant l’ID du post dans WordPress.

Traitement du flux GeoJson

Ensuite nous allons ajouter le flux json simplement avec la fonction L.geojson().

var geojsonLayer = L.geoJson(json, {});

Jusqu’ici, tout vas, bien et nous pouvons afficher notre carte.

Problème d’identification

Mais nous voulons pouvoir identifier chaque marqueur de la carte.

Il y a plusieurs solutions, elles sont notamment expliqué sur ce forum : https://stackoverflow.com/questions/25683871/assign-id-to-marker-in-leaflet#answer-31032786

Nous allons implémenter la solution 1 et 4.

Solution 1 : Renseigner un tableau avec l’ensembles des objets marqueurs au moment ou l’on donne les marqueurs à la carte.

Solution 2 : Identifier les élément HTML correspondant.

Les options de l’objet GeoJson

Nous allons utiliser l’options pointToLayer de l’objet GeoJson (ligne 7) afin de filter le traitement de la création du marqueur.

Par défaut, voici le comportement :

function(geoJsonPoint, latlng) {
    return L.marker(latlng);
}

Nous créons un objet Icon par défaut avec la classe L.Icon.Default (ligne 12) auquel nous lui ajoutons nom unique avec l’id.

var geojsonLayer = L.geoJson(json, {

/**
 * `feature` étant un élément du flux json représentant un marqueur.
 * `latlng` l'objet coordonnées du point/marqueur
 */
	pointToLayer: function(feature, latlng){
		/**
		 * Création d'un icône à partir du modèle par défaut.
		 * Et nous ajouter une class css suivi du l'ID du post mémorisé dans le flux. C'est pour palier à l'impossibilité de mettre un id à l'élement.
		 */
		di = new L.Icon.Default();
		di.options.className = "marker-"+feature.id;
		
		/**
		 * Add the marker in a list before to add to map
		 */
		return cpt_map_store_settings.markers[feature.id] = L.marker(latlng, {
			id: feature.id,
			icon: di
		});
	},

	onEachFeature: function (feature, layer) {
		var popup;
		popup = '<strong>' + feature.properties.name + '</strong><br>' + feature.properties.description;
		layer.bindPopup( popup );
	}

}).addTo(map);

Ensuite nous utilisons l’option onEachFeaturede l’objet GeoJson (ligne 24) pour traiter la représentaiton du markeur et notemment la popin qui s’affiche quand on clique dessus. Nous ajoutons des informations stockées dans feature.properties pour créer un bulle sur mesure avec les données du point.