Chișinău - 1919

Fragment din harta 1:25 000 anul ridicării 1919

by cleaver

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet-distortableimage@latest/dist/leaflet.distortableimage.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet-distortableimage@latest/dist/leaflet.distortableimage.css">

    <div id="map"></div>

    <div id="opacity-slider">
        <label>Overlay opacity</label>
        <input id="range" type="range" min="0" max="1" step="0.01" value="0.8" />
    </div>

CSS

* { margin: 0; padding: 0; }
        html, body { height: 100%; }
        body { font: normal 12px/1.2 Arial, sans-serif; }

        #opacity-slider {
            position: fixed;
            top: 10px;
            right: 10px;
            padding: 10px 10px 5px;
            background-color: rgba(255,255,255,.5);
            z-index: 999;
            border-radius: 5px;
        }
        #opacity-slider label {
            display: block;
            font-size: 13px;
            margin-bottom: 3px;
        }
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
        #map .leaflet-overlay-pane {
            -webkit-transition: opacity .2s ease-in-out;
            -moz-transition: opacity .2s ease-in-out;
            -o-transition: opacity .2s ease-in-out;
            transition: opacity .2s ease-in-out;
        }

JavaScript

var imageUrl = 'https://scontent.fvlc7-1.fna.fbcdn.net/v/t39.30808-6/659687588_1260071402902318_8057903016999413914_n.jpg?_nc_cat=106&ccb=1-7&_nc_sid=7b2446&_nc_ohc=i_Wv0FQkU4QQ7kNvwH6-ROX&_nc_oc=Adp2eMzPsfP1_5U7JKwKm5Bg-YFmmX5afbJceTrJ5sVojqoJKZboTmzJqMKl_2a4khqaD7p-aBEjjQWJt9uK5Pu1&_nc_zt=23&_nc_ht=scontent.fvlc7-1.fna&_nc_gid=YapeW4w4Inf-ix5A1gayeg&_nc_ss=7a3a8&oh=00_Af09QHhlKEvwDrqFKfVUkFAqKKxzhUT5EBYm6krFOjcW3Q&oe=69D5932A';

        var imageBounds = L.latLngBounds([
            [47.054374, 28.794538],
            [46.985173, 28.917405]
        ]);

        var map = L.map('map');

        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
            attribution: '&copy; Esri'
        }).addTo(map);

        map.fitBounds(imageBounds);

        var overlay = L.imageOverlay(imageUrl, imageBounds).addTo(map);

        document.getElementById('range').onchange = function() {
            document.getElementsByClassName('leaflet-overlay-pane')[0].style.opacity = this.value;
        };

        var isDragging = false;
        var startPoint = null;
        var startBounds = null;

        // capture=true means we get the event BEFORE leaflet does
        document.getElementById('map').addEventListener('mousedown', function(e) {
            var img = overlay.getElement();
            if (!img) return;

            var rect = img.getBoundingClientRect();
            var x = e.clientX;
            var y = e.clientY;

            // check if click is within the image bounds on screen
            if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) return;

            isDragging = true;
            startPoint = map.mouseEventToLatLng(e);
            startBounds = overlay.getBounds();

            map.dragging.disable();
            e.stopPropagation();
            e.preventDefault();

        }, true); // <-- true = capture phase, fires before...