<div id="map" />
<svg>
  <filter id="filterChain">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blurred" />
    <feBlend in="SourceGraphic" in2="blurred" mode="exclusion" />
    </feColorMatrix>
  </filter>
</svg>
html,
body {
  height: 100%;
  margin: 0;
}

.leaflet-container {
  height: 400px;
  width: 600px;
  max-width: 100%;
  max-height: 100%;
  filter: url(#filterChain);
}
var map = L.map("map").setView([51.505, -0.09], 13);

var tiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
  attribution:
    '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
Run Pen

External CSS

  1. https://unpkg.com/leaflet@1.9.2/dist/leaflet.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.2/leaflet.js