layout, title
| layout |
title |
| tutorial_frame |
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: '©
OpenStreetMap'
}).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>
