2023-08-24 18:26:16 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2023-08-30 02:02:16 +02:00
|
|
|
<title>U Planet. Welcome in U World</title>
|
2023-09-04 02:15:19 +02:00
|
|
|
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
2023-08-30 02:02:16 +02:00
|
|
|
|
2023-08-24 18:26:16 +02:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<link rel="stylesheet" href="leaflet.css">
|
|
|
|
|
<style>
|
|
|
|
|
.clickable-area {
|
|
|
|
|
fill-opacity: 0.2; /* Adjust the opacity as needed */
|
|
|
|
|
fill: #0074d9; /* Adjust the color as needed */
|
|
|
|
|
stroke: #001f3f;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script src="leaflet.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
#map {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="map"></div>
|
2023-08-30 02:02:16 +02:00
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// Set up initial variables
|
|
|
|
|
const tileSize = 10; // 10° interval
|
|
|
|
|
const gridSize = 36;
|
|
|
|
|
const initialZoom = 1; // Choose an initial zoom level
|
|
|
|
|
|
|
|
|
|
// Create the map
|
|
|
|
|
const map = L.map('map').setView([0, 0], initialZoom);
|
|
|
|
|
|
|
|
|
|
// Add OpenStreetMap tile layer
|
2023-09-04 02:15:19 +02:00
|
|
|
//L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
|
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
|
|
|
|
|
|
|
|
|
attribution: 'Astroport | U Planet'
|
2023-08-30 02:02:16 +02:00
|
|
|
}).addTo(map);
|
|
|
|
|
|
|
|
|
|
// Create a clickable area for each grid cell
|
|
|
|
|
for (let latIndex = 0; latIndex < gridSize; latIndex++) {
|
|
|
|
|
for (let lonIndex = 0; lonIndex < gridSize; lonIndex++) {
|
|
|
|
|
const lat = -180 + latIndex * tileSize;
|
|
|
|
|
const lon = -180 + lonIndex * tileSize;
|
|
|
|
|
|
|
|
|
|
// Create a clickable rectangle
|
|
|
|
|
const rectangle = L.rectangle(
|
|
|
|
|
[[lat, lon], [lat + tileSize, lon + tileSize]],
|
|
|
|
|
{ color: 'transparent', weight: 1, className: 'clickable-area' } // Add CSS class
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// Add a click event to the rectangle
|
|
|
|
|
rectangle.on('click', () => {
|
|
|
|
|
const url = `map_render.html?southWestLat=${lat}&southWestLon=${lon}`;
|
|
|
|
|
window.location.href = url;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Add the rectangle to the map
|
|
|
|
|
rectangle.addTo(map);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2023-08-24 18:26:16 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
