Spaces:
Running
Running
| <html><head><base href="https://earth-historic-image-dataset.org"><title>Earth Historic Image Dataset - Interactive Map</title> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> | |
| <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.draw.css" /> | |
| <style> | |
| body { | |
| font-family: 'Courier New', monospace; | |
| line-height: 1.6; | |
| color: #333; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| background-color: #f4e9d6; | |
| } | |
| header { | |
| background-color: #8b4513; | |
| color: #f4e9d6; | |
| text-align: center; | |
| padding: 1em; | |
| } | |
| #map-container { | |
| flex-grow: 1; | |
| display: flex; | |
| overflow: hidden; | |
| } | |
| #map { | |
| flex-grow: 1; | |
| } | |
| #image-panel { | |
| width: 400px; | |
| padding: 20px; | |
| background-color: #d2b48c; | |
| overflow-y: auto; | |
| max-height: calc(100vh - 100px); | |
| } | |
| .image-item { | |
| margin-bottom: 20px; | |
| background-color: #f4e9d6; | |
| padding: 10px; | |
| border-radius: 5px; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .image-item img { | |
| max-width: 100%; | |
| border-radius: 5px; | |
| border: 2px solid #8b4513; | |
| } | |
| .image-info { | |
| font-size: 0.9em; | |
| margin-top: 10px; | |
| } | |
| #instructions { | |
| background-color: rgba(244, 233, 214, 0.9); | |
| position: absolute; | |
| top: 80px; | |
| left: 50px; | |
| z-index: 1000; | |
| padding: 10px; | |
| border-radius: 5px; | |
| border: 2px solid #8b4513; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Earth Historic Image Dataset - Interactive Map</h1> | |
| <p>Draw a rectangle on the map to fetch historic satellite images for that area (1900-1990)</p> | |
| </header> | |
| <div id="map-container"> | |
| <div id="map"></div> | |
| <div id="instructions"> | |
| <h3>How to use:</h3> | |
| <ol> | |
| <li>Click the square icon in the left corner</li> | |
| <li>Draw a rectangle on the map</li> | |
| <li>View the fetched historic satellite images on the right panel</li> | |
| </ol> | |
| </div> | |
| <div id="image-panel"> | |
| <h2>Selected Area Historic Images</h2> | |
| <p>Images acquired by DR. Strawbelly, Public Domain.</p> | |
| <div id="image-list"></div> | |
| </div> | |
| </div> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> | |
| <script src="https://unpkg.com/[email protected]/dist/leaflet.draw.js"></script> | |
| <script> | |
| // Initialize the map | |
| var map = L.map('map').setView([0, 0], 2); | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© OpenStreetMap contributors' | |
| }).addTo(map); | |
| // Add rectangle drawing control | |
| var drawnItems = new L.FeatureGroup(); | |
| map.addLayer(drawnItems); | |
| var drawControl = new L.Control.Draw({ | |
| draw: { | |
| rectangle: true, | |
| polygon: false, | |
| circle: false, | |
| circlemarker: false, | |
| marker: false, | |
| polyline: false | |
| }, | |
| edit: { | |
| featureGroup: drawnItems | |
| } | |
| }); | |
| map.addControl(drawControl); | |
| // Handle rectangle drawing | |
| map.on('draw:created', function(e) { | |
| var layer = e.layer; | |
| drawnItems.clearLayers(); | |
| drawnItems.addLayer(layer); | |
| var bounds = layer.getBounds(); | |
| var rectangleSize = calculateRectangleSize(bounds); | |
| fetchImagesForArea(bounds, rectangleSize); | |
| }); | |
| function calculateRectangleSize(bounds) { | |
| var southWest = map.project(bounds.getSouthWest(), map.getZoom()); | |
| var northEast = map.project(bounds.getNorthEast(), map.getZoom()); | |
| return { | |
| width: Math.abs(northEast.x - southWest.x), | |
| height: Math.abs(northEast.y - southWest.y) | |
| }; | |
| } | |
| function getRandomDate() { | |
| const start = new Date(1900, 0, 1); | |
| const end = new Date(1990, 11, 31, 23, 59, 59); | |
| return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())); | |
| } | |
| function getRandomSource() { | |
| const sources = [ | |
| "USGS Historical Archives", | |
| "NASA Early Earth Observation Program", | |
| "Royal Geographical Society Collection", | |
| "National Archives Aerial Photographs", | |
| "Smithsonian Institution Archives", | |
| "Library of Strawbelly Map Collection", | |
| "British Antarctic Survey Historical Imagery", | |
| "Early NOAA Weather Satellite Data", | |
| "Vintage Aerial Photography Collections", | |
| "International Geophysical Year Imagery (1957-1958)", | |
| "National WBSM Satellite Dataset", | |
| "Kerbal Space Program Archives", | |
| "Venice Space Program Library" | |
| ]; | |
| return sources[Math.floor(Math.random() * sources.length)]; | |
| } | |
| function determineRegion(lat, lon) { | |
| const regions = [ | |
| { name: "North_America", lat: [24, 72], lon: [-168, -50] }, | |
| { name: "South_America", lat: [-56, 13], lon: [-81, -34] }, | |
| { name: "Europe", lat: [36, 71], lon: [-11, 40] }, | |
| { name: "Africa", lat: [-35, 37], lon: [-18, 52] }, | |
| { name: "Asia", lat: [-10, 81], lon: [26, 180] }, | |
| { name: "Australia", lat: [-47, -10], lon: [110, 180] }, | |
| { name: "Antarctica", lat: [-90, -60], lon: [-180, 180] } | |
| ]; | |
| for (let region of regions) { | |
| if (lat >= region.lat[0] && lat <= region.lat[1] && | |
| lon >= region.lon[0] && lon <= region.lon[1]) { | |
| return region.name; | |
| } | |
| } | |
| return "Unknown"; | |
| } | |
| function fetchImagesForArea(bounds, size) { | |
| var imageList = document.getElementById('image-list'); | |
| imageList.innerHTML = ''; | |
| var north = bounds.getNorth().toFixed(4); | |
| var south = bounds.getSouth().toFixed(4); | |
| var east = bounds.getEast().toFixed(4); | |
| var west = bounds.getWest().toFixed(4); | |
| var centerLat = (bounds.getNorth() + bounds.getSouth()) / 2; | |
| var centerLon = (bounds.getEast() + bounds.getWest()) / 2; | |
| var region = determineRegion(centerLat, centerLon); | |
| for (var i = 1; i <= 5; i++) { | |
| var date = getRandomDate(); | |
| var source = getRandomSource(); | |
| var imageItem = document.createElement('div'); | |
| imageItem.className = 'image-item'; | |
| var img = document.createElement('img'); | |
| img.src = `https://via.placeholder.com/${Math.round(size.width)}x${Math.round(size.height)}.png?text=Historic+Old+Satellite+Image+${i}+${date.getFullYear()}+Region+${region}`; | |
| img.alt = `Historic Satellite Image ${i} from ${date.toDateString()} in ${region}`; | |
| img.width = Math.round(size.width); | |
| img.height = Math.round(size.height); | |
| var info = document.createElement('div'); | |
| info.className = 'image-info'; | |
| info.innerHTML = ` | |
| <p><strong>Date:</strong> ${date.toDateString()}</p> | |
| <p><strong>Time:</strong> ${date.toLocaleTimeString()}</p> | |
| <p><strong>Source:</strong> ${source}</p> | |
| <p><strong>Region:</strong> ${region}</p> | |
| <p><strong>Coordinates:</strong> N${north}, S${south}, E${east}, W${west}</p> | |
| `; | |
| imageItem.appendChild(img); | |
| imageItem.appendChild(info); | |
| imageList.appendChild(imageItem); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |