Btukfyl

I want to apply a filter:hue-rotate() on just the image tiles on leaflet, not any child elements of #myMapDiv.

This just seems to affect my markers (the opposite of what I want).

#map {

    filter: hue-rotate(180deg);

}

This is the HTML of the map

<div id="map" class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" style="position: relative; outline: currentcolor none medium;" tabindex="0"><div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(-83px, -23px, 0px);"><div class="leaflet-pane leaflet-tile-pane"><div class="leaflet-layer " style="z-index: 1; opacity: 1;"><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 19; transform: translate3d(564px, 299px, 0px) scale(0.5);"></div><div class="leaflet-tile-container leaflet-zoom-animated" style="z-index: 20; transform: translate3d(376px, 200px, 0px) scale(1);"><img alt="" role="presentation" src="https://stamen-tiles-c.a.ssl.fastly.net/toner-background/11/647/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(167px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-d.a.ssl.fastly.net/toner-background/11/647/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(167px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-b.a.ssl.fastly.net/toner-background/11/646/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-89px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-d.a.ssl.fastly.net/toner-background/11/648/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(423px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-c.a.ssl.fastly.net/toner-background/11/646/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-89px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-a.a.ssl.fastly.net/toner-background/11/648/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(423px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-a.a.ssl.fastly.net/toner-background/11/647/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(167px, 303px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-b.a.ssl.fastly.net/toner-background/11/648/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(423px, 303px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-b.a.ssl.fastly.net/toner-background/11/649/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(679px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-a.a.ssl.fastly.net/toner-background/11/649/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(679px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-d.a.ssl.fastly.net/toner-background/11/646/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-89px, 303px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-c.a.ssl.fastly.net/toner-background/11/649/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(679px, 303px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-b.a.ssl.fastly.net/toner-background/11/645/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-345px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-c.a.ssl.fastly.net/toner-background/11/650/1124.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(935px, 47px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-a.a.ssl.fastly.net/toner-background/11/645/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-345px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-b.a.ssl.fastly.net/toner-background/11/650/1123.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(935px, -209px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-c.a.ssl.fastly.net/toner-background/11/645/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(-345px, 303px, 0px); opacity: 1;"><img alt="" role="presentation" src="https://stamen-tiles-d.a.ssl.fastly.net/toner-background/11/650/1125.png" class="leaflet-tile leaflet-tile-loaded" style="width: 256px; height: 256px; transform: translate3d(935px, 303px, 0px); opacity: 1;"></div></div></div><div class="leaflet-pane leaflet-shadow-pane"></div><div class="leaflet-pane leaflet-overlay-pane"><svg pointer-events="none" class="leaflet-zoom-animated" width="1552" height="690" style="transform: translate3d(-46px, -34px, 0px);" viewBox="-46 -34 1552 690"><g><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#881600" fill-opacity="0.2" fill-rule="evenodd" d="M582,351a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#881600" fill-opacity="0.2" fill-rule="evenodd" d="M590,393a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#1ec0ff" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f8ca00" fill-opacity="0.2" fill-rule="evenodd" d="M576,392a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#1ec0ff" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#e53a40" fill-opacity="0.2" fill-rule="evenodd" d="M654,369a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#1ec0ff" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#881600" fill-opacity="0.2" fill-rule="evenodd" d="M679,410a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#7200da" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#881600" fill-opacity="0.2" fill-rule="evenodd" d="M631,344a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#b2ffff" fill-opacity="0.2" fill-rule="evenodd" d="M626,426a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#b2ffff" fill-opacity="0.2" fill-rule="evenodd" d="M551,439a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="undefined" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="undefined" fill-opacity="0.2" fill-rule="evenodd" d="M0 0"></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f8ca00" fill-opacity="0.2" fill-rule="evenodd" d="M615,351a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f8ca00" fill-opacity="0.2" fill-rule="evenodd" d="M615,351a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f8ca00" fill-opacity="0.2" fill-rule="evenodd" d="M773,430a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path><path class="leaflet-interactive" stroke="#f8ca00" stroke-opacity="1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="#f8ca00" fill-opacity="0.2" fill-rule="evenodd" d="M726,375a20,20 0 1,0 40,0 a20,20 0 1,0 -40,0 "></path></g></svg></div><div class="leaflet-pane leaflet-marker-pane"></div><div class="leaflet-pane leaflet-tooltip-pane"></div><div class="leaflet-pane leaflet-popup-pane"></div><div class="leaflet-proxy leaflet-zoom-animated" style="transform: translate3d(165819px, 287808px, 0px) scale(1024);"></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="http://leafletjs.com" title="A JS library for interactive maps" target="_blank">Leaflet</a> | Map tiles by <a href="http://stamen.com" target="_blank">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0" target="_blank">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a></div></div></div></div>

I'm not familiar with leaflet, but from what you posted it looks like the images are placed in .leaflet-layer. Which means

.leaflet-layer {

  filter: hue-rotate(180deg);

}

... will do.

Demo:

window.onload = function(){

  var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',

  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',

  osm = L.tileLayer(osmUrl, {

    maxZoom: 18,

    attribution: osmAttrib

  });



var map = L.map('map').setView([53.350140, -6.266155], 11).addLayer(osm);



// Script for adding marker on map click

function onMapClick(e) {



  var marker = L.marker(e.latlng, {

      draggable: true,

      title: "Resource location",

      alt: "Resource Location",

      riseOnHover: true

    }).addTo(map)

    .bindPopup(e.latlng.toString()).openPopup();



  // Update marker on changing it's position

  marker.on("dragend", function(ev) {



    var chagedPos = ev.target.getLatLng();

    this.bindPopup(chagedPos.toString()).openPopup();



  });

}



map.on('click', onMapClick);

}

#map {

  height: 100vh;

  width: 100%;

}



body {

  margin: 0;

}



.leaflet-layer {

  filter: hue-rotate(180deg);

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>



<div id="map"></div>

Markers aren't affected (click to add one).