Add info from Astroport ZONE API
This commit is contained in:
parent
bdfa0a3082
commit
f023baeff8
|
@ -189,7 +189,7 @@
|
||||||
<textarea id="example_code" onclick="this.focus();this.select();"></textarea>
|
<textarea id="example_code" onclick="this.focus();this.select();"></textarea>
|
||||||
</div>
|
</div>
|
||||||
-->
|
-->
|
||||||
<button style="position: fixed; top: 10px; left: 10px;" onclick="document.getElementById('console').style.visibility = (document.getElementById('console').style.visibility === 'hidden' ? 'visible' : 'hidden');">(?)</button>
|
<button style="position: fixed; top: 10px; left: 10px;" onclick="document.getElementById('console').style.visibility = (document.getElementById('console').style.visibility === 'visible' ? 'hidden' : 'visible');">(?)</button>
|
||||||
|
|
||||||
<div id="console"> ___ <a href="https://zen.g1sms.fr" target="aframe">Discover ẐenCard</a> ___ <button onclick="document.getElementById('console').style.visibility = 'hidden';"> X </button>
|
<div id="console"> ___ <a href="https://zen.g1sms.fr" target="aframe">Discover ẐenCard</a> ___ <button onclick="document.getElementById('console').style.visibility = 'hidden';"> X </button>
|
||||||
<iframe name="aframe" id="aframe" src="https://pad.p2p.legal/p/UPlanet_HELP" width="100%" height="100%"></iframe>
|
<iframe name="aframe" id="aframe" src="https://pad.p2p.legal/p/UPlanet_HELP" width="100%" height="100%"></iframe>
|
||||||
|
|
|
@ -27,7 +27,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
background-color: #3498db;
|
background-color: #3498db;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
@ -35,6 +34,12 @@
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.grid-number {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
@ -48,6 +53,14 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
// 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 desiredImageWidthInKm = 11; // Now Is calculated from northEastLon - southWestLon
|
// const desiredImageWidthInKm = 11; // Now Is calculated from northEastLon - southWestLon
|
||||||
const tileSizeInPixels = 256;
|
const tileSizeInPixels = 256;
|
||||||
|
|
||||||
|
@ -63,17 +76,51 @@
|
||||||
return zoomLevel;
|
return zoomLevel;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to extract URL parameters
|
///////////////////////////////////////////////////////////////////////////////////
|
||||||
function getUrlParameter(name) {
|
// Extract the hostname (e.g., "https://ipfs.domain.tld" or "http://ipfs.localhost:8080")
|
||||||
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
|
var currentURL = new URL(window.location.href);
|
||||||
const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
|
var hostname = currentURL.hostname;
|
||||||
const results = regex.exec(location.search);
|
var port = currentURL.port;
|
||||||
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
|
var protocol = currentURL.protocol.split(":")[0];
|
||||||
|
// Check and replace the port if it's 8080
|
||||||
|
if (port === "8080") {
|
||||||
|
port = "1234";
|
||||||
}
|
}
|
||||||
|
var zHost = hostname.replace("ipfs", "astroport");
|
||||||
|
// Create the "station" variable with the specified format
|
||||||
|
var station = protocol + "://" + zHost + (port ? (":" + port) : "");
|
||||||
|
console.log(station)
|
||||||
|
//////////////////////////////////////////////////////////////// fetchAstroport
|
||||||
|
async function fetchAstroport(myURL) {
|
||||||
|
try {
|
||||||
|
let one = await fetch(myURL); // Gets a promise
|
||||||
|
var doc = await one.text();
|
||||||
|
var regex = /url='([^']+)/i; // Get response PORT
|
||||||
|
var redirectURL = doc.match(regex)[1];
|
||||||
|
|
||||||
|
console.log(redirectURL);
|
||||||
|
|
||||||
|
setTimeout(async function () {
|
||||||
|
try {
|
||||||
|
let two = await fetch(redirectURL);
|
||||||
|
const data = await two.json();
|
||||||
|
console.log(data);
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
console.log('Fetch error (inside setTimeout):', error);
|
||||||
|
}
|
||||||
|
}, 5000);
|
||||||
|
} catch (err) {
|
||||||
|
console.log('Fetch error:', err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
///////////////////////////////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
|
||||||
const defaultIPNS = '';
|
const defaultIPNS = '';
|
||||||
const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
|
const sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
|
||||||
console.log('sectorIPNS: /ipns/', sectorIPNS);
|
console.log('sectorIPNS: /ipns/', sectorIPNS);
|
||||||
|
|
||||||
if (sectorIPNS !== '') {
|
if (sectorIPNS !== '') {
|
||||||
const buttonContainer = document.createElement('div');
|
const buttonContainer = document.createElement('div');
|
||||||
buttonContainer.id = 'button-container'
|
buttonContainer.id = 'button-container'
|
||||||
|
@ -110,7 +157,6 @@
|
||||||
console.log('Lat:', southWestLat);
|
console.log('Lat:', southWestLat);
|
||||||
const southWestLon = parseFloat(getUrlParameter('southWestLon')) || defaultSouthWestLon;
|
const southWestLon = parseFloat(getUrlParameter('southWestLon')) || defaultSouthWestLon;
|
||||||
console.log('Lon:', southWestLon);
|
console.log('Lon:', southWestLon);
|
||||||
|
|
||||||
const deg = parseFloat(getUrlParameter('deg')) || defaultOffsetDegrees;
|
const deg = parseFloat(getUrlParameter('deg')) || defaultOffsetDegrees;
|
||||||
console.log('Offset:', deg);
|
console.log('Offset:', deg);
|
||||||
|
|
||||||
|
@ -142,22 +188,6 @@
|
||||||
|
|
||||||
const map = L.map('map').setView([centerLat, centerLon], zoomLevel);
|
const map = L.map('map').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);
|
|
||||||
|
|
||||||
// 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', {
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
attribution: 'U Planet'
|
attribution: 'U Planet'
|
||||||
}).addTo(map);
|
}).addTo(map);
|
||||||
|
@ -165,7 +195,6 @@
|
||||||
const gridSize = 10; // Number of rows and columns in the grid
|
const gridSize = 10; // Number of rows and columns in the grid
|
||||||
const NSize = deg / 10; // Size of each grid cell
|
const NSize = deg / 10; // Size of each grid cell
|
||||||
|
|
||||||
|
|
||||||
// Create a HTML element for displaying coordinates
|
// Create a HTML element for displaying coordinates
|
||||||
const coordinatesDisplay = document.getElementById('coordinates-display');
|
const coordinatesDisplay = document.getElementById('coordinates-display');
|
||||||
|
|
||||||
|
@ -196,24 +225,6 @@ if (deg <= 0.01) {
|
||||||
button.style.fontSize = '24px'; // Customize the font size
|
button.style.fontSize = '24px'; // Customize the font size
|
||||||
button.style.color = '#fff'; // Customize the font color
|
button.style.color = '#fff'; // Customize the font color
|
||||||
|
|
||||||
// Extract the hostname (e.g., "https://ipfs.domain.tld" or "http://ipfs.localhost:8080")
|
|
||||||
var currentURL = new URL(window.location.href);
|
|
||||||
var hostname = currentURL.hostname;
|
|
||||||
var port = currentURL.port;
|
|
||||||
var protocol = currentURL.protocol.split(":")[0];
|
|
||||||
|
|
||||||
// Check and replace the port if it's 8080
|
|
||||||
if (port === "8080") {
|
|
||||||
port = "1234";
|
|
||||||
}
|
|
||||||
|
|
||||||
var zHost = hostname.replace("ipfs", "astroport");
|
|
||||||
|
|
||||||
// Create the "station" variable with the specified format
|
|
||||||
var station = protocol + "://" + zHost + (port ? (":" + port) : "");
|
|
||||||
|
|
||||||
console.log(station)
|
|
||||||
|
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
const url = `${station}/?uplanet=@&zlat=${southWestLat}&zlon=${southWestLon}`;
|
const url = `${station}/?uplanet=@&zlat=${southWestLat}&zlon=${southWestLon}`;
|
||||||
window.location.href = url;
|
window.location.href = url;
|
||||||
|
@ -271,6 +282,37 @@ if (deg <= 0.01) {
|
||||||
});
|
});
|
||||||
|
|
||||||
/////////////////
|
/////////////////
|
||||||
|
async function loadGridNumbers(myURL) {
|
||||||
|
|
||||||
|
try {
|
||||||
|
const data = await fetchAstroport(myURL);
|
||||||
|
return data.gridNumbers || [];
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading grid numbers:', error);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to overlay grid numbers on the map
|
||||||
|
function overlayGridNumbers(gridNumbers) {
|
||||||
|
gridNumbers.forEach(({ lat, lon, number }) => {
|
||||||
|
const latLng = L.latLng(lat, lon);
|
||||||
|
const numberElement = document.createElement('div');
|
||||||
|
numberElement.className = 'grid-number';
|
||||||
|
numberElement.textContent = number;
|
||||||
|
numberElement.style.top = `${map.latLngToContainerPoint(latLng).y}px`;
|
||||||
|
numberElement.style.left = `${map.latLngToContainerPoint(latLng).x}px`;
|
||||||
|
document.getElementById('map').appendChild(numberElement);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const zquery = 'zone='+NSize+'&ulat='+southWestLat+'&ulon='+southWestLon; // Replace with your actual query parameters
|
||||||
|
const zoneURL = station+'/?' + zquery;
|
||||||
|
|
||||||
|
console.log('ZONE URL:', zoneURL);
|
||||||
|
|
||||||
|
// Load grid numbers and overlay them on the map
|
||||||
|
loadGridNumbers(zoneURL).then(gridNumbers => overlayGridNumbers(gridNumbers));
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in New Issue