Leaflet, ou comment styler ses tuiles

Bonjour,

Le monde du libre, c'est génial... mais pas toujours. Pour ce qui est des cartes web en alternative à Google Map on a la chance d'avoir plusieurs services de tuiles, mais qui ne sont pas si nombreux au final, dont les conditions peuvent changer (comme avec MapBox récemment) ou même disparaître.

J'évite donc de sortir trop des sentiers battuts pour me concentrer sur des services qui me paraissent fiables dans le temps, comme les tuiles directement fournies par OpenStreetMap (OSM pour les intimes) ou celles de l'IGN, quitte à les styliser après coup avec des filtres CSS : en version de gris, dark ou encore sepia, comme ici.

Tout en bas de la page vous pouvez voir des cartes "vintages", les deux dernières cartes de la page, avec la classe ".map-vintage". Pour obtenir ce style je suis passé par des pseudo-éléments afin d'appliquer des filtres, en plus d'un filtre directement sur les tuiles...

Et maintenant mon problème : comment pourrais-je faire pour passer les marqeur au dessus de ces filtres ? J'ai déjà tenté d'insérer en JavaScript une div entre mes marqeurs et mes tuiles, ça fonctionnait... sauf que cette div suivait le déplacement des tuiles, le filtre ne s'appliquant que sur la largeur de la carte d'origine...

Si vous avez une idée à côté de laquelle je serais passé je suis preneur.

Et accessoirement : bonne année à tous !

\ô/
as tu essayé de mettre ton

filter:sepia(1)

uniquement sur la couche des tiles soit l'élément :

<div class="leaflet-pane leaflet-tile-pane">

Oui, j'avais même été encore plus précis : j'ai apposé mon filtre sepia() sur l'élément enfant ".leaflet-layer", mais pour une raison que je ne comprend pas les tuiles perdaient beaucoup de détails. J'ai alors tenté des choses du genre ".leaflet-layer > *", mais idem...

Voici une page de test, pour ceux qui voudront intervenir ce sera plus simple : CodePen
Modifié par Olivier C (04 Jan 2023 - 21:58)

Au final, avec un peu de compromis, ça pourrait le faire avec ceci :

.map-vintage {
  position: relative;
}
.map-vintage .leaflet-layer {
  filter: sepia(0.5);
}
.map-vintage::before,
.map-vintage::after {
  content: '';
  position: absolute;
  z-index: 500;
  inset: 0;
  pointer-events: none;
}
.map-vintage::before {
  background-image: radial-gradient(rgba(0,0,0,0), #ae8964);
}
.map-vintage::after {
  filter: url("#noise") sepia(1) opacity(0.4);
}

Un compromis hein, je ne suis pas totalement satisfait...
Modifié par Olivier C (04 Jan 2023 - 22:34)