Spaces:

zh4rif
/

forestweb

Running

App Files Files Community

zh4rif commited on Jul 15, 2025

Commit

a65f40f

verified ·

1 Parent(s): d2a7bbf

Upload 2 files

Browse files

Files changed (2) hide show

split_panel_map.html +566 -0
style2.css +306 -0

split_panel_map.html ADDED Viewed

	@@ -0,0 +1,566 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MSPO Deforestation</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
+    <link rel="stylesheet" href="style2.css">
+    <style>
+    </style>
+</head>
+<body>
+    <div class="header">
+         <div class="logo"></div>
+        <img src="https://images.squarespace-cdn.com/content/v1/604db3a6dad32a12b2415387/1636475927545-PK57PVLIB7AEKX1AJQJ8/Logo_MSPO_2020.png" alt="MSPO Logo" style="height: 60px;">
+        <div class="logo" "textalign=left">MSPO Deforestation Mapping</div>
+         <div class="logo"></div>
+        <div class="controls">
+            <div class="control-group">
+                <label>Search Location</label>
+                <input type="text" class="search-box" id="searchBox" placeholder="Enter city or address...">
+            </div>
+            <div class="control-group">
+                <label>Left Panel</label>
+                <select class="layer-select" id="leftLayer">
+                    <option value="osm">OpenStreetMap</option>
+                    <option value="satellite">Satellite</option>
+                    <option value="terrain">Terrain</option>
+                    <option value="sentinel2">Sentinel-2</option>
+                    <option value="satelogic">satelogic</option>
+                </select>
+            </div>
+            <div class="control-group">
+                <label>Right Panel</label>
+                <select class="layer-select" id="rightLayer">
+                    <option value="satellite" selected>Satellite</option>
+                    <option value="osm">OpenStreetMap</option>
+                    <option value="terrain">Terrain</option>
+                    <option value="sentinel2">SENTINEL-2</option>
+                    <option value="satelogic">Satelogic</option>
+                </select>
+            </div>
+            <input type="file" class="file-input" id="importFile" accept=".geojson,.json,.kml,.gpx" style="display: none;">
+            <button class="search-btn" id="searchBtn">Search</button>
+        </div>
+    </div>
+    <div class="map-container">
+        <div class="map-panel left-panel" id="leftPanel">
+            <div class="panel-label">OpenStreetMap</div>
+            <div class="map" id="leftMap"></div>
+            <div class="coordinates" id="leftCoords">Lat: 0.0000, Lng: 0.0000</div>
+        </div>
+        <div class="map-panel right-panel" id="rightPanel">
+            <div class="panel-label">Satellite</div>
+            <div class="map" id="rightMap"></div>
+            <div class="coordinates" id="rightCoords">Lat: 0.0000, Lng: 0.0000</div>
+        </div>
+        <div class="slider-container" id="sliderContainer">
+            <div class="slider-handle" id="sliderHandle"></div>
+        </div>
+        <button class="sync-toggle active" id="syncToggle" title="Toggle map synchronization">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
+            </svg>
+        </button>
+    </div>
+    <div class="loading-indicator" id="loadingIndicator">
+        <div>Loading...</div>
+    </div>
+    <div class="error-message" id="errorMessage">
+        <div id="errorText"></div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
+    <script>
+        // Configuration
+        const DEFAULT_LOCATION = [40.7128, -74.0060]; // New York City
+        const DEFAULT_ZOOM = 10;
+        const SEARCH_ZOOM = 12;
+        const MIN_SLIDER_POSITION = 15; // 15% from left
+        const MAX_SLIDER_POSITION = 85; // 85% from left
+        // Map layer definitions
+        const tileLayers = {
+            osm: {
+                url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                attribution: '© OpenStreetMap contributors',
+                name: 'OpenStreetMap'
+            },
+            satellite: {
+                url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+                attribution: 'Tiles © Esri',
+                name: 'Satellite'
+            },
+            terrain: {
+                url: 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',
+                attribution: '© OpenTopoMap contributors',
+                name: 'Terrain'
+            },
+            sentinel2: {
+                url: 'https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/g/{z}/{y}/{x}.jpg',
+                attribution: '© SENTINEL-2 Cloudless 2020, EOX IT Services GmbH',
+                name: 'sentinel2 Mode'
+            },
+             satelogic: {
+                url: 'http://localhost:8080/data/forest/{z}/{x}/{y}.png',
+                attribution: '© Satelogic',
+                name: 'satelogic Mode'
+            }
+        };
+        // Global variables
+        let leftMap, rightMap;
+        let leftLayer, rightLayer;
+        let isSynced = true;
+        let mapSyncLock = false;
+        let isSliderActive = false;
+        let searchMarkers = [];
+        // UI elements
+        const elements = {
+            leftPanel: document.getElementById('leftPanel'),
+            rightPanel: document.getElementById('rightPanel'),
+            sliderContainer: document.getElementById('sliderContainer'),
+            sliderHandle: document.getElementById('sliderHandle'),
+            mapContainer: document.querySelector('.map-container'),
+            searchBox: document.getElementById('searchBox'),
+            searchBtn: document.getElementById('searchBtn'),
+            leftLayer: document.getElementById('leftLayer'),
+            rightLayer: document.getElementById('rightLayer'),
+            syncToggle: document.getElementById('syncToggle'),
+            leftCoords: document.getElementById('leftCoords'),
+            rightCoords: document.getElementById('rightCoords'),
+            loadingIndicator: document.getElementById('loadingIndicator'),
+            errorMessage: document.getElementById('errorMessage'),
+            errorText: document.getElementById('errorText')
+        };
+        // Utility functions
+        function showError(message) {
+            elements.errorText.textContent = message;
+            elements.errorMessage.style.display = 'block';
+            setTimeout(() => {
+                elements.errorMessage.style.display = 'none';
+            }, 5000);
+        }
+        function showLoading() {
+            elements.loadingIndicator.style.display = 'block';
+        }
+        function hideLoading() {
+            elements.loadingIndicator.style.display = 'none';
+        }
+        function updatePanelLabels() {
+            const leftLabel = document.querySelector('.left-panel .panel-label');
+            const rightLabel = document.querySelector('.right-panel .panel-label');
+            if (leftLabel) {
+                leftLabel.textContent = tileLayers[elements.leftLayer.value].name;
+            }
+            if (rightLabel) {
+                rightLabel.textContent = tileLayers[elements.rightLayer.value].name;
+            }
+        }
+        // Map initialization
+        function initializeMaps() {
+            try {
+                // Initialize left map
+                leftMap = L.map('leftMap', {
+                    zoomControl: false,
+                    attributionControl: true
+                }).setView(DEFAULT_LOCATION, DEFAULT_ZOOM);
+                // Initialize right map
+                rightMap = L.map('rightMap', {
+                    zoomControl: false,
+                    attributionControl: true
+                }).setView(DEFAULT_LOCATION, DEFAULT_ZOOM);
+                // Add zoom controls
+                L.control.zoom({
+                    position: 'topright'
+                }).addTo(leftMap);
+                L.control.zoom({
+                    position: 'topright'
+                }).addTo(rightMap);
+                // Add initial tile layers
+                leftLayer = L.tileLayer(tileLayers.osm.url, {
+                    attribution: tileLayers.osm.attribution,
+                    maxZoom: 18
+                }).addTo(leftMap);
+                rightLayer = L.tileLayer(tileLayers.satellite.url, {
+                    attribution: tileLayers.satellite.attribution,
+                    maxZoom: 18
+                }).addTo(rightMap);
+                // Set up map event listeners
+                setupMapEvents();
+                // Initial coordinate update
+                updateCoordinates(leftMap, elements.leftCoords);
+                updateCoordinates(rightMap, elements.rightCoords);
+                console.log('Maps initialized successfully');
+            } catch (error) {
+                console.error('Error initializing maps:', error);
+                showError('Failed to initialize maps. Please refresh the page.');
+            }
+        }
+        // Map event setup
+        function setupMapEvents() {
+            leftMap.on('moveend', () => {
+                updateCoordinates(leftMap, elements.leftCoords);
+                if (isSynced && !mapSyncLock && !isSliderActive) {
+                    syncMaps(leftMap, rightMap);
+                }
+            });
+            rightMap.on('moveend', () => {
+                updateCoordinates(rightMap, elements.rightCoords);
+                if (isSynced && !mapSyncLock && !isSliderActive) {
+                    syncMaps(rightMap, leftMap);
+                }
+            });
+            // Handle map loading errors
+            leftMap.on('tileerror', (e) => {
+                console.warn('Left map tile error:', e);
+            });
+            rightMap.on('tileerror', (e) => {
+                console.warn('Right map tile error:', e);
+            });
+        }
+        // Coordinates update
+        function updateCoordinates(map, coordsElement) {
+            if (!map || !coordsElement) return;
+            const center = map.getCenter();
+            const zoom = map.getZoom();
+            coordsElement.textContent = `Lat: ${center.lat.toFixed(4)}, Lng: ${center.lng.toFixed(4)}, Zoom: ${zoom}`;
+        }
+        // Map synchronization
+        function syncMaps(sourceMap, targetMap) {
+            if (!isSynced || !sourceMap || !targetMap || mapSyncLock) return;
+            mapSyncLock = true;
+            try {
+                const center = sourceMap.getCenter();
+                const zoom = sourceMap.getZoom();
+                targetMap.setView(center, zoom);
+            } catch (error) {
+                console.error('Error syncing maps:', error);
+            }
+            // Release lock after a short delay
+            setTimeout(() => {
+                mapSyncLock = false;
+            }, 100);
+        }
+        // Slider functionality - Now with overlapping panels
+        let isSliderDragging = false;
+        let startMouseX = 0;
+        let startSliderPosition = 50;
+        function updateSliderPosition(positionPercentage) {
+            // Clamp between MIN_SLIDER_POSITION and MAX_SLIDER_POSITION
+            positionPercentage = Math.max(MIN_SLIDER_POSITION, Math.min(MAX_SLIDER_POSITION, positionPercentage));
+            // Move the slider
+            elements.sliderContainer.style.left = `${positionPercentage}%`;
+            // Update clip-path for overlapping effect
+            elements.leftPanel.style.clipPath = `polygon(0 0, ${positionPercentage}% 0, ${positionPercentage}% 100%, 0 100%)`;
+            elements.rightPanel.style.clipPath = `polygon(${positionPercentage}% 0, 100% 0, 100% 100%, ${positionPercentage}% 100%)`;
+        }
+        function getMouseX(e) {
+            return e.clientX || (e.touches && e.touches[0] ? e.touches[0].clientX : 0);
+        }
+        function startSliderDrag(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            isSliderDragging = true;
+            isSliderActive = true;
+            startMouseX = getMouseX(e);
+            // Get current slider position as percentage
+            const containerRect = elements.mapContainer.getBoundingClientRect();
+            const sliderRect = elements.sliderContainer.getBoundingClientRect();
+            startSliderPosition = ((sliderRect.left - containerRect.left) / containerRect.width) * 100;
+            // Add visual feedback
+            elements.sliderContainer.classList.add('dragging');
+            elements.sliderHandle.classList.add('dragging');
+            // Add global event listeners
+            document.addEventListener('mousemove', onSliderDrag, { passive: false });
+            document.addEventListener('mouseup', stopSliderDrag);
+            document.addEventListener('touchmove', onSliderDrag, { passive: false });
+            document.addEventListener('touchend', stopSliderDrag);
+            // Prevent text selection and set cursor
+            document.body.style.cursor = 'ew-resize';
+            document.body.style.userSelect = 'none';
+        }
+        function onSliderDrag(e) {
+            if (!isSliderDragging) return;
+            e.preventDefault();
+            e.stopPropagation();
+            const currentMouseX = getMouseX(e);
+            const deltaX = currentMouseX - startMouseX;
+            const containerWidth = elements.mapContainer.offsetWidth;
+            const deltaPercentage = (deltaX / containerWidth) * 100;
+            const newPosition = startSliderPosition + deltaPercentage;
+            updateSliderPosition(newPosition);
+        }
+        function stopSliderDrag(e) {
+            if (!isSliderDragging) return;
+            e.preventDefault();
+            e.stopPropagation();
+            isSliderDragging = false;
+            // Remove visual feedback
+            elements.sliderContainer.classList.remove('dragging');
+            elements.sliderHandle.classList.remove('dragging');
+            // Remove global event listeners
+            document.removeEventListener('mousemove', onSliderDrag);
+            document.removeEventListener('mouseup', stopSliderDrag);
+            document.removeEventListener('touchmove', onSliderDrag);
+            document.removeEventListener('touchend', stopSliderDrag);
+            // Reset cursor and selection
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+            // Reset slider active state after a short delay
+            setTimeout(() => {
+                isSliderActive = false;
+            }, 300);
+        }
+        // Layer switching
+        function switchLayer(map, currentLayer, layerType) {
+            if (!map || !currentLayer) return null;
+            try {
+                map.removeLayer(currentLayer);
+                const selectedLayer = tileLayers[layerType];
+                const newLayer = L.tileLayer(selectedLayer.url, {
+                    attribution: selectedLayer.attribution,
+                    maxZoom: 18
+                }).addTo(map);
+                return newLayer;
+            } catch (error) {
+                console.error('Error switching layer:', error);
+                showError('Failed to switch map layer');
+                return currentLayer;
+            }
+        }
+        // Search functionality
+        function clearSearchMarkers() {
+            searchMarkers.forEach(marker => {
+                if (leftMap && leftMap.hasLayer(marker.left)) {
+                    leftMap.removeLayer(marker.left);
+                }
+                if (rightMap && rightMap.hasLayer(marker.right)) {
+                    rightMap.removeLayer(marker.right);
+                }
+            });
+            searchMarkers = [];
+        }
+        async function searchLocation(query) {
+            if (!query || query.trim() === '') {
+                showError('Please enter a search term');
+                return false;
+            }
+            showLoading();
+            elements.searchBtn.disabled = true;
+            try {
+                const response = await fetch(
+                    `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=1&addressdetails=1`,
+                    {
+                        headers: {
+                            'User-Agent': 'Split Panel Maps'
+                        }
+                    }
+                );
+                if (!response.ok) {
+                    throw new Error('Search service unavailable');
+                }
+                const data = await response.json();
+                if (data.length > 0) {
+                    const lat = parseFloat(data[0].lat);
+                    const lng = parseFloat(data[0].lon);
+                    if (isNaN(lat) || isNaN(lng)) {
+                        throw new Error('Invalid coordinates received');
+                    }
+                    // Clear existing markers
+                    clearSearchMarkers();
+                    // Add markers to both maps
+                    const markerLeft = L.marker([lat, lng]).addTo(leftMap)
+                        .bindPopup(`<b>${data[0].display_name}</b>`)
+                        .openPopup();
+                    const markerRight = L.marker([lat, lng]).addTo(rightMap)
+                        .bindPopup(`<b>${data[0].display_name}</b>`)
+                        .openPopup();
+                    searchMarkers.push({ left: markerLeft, right: markerRight });
+                    // Move maps to location
+                    leftMap.setView([lat, lng], SEARCH_ZOOM);
+                    if (isSynced) {
+                        rightMap.setView([lat, lng], SEARCH_ZOOM);
+                    }
+                    return true;
+                } else {
+                    showError('Location not found. Please try a different search term.');
+                    return false;
+                }
+            } catch (error) {
+                console.error('Search error:', error);
+                showError('Search failed. Please try again.');
+                return false;
+            } finally {
+                hideLoading();
+                elements.searchBtn.disabled = false;
+            }
+        }
+        // Event listeners setup
+        function setupEventListeners() {
+            // Slider events
+            elements.sliderContainer.addEventListener('mousedown', startSliderDrag);
+            elements.sliderHandle.addEventListener('mousedown', startSliderDrag);
+            elements.sliderContainer.addEventListener('touchstart', startSliderDrag);
+            elements.sliderHandle.addEventListener('touchstart', startSliderDrag);
+            // Prevent context menu on slider
+            elements.sliderContainer.addEventListener('contextmenu', (e) => e.preventDefault());
+            elements.sliderHandle.addEventListener('contextmenu', (e) => e.preventDefault());
+            // Sync toggle
+            elements.syncToggle.addEventListener('click', () => {
+                isSynced = !isSynced;
+                elements.syncToggle.classList.toggle('active', isSynced);
+                if (isSynced && leftMap && rightMap) {
+                    syncMaps(leftMap, rightMap);
+                }
+            });
+            // Layer switching
+            elements.leftLayer.addEventListener('change', (e) => {
+                if (leftMap && leftLayer) {
+                    leftLayer = switchLayer(leftMap, leftLayer, e.target.value);
+                    updatePanelLabels();
+                }
+            });
+            elements.rightLayer.addEventListener('change', (e) => {
+                if (rightMap && rightLayer) {
+                    rightLayer = switchLayer(rightMap, rightLayer, e.target.value);
+                    updatePanelLabels();
+                }
+            });
+            // Search functionality
+            elements.searchBtn.addEventListener('click', async () => {
+                const query = elements.searchBox.value.trim();
+                await searchLocation(query);
+            });
+            elements.searchBox.addEventListener('keypress', async (e) => {
+                if (e.key === 'Enter') {
+                    const query = e.target.value.trim();
+                    await searchLocation(query);
+                }
+            });
+            // Window resize
+            window.addEventListener('resize', () => {
+                setTimeout(() => {
+                    if (leftMap) leftMap.invalidateSize();
+                    if (rightMap) rightMap.invalidateSize();
+                }, 300);
+            });
+            // Error message click to dismiss
+            elements.errorMessage.addEventListener('click', () => {
+                elements.errorMessage.style.display = 'none';
+            });
+        }
+        // Initialize everything when DOM is ready
+        document.addEventListener('DOMContentLoaded', () => {
+            console.log('DOM loaded, initializing application...');
+            // Set up event listeners first
+            setupEventListeners();
+            // Initialize maps after a short delay
+            setTimeout(() => {
+                initializeMaps();
+                updatePanelLabels();
+            }, 100);
+        });
+        // Handle page visibility changes
+        document.addEventListener('visibilitychange', () => {
+            if (!document.hidden) {
+                // Page became visible, invalidate map sizes
+                setTimeout(() => {
+                    if (leftMap) leftMap.invalidateSize();
+                    if (rightMap) rightMap.invalidateSize();
+                }, 100);
+            }
+        });
+    </script>
+</body>
+</html>

