Leaflet est une librairie JavaScript qui fonctionne avec l'API OpenStreetMap.
Lorsque j'ai commencé à chercher des fonds de carte, je me suis rendu compte que ce n'était pas toujours aussi simple. On est dans le monde du libre, mais il y a toujours une licence à respecter. Les fonds fournis par OSM doivent par exemple toujours être attribués sur les cartes en ligne que vous créez.
Le problème qui se pose ici, c'est comment trouver un fond de carte noir et blanc gratuit ?
Le problème des fonds de carte libres de droit
Quand on recherche dans la liste des fonds de carte fournis en exemple, c'est délicat. Il existe Carto.db qui propose le fond Positron en noir et blanc. D'après OpenStreetMap on ne peut l'utiliser gratuitement que pour un usage non commercial. C'est là que ça peut se compliquer. Sur la plupart des projets dans lesquels je m'investis, ce serait possible. Néanmoins, ce n'est pas le cas partout, et 200$ de licence mensuelle, cela peut refroidir. Et puis, quand on lit les 10 pages de CGV de carto, cela finit de démotiver.
C'est pourquoi j'ai dû trouver des solutions alternatives :
Comment utiliser un fond de carte noir et blanc gratuitement ?
On va utiliser un fond de carte classique : OSM ou OSMFrance, libre de droits (il faut juste attribuer un lien), cf mention legales de OSMFrance.
Il suffit en effet de rajouter la classe .leaflet-tile-pane dans votre fichier css, et d'ajouter la propriété filter. C'est une propriété expérimentale qui ne fonctionne pas sur tous les navigateurs, il faudra donc la doubler : -webkit-filter et filter. Cette propriété permet d'ajouter des filtres pour modifier le rendu d'images. Ici les "tiles", les différentes plaques du fond de carte.
Cela donnera par exemple :
.leaflet-tile-pane {
-webkit-filter: opacity(80%) grayscale(100%));
filter: opacity(80%) grayscale(100%);
}