Hugging Face's logo

Spaces:
zh4rif
/
forestweb
Running

App Files Community
forestweb / split_panel_map.html
zh4rif's picture
zh4rif
Upload 2 files
a65f40f verified
raw
history blame contribute delete
22.5 kB
<!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>