layout, title
layout |
title |
tutorial_frame |
SVG Overlay Tutorial |
<script>
const map = L.map('map');
const tiles = L.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 = L.latLngBounds(
32, -130], [13, -100);
map.fitBounds(latLngBounds);
const svgOverlay = L.svgOverlay(svgElement, latLngBounds, {
opacity: 0.7,
interactive: true
}).addTo(map);
</script>