SVG Overlay Tutorial

<script type="module"> import {LeafletMap, TileLayer, LatLngBounds, SVGOverlay} from 'leaflet'; const map = new LeafletMap('map'); const tiles = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map); const svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); svgElement.setAttribute('viewBox', '0 0 200 200'); svgElement.innerHTML = '<rect width="200" height="200"/><rect x="75" y="23" width="50" height="50" style="fill:red"/><rect x="75" y="123" width="50" height="50" style="fill:#0013ff"/>'; const latLngBounds = new LatLngBounds([[32, -130], [13, -100]]); map.fitBounds(latLngBounds); const svgOverlay = new SVGOverlay(svgElement, latLngBounds, { opacity: 0.7, interactive: true }).addTo(map); </script>