Add info from Astroport ZONE API

earth/index.html

@@ -189,7 +189,7 @@
           <textarea id="example_code" onclick="this.focus();this.select();"></textarea>
         </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>
                 <iframe name="aframe" id="aframe" src="https://pad.p2p.legal/p/UPlanet_HELP" width="100%" height="100%"></iframe>

earth/map_render.html

@@ -27,7 +27,6 @@
         width: 100%;
         height: 100%;
     }
-
     .button {
         background-color: #3498db;
         color: #fff;
@@ -35,6 +34,12 @@
         border: none;
         cursor: pointer;
     }
+    .grid-number {
+      position: absolute;
+      font-size: 12px;
+      font-weight: bold;
+      color: #fff;
+    }
 </style>
 
 </head>
@@ -48,6 +53,14 @@
 
 <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 tileSizeInPixels = 256;
 
@@ -63,17 +76,51 @@
       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 sectorIPNS = getUrlParameter('ipns') || defaultIPNS;
     console.log('sectorIPNS: /ipns/', sectorIPNS);
+
     if (sectorIPNS !== '') {
         const buttonContainer = document.createElement('div');
         buttonContainer.id = 'button-container'
@@ -110,7 +157,6 @@
     console.log('Lat:', southWestLat);
     const southWestLon = parseFloat(getUrlParameter('southWestLon')) || defaultSouthWestLon;
     console.log('Lon:', southWestLon);
-
     const deg = parseFloat(getUrlParameter('deg')) || defaultOffsetDegrees;
     console.log('Offset:', deg);
 
@@ -142,22 +188,6 @@
 
     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', {
       attribution: 'U Planet'
     }).addTo(map);
@@ -165,7 +195,6 @@
 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');
 
@@ -196,24 +225,6 @@ if (deg <= 0.01) {
   button.style.fontSize = '24px'; // Customize the font size
   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', () => {
     const url = `${station}/?uplanet=@&zlat=${southWestLat}&zlon=${southWestLon}`;
     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>
 </body>