style2.css ADDED Viewed

	@@ -0,0 +1,306 @@

+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            height: 100vh;
+            overflow: hidden;
+        }
+        .header {
+            background: #FFD200;
+            backdrop-filter: blur(10px);
+            padding: 15px 30px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 1000;
+            position: relative;
+        }
+        .logo {
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            justify-content: flex-start; /* aligns everything to the left */
+        }
+        .controls {
+            display: flex;
+            gap: 15px;
+            align-items: center;
+        }
+        .control-group {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+        .control-group label {
+            font-size: 12px;
+            color: #666;
+            font-weight: 500;
+        }
+        .search-box, .layer-select {
+            padding: 8px 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: all 0.3s ease;
+            background: white;
+            min-width: 150px;
+        }
+        .search-box:focus, .layer-select:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+        .search-btn {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            margin-top: 20px;
+        }
+        .search-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+        }
+        .search-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .map-container {
+            position: relative;
+            height: calc(100vh - 80px);
+            overflow: hidden;
+        }
+        .map-panel {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            overflow: hidden;
+            width: 100%;
+            transition: clip-path 0.3s ease;
+        }
+        .left-panel {
+            left: 0;
+            z-index: 1;
+            clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+        }
+        .right-panel {
+            right: 0;
+            z-index: 2;
+            clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
+        }
+        .map {
+            width: 100%;
+            height: 100%;
+        }
+        .panel-label {
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-weight: 600;
+            color: #333;
+            z-index: 1000;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+        .slider-container {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
+            z-index: 1002;
+            cursor: ew-resize;
+            transition: all 0.3s ease;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .slider-container:hover {
+            width: 6px;
+            background: linear-gradient(to bottom, rgba(102, 126, 234, 0.8), rgba(102, 126, 234, 0.6));
+        }
+        .slider-container.dragging {
+            width: 6px;
+            background: linear-gradient(to bottom, rgba(102, 126, 234, 0.9), rgba(102, 126, 234, 0.7));
+        }
+        .slider-handle {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 36px;
+            height: 36px;
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            border: 2px solid white;
+            border-radius: 50%;
+            transform: translate(-50%, -50%);
+            cursor: ew-resize;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+            transition: all 0.3s ease;
+            color: white;
+        }
+        .slider-handle:hover {
+            transform: translate(-50%, -50%) scale(1.1);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+        }
+        .slider-handle.dragging {
+            transform: translate(-50%, -50%) scale(1.1);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+        }
+        .slider-handle::before {
+            content: '⟷';
+            font-size: 14px;
+            font-weight: bold;
+        }
+        .coordinates {
+            position: absolute;
+            bottom: 15px;
+            right: 15px;
+            background: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            font-family: 'Courier New', monospace;
+            z-index: 1000;
+            backdrop-filter: blur(10px);
+        }
+        .sync-toggle {
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border: 2px solid #e0e0e0;
+            padding: 12px;
+            border-radius: 50%;
+            cursor: pointer;
+            z-index: 1001;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        }
+        .sync-toggle:hover {
+            transform: scale(1.05);
+            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
+        }
+        .sync-toggle.active {
+            background: linear-gradient(45deg, #667eea, #764ba2);
+            color: white;
+            border-color: #667eea;
+        }
+        .loading-indicator {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(255, 255, 255, 0.9);
+            padding: 20px;
+            border-radius: 10px;
+            z-index: 2000;
+            display: none;
+        }
+        .logo {
+    display: flex;
+    align-items: left;
+    gap: 12px;
+    font-size: 24px;
+    font-weight: bold;
+     }
+        .error-message {
+            position: fixed;
+            top: 100px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #ff4444;
+            color: white;
+            padding: 15px 25px;
+            border-radius: 8px;
+            z-index: 3000;
+            display: none;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        }
+        @media (max-width: 768px) {
+            .header {
+                flex-direction: column;
+                gap: 15px;
+                padding: 10px 15px;
+            }
+            .controls {
+                flex-direction: column;
+                gap: 10px;
+                width: 100%;
+            }
+            .control-group {
+                width: 100%;
+            }
+            .search-box, .layer-select {
+                width: 100%;
+                min-width: unset;
+            }
+            .slider-container {
+                width: 6px;
+            }
+            .slider-handle {
+                width: 32px;
+                height: 32px;
+            }
+            .map-container {
+                height: calc(100vh - 140px);
+            }
+        }