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>
|
2023-10-19 17:36:02 +02:00
|
|
|
#map {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.clickable-area {
|
2023-08-24 18:26:16 +02:00
|
|
|
fill-opacity: 0.2; /* Adjust the opacity as needed */
|
|
|
|
|
fill: #0074d9; /* Adjust the color as needed */
|
|
|
|
|
stroke: #001f3f;
|
|
|
|
|
}
|
2023-10-19 17:36:02 +02:00
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
background-color: #3498db;
|
|
|
|
|
color: #fff;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
border: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2023-08-24 18:26:16 +02:00
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script src="leaflet.js"></script>
|
2023-10-19 17:36:02 +02:00
|
|
|
|
2023-08-24 18:26:16 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="map"></div>
|
2023-08-30 02:02:16 +02:00
|
|
|
|
|
|
|
|
<script>
|
2023-10-19 17:36:02 +02:00
|
|
|
|
|
|
|
|
// Function to extract URL parameters
|
|
|
|
|
function getUrlParameter(name) {
|
|
|
|
|
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
|
|
|
|
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
|
|
|
|
const results = regex.exec(location.search);
|
|
|
|
|
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
|
|
|
|
}
|
|
|
|
|
const defaultIPNS = '';
|
|
|
|
|
const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
|
|
|
|
|
console.log('sectorIPNS: /ipns/', sectorIPNS);
|
|
|
|
|
if (sectorIPNS !== '') {
|
|
|
|
|
const buttonContainer = document.createElement('div');
|
|
|
|
|
buttonContainer.id = 'button-container'
|
|
|
|
|
buttonContainer.style.position = 'absolute';
|
|
|
|
|
buttonContainer.style.bottom = '0px';
|
|
|
|
|
buttonContainer.style.left = '0px';
|
|
|
|
|
buttonContainer.style.width = '200px';
|
|
|
|
|
buttonContainer.style.height = '150px';
|
|
|
|
|
buttonContainer.style.zIndex = '1001';
|
|
|
|
|
buttonContainer.style.display = 'flex';
|
|
|
|
|
buttonContainer.style.flexDirection = 'column';
|
|
|
|
|
buttonContainer.style.alignItems = 'center';
|
|
|
|
|
buttonContainer.style.justifyContent = 'center';
|
|
|
|
|
|
|
|
|
|
const button = document.createElement('button');
|
|
|
|
|
button.innerText = 'EXPLORE';
|
|
|
|
|
button.className = 'button';
|
|
|
|
|
|
|
|
|
|
// Add an event listener to the button
|
|
|
|
|
button.addEventListener('click', function() {
|
|
|
|
|
window.open( '/ipns/'+ sectorIPNS, "AstroTab");
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Append the button to the button container
|
|
|
|
|
buttonContainer.appendChild(button);
|
|
|
|
|
document.body.appendChild(buttonContainer);
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-30 02:02:16 +02:00
|
|
|
// 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>
|
