mirror of
https://github.com/Leaflet/Leaflet.git
synced 2025-08-03 15:40:43 +00:00
28 lines
936 B
Markdown
28 lines
936 B
Markdown
---
|
|
layout: tutorial_frame
|
|
title: Image Overlay Tutorial
|
|
---
|
|
<script>
|
|
const map = L.map('map').setView([37.8, -96], 4);
|
|
|
|
const osm = 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 imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
|
|
const errorOverlayUrl = 'https://cdn-icons-png.flaticon.com/512/110/110686.png';
|
|
const altText = 'Image of Newark, N.J. in 1922. Source: The University of Texas at Austin, UT Libraries Map Collection.';
|
|
const latLngBounds = L.latLngBounds([[40.799311, -74.118464], [40.68202047785919, -74.33]]);
|
|
|
|
const imageOverlay = L.imageOverlay(imageUrl, latLngBounds, {
|
|
opacity: 0.8,
|
|
errorOverlayUrl,
|
|
alt: altText,
|
|
interactive: true
|
|
}).addTo(map);
|
|
|
|
L.rectangle(latLngBounds).addTo(map);
|
|
map.fitBounds(latLngBounds);
|
|
</script>
|