Carte interactive des rues sans mégots avec Leaflet

Publié le par

Cette carte interactive des rues sans mégots de Paris a été réalisée suite à la suite de la consultation de la page d’actualités de la ville de Paris concernant cette action de propreté, qui ne contenait qu’une image pour présenter la cartographie des différentes rues concernées par cette opération.

Sources des données

La liste des rues ou sections de rues proviennent de la page d’actualités.

Le tracé des rues provient de Paris Data, le site d’open data de la Ville de Paris.

Je suis parti des données en CSV, pour en extraire plus facilement les rues participantes. Pour les rues concernées seulement en partie j’ai ensuite supprimé manuellement les sections inutiles, en passant par geojson.io pour m’assurer que je ne supprimais pas des parties couvertes par l’opération.

Chaque feature de rue a au moins une propriété « name ». Pour les rues ne participant que sur une section je rajoute une propriété « between » pour indiquer cette section.

Ces données ont ensuite été rassemblées dans une FeatureCollection de LineStrings dans un fichier GeoJSON.

Code de la carte

Pour cette carte, j’ai utilisé le fond de carte World Light Gray Base disponible sur ArcGIS Online, via le plugin Esri Leaflet.

L’initialisation de la carte se fait à la même position et au même niveau de zoom que précédemment.

var center = [48.8502, 2.3488];
var zoom = 12;

var map = L.map('map',{
	center: center,
	zoom: zoom
});

L.esri.basemapLayer('Gray').addTo(map);

Cette carte contient également un encart.

var info = L.control();

info.onAdd = function (map) {
	this._div = L.DomUtil.create('div', 'info');
	this.update();
	return this._div;
};

info.update = function (props) {
	if(props) {
	  var infoTxt = '<p>' + props.name;
	    if(props.between) infoTxt += ', ' + props.between; // si on est sur une section de rue
	    infoTxt += '</p>';
	    this._div.innerHTML = infoTxt;
	} else {
		this._div.innerHTML = '<p>Survoler un élément</p>';
	}
};

info.addTo(map);

Cette fois-ci, les données seront chargées directement depuis un fichier GeoJSON et non plus depuis un objet GeoJSON dans un fichier JavaScript. Ce chargement se fait en utilisant le plugin Leaflet AJAX.

var rues = new L.GeoJSON.AJAX('/assets/files/js/rues_sans_megots.geojson',{
	onEachFeature: onEachStreet,
	style: function(feature) {
		return {color: '#f7364b'};
	}
}).addTo(map);

La fonction appelée par « onEachFeature » attache à nos tracés 3 événements : « mouseover », « mouseout » et « click ».

function onEachStreet(feature, layer) {
	layer.on({
		mouseover: updateInfo,
		mouseout: resetInfo,
		click: zoomToStreet
	});
}

Les deux premiers événements se comportent de la même manière : ils permettent la mise à jour de l’encart et le surlignage de la feature survolée.

function updateInfo(e) {
	var layer = e.target;
	layer.setStyle({weight: 5});
	info.update(layer.feature.properties);
}

function resetInfo(e) {
	rues.resetStyle(e.target);
	info.update();
}

Le dernier événement permet de zoomer sur la rue cliquée.

function zoomToStreet(e) {
	map.fitBounds(e.target.getBounds());
}

Et voilà ! Notre carte est prête.

Le plus long dans cette histoire a été d’isoler les tracés des rues et sections de rues participant à l’opération.

Alors Paris.fr, pourquoi n’avoir pas pris le temps de le faire ?

8 réflexions sur « Carte interactive des rues sans mégots avec Leaflet »

  1. Bonjour,

    Je travaille actuellement sur une carte interactive basée sur du Leaflet. Cependant, je n’arrive pas à afficher mon fichier GeoJSON.
    Je m’explique. J’ai renseigné dans mon , mes scripts leaflet.js et leaflet.ajax.min.js (provenant de https://github.com/calvinmetcalf/leaflet-ajax). Mon fichier geojson commence bien par {« type »: « FeatureCollection », blabla }. Enfin, j’appelle mon fichier de la manière suivante : var geojsonLayer = new L.GeoJSON.AJAX(‘mon_fichier.geojson’).addTo(mymap);
    Mais ma couche de points ne s’affiche pas… Je ne comprends vraiment pas pourquoi.
    Est-ce qu’il y aurait une instruction que j’aurais raté ? Est-ce qu’il faut forcément préciser le style de la couche ?

    Pour info, je teste mon html sur Firefox. De plus, j’ai réussi à afficher mes données en modifiant mon fichier geojson, en intégrant var macouche = devant {« type »: blabla}. Puis en l’enregistrant en .js. Et en l’appelant avec L.geoJSON. Sauf que pour la carte que je souhaite faire, les données seront mises à jour chaque jour et je ne peux pas tous les matins, modifier manuellement mon fichier GeoJSON. C’est pourquoi j’ai vraiment besoin de comprendre le fonctionnement de ce plugin leaflet-ajax !

    Je vous remercie par avance pour votre aide

    Répondre ↓

    • Bonjour,

      Vous devez préciser une fonction de style seulement si vous ne voulez pas utiliser le style par défaut de Leaflet.

      Sinon, votre façon d’appeler le fichier GeoJSON me parait correcte.

      Je viens juste de tester ma solution sur Firefox, et je n’ai aucun problème.

      Votre fichier GeoJSON est-il vraiment bien formaté ? Aucun « ; » en fin du fichier ?

      Je pense savoir d’où viens votre problème. Testez-vous votre fichier sans serveur local (WAMP ou autre) ? Si la réponse est oui, le problème viens de là, car si le fichier que vous cherchez à charger en AJAX n’est pas sur un serveur, pour des raisons de sécurité son chargement n’est pas possible.

      Répondre ↓

      • Bonjour,
        Merci pour votre réponse rapide !
        Effectivement je crois que vous avez résolu mon problème ! :)
        Mes données sont sur un serveur physique et quand je teste mon fichier, je ne suis pas connectée sur ce serveur (et apparemment je ne possède pas de serveur local…). Je viens de faire un test en me connectant à distance sur le serveur en question et mon code fonctionne.
        Merci beaucoup !
        J’en profite pour vous dire que vos cartes et vos explications sont précieuses. Je n’ai pas fini de m’en inspirer ! ;)

        Répondre ↓

          • Bon en fait, il semblerait que je me suis un peu emballée… :( Ca ne fonctionne pas, même quand je me connecte directement sur mon serveur à distance. (J’ai dû faire mon test trop rapidement… Zut, zut, zut)
            Du coup, vous pensez qu’il faudrait que j’installe un serveur local ? Vous me parlez de WAMP, il conviendrait à ce que je veux faire ? (je ne connais pas du tout…). Ce qui voudrait dire qu’il faudrait que tous mes documents relatifs à ma carto (leaflet.js, mon_fichier.html, mon_fichier.geojson,…) se trouvent sur ce serveur ?
            Merci pour votre aide !

          • Si vous ne placez que le fichier GeoJSON sur un serveur distant (ou local), alors dans votre code JS il faudra utiliser l’adresse absolue (avec ‘http://’ au début).
            Par contre, si vous placez tous vos fichier sur votre serveur (distant ou local), vous pourrez utiliser une adresse relative.

    • Si vous n’êtes pas familière avec le JavaScript, il est normal que vous ne soyez pas au courant de cette spécificité.

      Pour des questions de sécurité, un script JS ne peut pas accéder en AJAX à des fichiers présents sur la machine de l’utilisateur.

      Répondre ↓

Laisser un commentaire