Usat & Umap
This commit is contained in:
parent
ea31abe1a1
commit
91f5ead159
|
@ -18,7 +18,7 @@ Get Friends.
|
|||
Explore Trust.
|
||||
|
||||
# SNAPSHOT DEMO
|
||||
https://ipfs.copylaradio.com/ipfs/QmQdB6ChBs7N1StVo3ikytMRBW4zCHL4pxEFP9Tq8kfjAV/
|
||||
https://ipfs.copylaradio.com/ipfs/QmRG3ZAiXWvKBccPFbv4eUTZFPMsfXG25PiZQD6N8M8MMM/
|
||||
|
||||
Install Astroport.ONE at your location
|
||||
https://github.com/papiche/Astroport.ONE
|
||||
|
|
|
@ -86,21 +86,6 @@
|
|||
zoomControl: false // Disable the default zoom control
|
||||
}).setView([centerLat, centerLon], zoomLevel);
|
||||
|
||||
// Use the Mapbox Satellite tile layer
|
||||
//~ L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=YOUR_MAPBOX_ACCESS_TOKEN', {
|
||||
//~ attribution: '© Mapbox',
|
||||
//~ tileSize: 512,
|
||||
//~ zoomOffset: -1,
|
||||
//~ accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
|
||||
//~ }).addTo(map);
|
||||
|
||||
//~ // Use the OpenAerialMap (OAM) tile layer for satellite view
|
||||
//~ L.tileLayer('https://tiles.openaerialmap.org/5d6d1e370f437a00106e06ef/0/{z}/{x}/{y}.jpg', {
|
||||
//~ attribution: '© OpenAerialMap',
|
||||
//~ maxZoom: 18
|
||||
//~ }).addTo(map);
|
||||
|
||||
|
||||
const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: `U Planet | Astroport | ${southWestLat} : ${southWestLon}`
|
||||
}).addTo(map);
|
||||
|
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>UPlanet Sat</title>
|
||||
<link rel="stylesheet" href="leaflet.css" />
|
||||
<style>
|
||||
.map-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" class="map-container"></div>
|
||||
<br>
|
||||
|
||||
<script src="leaflet.js"></script>
|
||||
<script>
|
||||
// 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, ' '));
|
||||
}
|
||||
|
||||
const defaultSouthWestLat = 0.00;
|
||||
const defaultSouthWestLon = 0.00;
|
||||
const defaultOffsetDegrees = 10.00; // 10° offset
|
||||
|
||||
const southWestLat = parseFloat(getUrlParameter('southWestLat')) || defaultSouthWestLat;
|
||||
console.log('Lat:', southWestLat);
|
||||
const southWestLon = parseFloat(getUrlParameter('southWestLon')) || defaultSouthWestLon;
|
||||
console.log('Lon:', southWestLon);
|
||||
|
||||
const deg = parseFloat(getUrlParameter('deg')) || defaultOffsetDegrees;
|
||||
console.log('Offset:', deg);
|
||||
|
||||
// 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);
|
||||
|
||||
const centerLat = (southWestLat + northEastLat) / 2;
|
||||
const centerLon = (southWestLon + northEastLon) / 2;
|
||||
|
||||
// Provide the latitude for adjustment
|
||||
const latitude = centerLat;
|
||||
const zoomLevel = calculateZoomLevel(desiredImageWidthInKm, latitude);
|
||||
// const zoomLevel = calculateZoomLevel(desiredImageWidthInKm, latitude) + 2;
|
||||
|
||||
console.log('Recommended zoom level:', zoomLevel);
|
||||
|
||||
const map = L.map('map', {
|
||||
zoomControl: false // Disable the default zoom control
|
||||
}).setView([centerLat, centerLon], zoomLevel);
|
||||
|
||||
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||||
attribution: `U Planet | Astroport | ${southWestLat} : ${southWestLon}`
|
||||
}).addTo(map);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
||||
<title>Occupy UPlanet ! Please. Zoom In.</title>
|
||||
<link rel="stylesheet" href="leaflet.css" />
|
||||
<style>
|
||||
|
@ -118,6 +118,8 @@
|
|||
//~ maxZoom: 18
|
||||
//~ }).addTo(map);
|
||||
|
||||
// L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
|
||||
//L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: 'U Planet'
|
||||
}).addTo(map);
|
||||
|
|
|
@ -0,0 +1,215 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
||||
<title>Occupy UPlanet ! Please. Zoom In.</title>
|
||||
<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;
|
||||
}
|
||||
#coordinates-display {
|
||||
position: absolute;
|
||||
bottom: 20px; /* Adjust the bottom position as needed */
|
||||
left: 10px; /* Adjust the left position as needed */
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
border: 1px solid black;
|
||||
z-index: 1000;
|
||||
}
|
||||
#map-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="map-container" style="position: relative;">
|
||||
<div id="coordinates-display"></div> <!-- Coordinates display element -->
|
||||
<div id="map" style="width: 100%; height: 100vh;"></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<script src="leaflet.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// 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, ' '));
|
||||
}
|
||||
|
||||
const defaultSouthWestLat = 0.00;
|
||||
const defaultSouthWestLon = 0.00;
|
||||
const defaultOffsetDegrees = 10.00; // 10° offset
|
||||
|
||||
const southWestLat = parseFloat(getUrlParameter('southWestLat')) || defaultSouthWestLat;
|
||||
console.log('Lat:', southWestLat);
|
||||
const southWestLon = parseFloat(getUrlParameter('southWestLon')) || defaultSouthWestLon;
|
||||
console.log('Lon:', southWestLon);
|
||||
|
||||
const deg = parseFloat(getUrlParameter('deg')) || defaultOffsetDegrees;
|
||||
console.log('Offset:', deg);
|
||||
|
||||
// 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);
|
||||
|
||||
const centerLat = (southWestLat + northEastLat) / 2;
|
||||
const centerLon = (southWestLon + northEastLon) / 2;
|
||||
|
||||
// Provide the latitude for adjustment
|
||||
const latitude = centerLat;
|
||||
const zoomLevel = calculateZoomLevel(desiredImageWidthInKm, latitude);
|
||||
console.log('Recommended zoom level:', zoomLevel);
|
||||
|
||||
const map = L.map('map').setView([centerLat, centerLon], zoomLevel);
|
||||
|
||||
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
|
||||
attribution: 'U Planet'
|
||||
}).addTo(map);
|
||||
|
||||
const gridSize = 10; // Number of rows and columns in the grid
|
||||
const NSize = deg / 10; // Size of each grid cell
|
||||
|
||||
|
||||
// Create a HTML element for displaying coordinates
|
||||
const coordinatesDisplay = document.getElementById('coordinates-display');
|
||||
|
||||
// Check if deg is less than or equal to 0.01
|
||||
if (deg <= 0.01) {
|
||||
const container = document.createElement('div');
|
||||
container.style.position = 'fixed';
|
||||
container.style.top = '0';
|
||||
container.style.left = '0';
|
||||
container.style.width = '100vw';
|
||||
container.style.height = '100vh';
|
||||
container.style.backgroundColor = 'rgba(255, 255, 255, 0.4)';
|
||||
container.style.border = 'none';
|
||||
container.style.zIndex = '999';
|
||||
container.style.display = 'flex';
|
||||
container.style.flexDirection = 'column';
|
||||
container.style.alignItems = 'center';
|
||||
container.style.justifyContent = 'center';
|
||||
|
||||
|
||||
const button = document.createElement('button');
|
||||
button.textContent = 'Apply for Visa';
|
||||
button.style.width = '100%';
|
||||
button.style.height = '100px'; // Customize the button height
|
||||
button.style.backgroundColor = '#0074d9';
|
||||
button.style.border = 'none';
|
||||
button.style.fontFamily = 'Arial, sans-serif'; // Customize the font family
|
||||
button.style.fontSize = '24px'; // Customize the font size
|
||||
button.style.color = '#fff'; // Customize the font color
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
// const url = `http://astroport.localhost:1234/?uplanet=@&salt=${southWestLat}&pepper=${southWestLon}`;
|
||||
const url = `https://astroport.copylaradio.com/?uplanet=@&salt=${southWestLat}&pepper=${southWestLon}`;
|
||||
window.location.href = url;
|
||||
});
|
||||
|
||||
container.appendChild(button);
|
||||
|
||||
//~ const link = document.createElement('a');
|
||||
//~ link.href = 'https://ipfs.copylaradio.com/ipfs/QmXom7iUq7G9Z1eiuckAQ1B7tkYfYGKnWhh3kUaKBd3ct4';
|
||||
//~ link.target = 'pp';
|
||||
//~ link.textContent = '>> PRINT PASSPORT <<';
|
||||
//~ link.style.fontSize = '24px'; // Customize the font size
|
||||
//~ link.style.textDecoration = 'none'; // Remove underline from the link
|
||||
//~ link.style.marginBottom = '30px'; // Add some space between the link and the button
|
||||
|
||||
//~ container.appendChild(link);
|
||||
|
||||
document.body.appendChild(container);
|
||||
|
||||
} else {
|
||||
|
||||
// Add a mousemove event listener to the map
|
||||
map.on('mousemove', (event) => {
|
||||
const latLng = event.latlng;
|
||||
const lat = latLng.lat.toFixed(6);
|
||||
const lng = latLng.lng.toFixed(6);
|
||||
coordinatesDisplay.textContent = `Latitude: ${lat}, Longitude: ${lng}`;
|
||||
});
|
||||
|
||||
// Create a clickable rectangle for each grid cell
|
||||
for (let latIndex = 0; latIndex < gridSize; latIndex++) {
|
||||
for (let lonIndex = 0; lonIndex < gridSize; lonIndex++) {
|
||||
const lat = southWestLat + latIndex * NSize ;
|
||||
const lon = southWestLon + lonIndex * NSize ;
|
||||
|
||||
// Create a clickable rectangle
|
||||
const rectangle = L.rectangle(
|
||||
[[lat , lon ], [lat + NSize , lon + NSize]],
|
||||
{ color: 'transparent', weight: 1, className: 'clickable-area' } // Add CSS class
|
||||
);
|
||||
|
||||
// Add a click event to the rectangle
|
||||
rectangle.on('click', () => {
|
||||
// Calculate new northEastLat and northEastLon based on the clicked grid cell
|
||||
const newNorthEastLat = lat.toFixed(2);
|
||||
const newNorthEastLon = lon.toFixed(2);
|
||||
|
||||
// Update URL parameters with the new values
|
||||
const url = `map_render.html?southWestLat=${newNorthEastLat}&southWestLon=${newNorthEastLon}°=${NSize}`;
|
||||
window.location.href = url;
|
||||
});
|
||||
|
||||
// Add the rectangle to the map
|
||||
rectangle.addTo(map);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add a click event listener to the map container
|
||||
document.getElementById('map-container').addEventListener('click', (event) => {
|
||||
const isInsideRectangle = event.target.classList.contains('clickable-area');
|
||||
if (!isInsideRectangle) {
|
||||
history.back(); // Trigger browser's back functionality
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>U Planet. Welcome in U World</title>
|
||||
<link rel="icon" type="image/x-icon" href="./favicon.ico">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="leaflet.css">
|
||||
|
@ -35,8 +36,10 @@ const initialZoom = 1; // Choose an initial zoom level
|
|||
const map = L.map('map').setView([0, 0], initialZoom);
|
||||
|
||||
// Add OpenStreetMap tile layer
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: 'U Planet'
|
||||
//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'
|
||||
}).addTo(map);
|
||||
|
||||
// Create a clickable area for each grid cell
|
||||
|
|
Loading…
Reference in New Issue