2023-08-24 18:26:16 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2023-08-31 18:57:27 +02:00
|
|
|
<title>UPlanet Map</title>
|
|
|
|
|
<link rel="stylesheet" href="leaflet.css" />
|
2023-09-01 03:50:04 +02:00
|
|
|
<style>
|
|
|
|
|
.map-container {
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2023-10-19 17:36:02 +02:00
|
|
|
|
|
|
|
|
.button-container {
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
width: 50%;
|
|
|
|
|
height: 50%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
background-color: #3498db;
|
|
|
|
|
color: #fff;
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
border: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
2023-09-01 03:50:04 +02:00
|
|
|
</style>
|
2023-08-24 18:26:16 +02:00
|
|
|
</head>
|
|
|
|
|
<body>
|
2023-09-01 03:50:04 +02:00
|
|
|
<div id="map" class="map-container"></div>
|
2023-10-19 17:36:02 +02:00
|
|
|
<!-- Add a button container if sectorIPNS is not empty -->
|
|
|
|
|
<div class="button-container" id="buttonContainer"></div>
|
2023-08-24 18:26:16 +02:00
|
|
|
|
2023-08-31 18:57:27 +02:00
|
|
|
<script src="leaflet.js"></script>
|
2023-10-19 17:36:02 +02:00
|
|
|
|
|
|
|
|
<script>
|
2023-08-24 18:26:16 +02:00
|
|
|
// const desiredImageWidthInKm = 11; // Now Is calculated from northEastLon - southWestLon
|
|
|
|
|
const tileSizeInPixels = 256;
|
|
|
|
|
|
|
|
|
|
function calculateZoomLevel(desiredImageWidthInKm, latitude) {
|
|
|
|
|
const earthEquatorialCircumference = 40075016.686; // Earth's equatorial circumference in meters
|
|
|
|
|
// Calculate the distance covered by one degree of longitude at the given latitude
|
|
|
|
|
const metersPerLongitudeDegree = earthEquatorialCircumference * Math.cos((Math.PI / 180) * latitude) / 360;
|
|
|
|
|
const metersPerPixel = metersPerLongitudeDegree * 360 / (tileSizeInPixels * Math.pow(2, 20));
|
|
|
|
|
// Calculate the number of pixels needed to achieve the desired width
|
|
|
|
|
const numberOfPixelsHorizontally = (desiredImageWidthInKm * 1000) / metersPerPixel;
|
|
|
|
|
// Calculate the appropriate zoom level
|
|
|
|
|
const zoomLevel = Math.log2(tileSizeInPixels * Math.pow(2, 20) / numberOfPixelsHorizontally);
|
|
|
|
|
return zoomLevel;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 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, ' '));
|
|
|
|
|
}
|
|
|
|
|
|
2023-10-19 17:36:02 +02:00
|
|
|
const defaultIPNS = '';
|
|
|
|
|
const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
|
|
|
|
|
console.log('sectorIPNS: /ipns/', sectorIPNS);
|
|
|
|
|
|
2023-09-02 01:11:17 +02:00
|
|
|
const defaultSouthWestLat = 0.00;
|
|
|
|
|
const defaultSouthWestLon = 0.00;
|
|
|
|
|
const defaultOffsetDegrees = 10.00; // 10° offset
|
2023-08-24 18:26:16 +02:00
|
|
|
|
|
|
|
|
const southWestLat = parseFloat(getUrlParameter('southWestLat')) || defaultSouthWestLat;
|
2023-08-31 18:57:27 +02:00
|
|
|
console.log('Lat:', southWestLat);
|
2023-08-24 18:26:16 +02:00
|
|
|
const southWestLon = parseFloat(getUrlParameter('southWestLon')) || defaultSouthWestLon;
|
2023-08-31 18:57:27 +02:00
|
|
|
console.log('Lon:', southWestLon);
|
2023-08-24 18:26:16 +02:00
|
|
|
|
2023-08-31 18:57:27 +02:00
|
|
|
const deg = parseFloat(getUrlParameter('deg')) || defaultOffsetDegrees;
|
|
|
|
|
console.log('Offset:', deg);
|
2023-08-24 18:26:16 +02:00
|
|
|
|
2023-08-31 18:57:27 +02:00
|
|
|
// Calculate northEastLat and northEastLon with deg° offset only if parameters are empty
|
|
|
|
|
const northEastLatParam = getUrlParameter('northEastLat');
|
|
|
|
|
const northEastLonParam = getUrlParameter('northEastLon');
|
|
|
|
|
|
|
|
|
|
const northEastLat = northEastLatParam ? parseFloat(northEastLatParam) : southWestLat + deg;
|
|
|
|
|
const northEastLon = northEastLonParam ? parseFloat(northEastLonParam) : southWestLon + deg;
|
|
|
|
|
|
|
|
|
|
// Calculate the longitudinal distance in degrees
|
|
|
|
|
const lonDistanceInDegrees = Math.abs(northEastLon - southWestLon);
|
|
|
|
|
console.log('lonDistanceInDegrees:', lonDistanceInDegrees);
|
|
|
|
|
|
|
|
|
|
// Calculate the desired image width in kilometers
|
|
|
|
|
const earthEquatorialCircumference = 40075016.686; // Earth's equatorial circumference in meters
|
|
|
|
|
const metersPerLongitudeDegree = Math.abs(earthEquatorialCircumference * Math.cos((Math.PI / 180) * southWestLat) / 360);
|
|
|
|
|
const desiredImageWidthInMeters = lonDistanceInDegrees * metersPerLongitudeDegree;
|
|
|
|
|
const desiredImageWidthInKm = desiredImageWidthInMeters / 1000;
|
|
|
|
|
console.log('desiredImageWidthInKm:', desiredImageWidthInKm);
|
2023-08-24 18:26:16 +02:00
|
|
|
|
|
|
|
|
const centerLat = (southWestLat + northEastLat) / 2;
|
|
|
|
|
const centerLon = (southWestLon + northEastLon) / 2;
|
|
|
|
|
|
|
|
|
|
// Provide the latitude for adjustment
|
|
|
|
|
const latitude = centerLat;
|
2023-09-01 19:41:43 +02:00
|
|
|
const zoomLevel = calculateZoomLevel(desiredImageWidthInKm, latitude);
|
|
|
|
|
// const zoomLevel = calculateZoomLevel(desiredImageWidthInKm, latitude) + 2;
|
|
|
|
|
|
2023-08-24 18:26:16 +02:00
|
|
|
console.log('Recommended zoom level:', zoomLevel);
|
|
|
|
|
|
2023-09-01 13:16:38 +02:00
|
|
|
const map = L.map('map', {
|
|
|
|
|
zoomControl: false // Disable the default zoom control
|
|
|
|
|
}).setView([centerLat, centerLon], zoomLevel);
|
2023-08-24 18:26:16 +02:00
|
|
|
|
2023-09-01 03:50:04 +02:00
|
|
|
const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
2023-09-01 13:16:38 +02:00
|
|
|
attribution: `U Planet | Astroport | ${southWestLat} : ${southWestLon}`
|
2023-08-24 18:26:16 +02:00
|
|
|
}).addTo(map);
|
|
|
|
|
|
2023-10-19 17:36:02 +02:00
|
|
|
const buttonContainer = document.getElementById('buttonContainer');
|
|
|
|
|
|
|
|
|
|
// Check if sectorIPNS is not empty
|
|
|
|
|
if (sectorIPNS !== '') {
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-24 18:26:16 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
