mirror of
https://github.com/Leaflet/Leaflet.git
synced 2025-08-03 15:40:43 +00:00
26 lines
904 B
Markdown
26 lines
904 B
Markdown
---
|
|
layout: tutorial_frame
|
|
title: SVG Overlay Tutorial
|
|
---
|
|
<script>
|
|
const map = L.map('map');
|
|
|
|
const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <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 = L.latLngBounds([[32, -130], [13, -100]]);
|
|
|
|
map.fitBounds(latLngBounds);
|
|
|
|
const svgOverlay = L.svgOverlay(svgElement, latLngBounds, {
|
|
opacity: 0.7,
|
|
interactive: true
|
|
}).addTo(map);
|
|
</script>
|