layout, title
| layout |
title |
| tutorial_frame |
SVG Overlay Tutorial |
<script type="module">
import L, {Map, TileLayer, LatLngBounds, SVGOverlay} from 'leaflet';
const map = new Map('map');
const tiles = new TileLayer('
https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '©
OpenStreetMap'
}).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 = '';
const latLngBounds = new LatLngBounds(
32, -130], [13, -100);
map.fitBounds(latLngBounds);
const svgOverlay = new SVGOverlay(svgElement, latLngBounds, {
opacity: 0.7,
interactive: true
}).addTo(map);
globalThis.L = L; // only for debugging in the developer console
globalThis.map = map; // only for debugging in the developer console
</script>
