add TW numbers on UPlanet

earth/index.html

@@ -27,39 +27,6 @@
         dragElement: $('#locations') // where do we catch the mouse drag
     });
     };
-
-    function getCoordinates() {
-            const addressInput = document.getElementById('address');
-            const address = addressInput.value;
-
-            // Replace spaces with '+' for the URL
-            const formattedAddress = address.replace(/ /g, '+');
-
-            // Make a request to the Nominatim API
-            fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${formattedAddress}`)
-                .then(response => response.json())
-                .then(data => {
-                    if (data.length > 0) {
-                        const latitude = data[0].lat;
-                        const longitude = data[0].lon;
-                        const lat = parseFloat(data[0].lat).toFixed(2);
-                        const lon = parseFloat(data[0].lon).toFixed(2);
-                        window.location.replace(`map_render.html?southWestLat=${lat}&southWestLon=${lon}&deg=0.01`);
-                    } else {
-                        document.getElementById('result').innerText = 'Coordinates not found. Clic on surrounding dots to zoom in.';
-                    }
-                })
-                .catch(error => {
-                    console.error('Error:', error);
-                    document.getElementById('result').innerText = 'An error occurred while fetching coordinates.';
-                });
-        }
-        // Add event listener for the "Enter" key
-        document.getElementById('address').addEventListener('keypress', function (e) {
-            if (e.key === 'Enter') {
-                getCoordinates();
-            }
-        });
     </script>
 
    <style>
@@ -241,6 +208,41 @@
         buttonContainer.appendChild(button);
         document.body.appendChild(buttonContainer);
     }
+
+
+    function getCoordinates() {
+            const addressInput = document.getElementById('address');
+            const address = addressInput.value;
+
+            // Replace spaces with '+' for the URL
+            const formattedAddress = address.replace(/ /g, '+');
+
+            // Make a request to the Nominatim API
+            fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${formattedAddress}`)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.length > 0) {
+                        const latitude = data[0].lat;
+                        const longitude = data[0].lon;
+                        const lat = parseFloat(data[0].lat).toFixed(2);
+                        const lon = parseFloat(data[0].lon).toFixed(2);
+                        window.location.replace(`map_render.html?southWestLat=${lat}&southWestLon=${lon}&deg=0.01`);
+                    } else {
+                        document.getElementById('result').innerText = 'Coordinates not found. Clic on surrounding dots to zoom in.';
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    document.getElementById('result').innerText = 'An error occurred while fetching coordinates.';
+                });
+        }
+        // Add event listener for the "Enter" key
+        document.getElementById('address').addEventListener('keypress', function (e) {
+            if (e.key === 'Enter') {
+                getCoordinates();
+            }
+        });
+
 </script>
 
 </body></html>

earth/map_render.html

@@ -35,11 +35,14 @@
         cursor: pointer;
     }
     .grid-number {
-      position: absolute;
+        position: absolute;
-      font-size: 12px;
+        font-size: 16px;
-      font-weight: bold;
+        font-weight: bold;
-      color: #fff;
+        color: #fff;
+        z-index: 1300;
+
     }
+
 </style>
 
 </head>
@@ -100,18 +103,22 @@
 
         console.log(redirectURL);
 
-        setTimeout(async function () {
+        return new Promise((resolve, reject) => {
-          try {
+          setTimeout(async function () {
-            let two = await fetch(redirectURL);
+            try {
-            const data = await two.json();
+              let two = await fetch(redirectURL);
-            console.log(data);
+              const data = await two.json();
-            return data;
+              console.log(data);
-          } catch (error) {
+              resolve(data);
-            console.log('Fetch error (inside setTimeout):', error);
+            } catch (error) {
-          }
+              console.log('Fetch error (inside setTimeout):', error);
-        }, 5000);
+              reject(error);
+            }
+          }, 3000);
+        });
       } catch (err) {
         console.log('Fetch error:', err);
+        return Promise.reject(err);
       }
     }
 ///////////////////////////////////////////////////////////////////////////////////
@@ -244,42 +251,16 @@ if (deg <= 0.01) {
     coordinatesDisplay.textContent = `Latitude: ${lat}, Longitude: ${lng}`;
   });
 
-  // Create a clickable rectangle for each grid cell
+///// UPPER THAN 0.01
-  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}&deg=${NSize}`;
-        window.location.href = url;
-      });
-
-      // Add the rectangle to the map
-      rectangle.addTo(map);
-    }
-  }
 }
 
-    // Add a click event listener to the map container
+// Add a click event listener to the map container
-    document.getElementById('map-container').addEventListener('click', (event) => {
+document.getElementById('map-container').addEventListener('click', (event) => {
-      const isInsideRectangle = event.target.classList.contains('clickable-area');
+  const isInsideRectangle = event.target.classList.contains('clickable-area');
-      if (!isInsideRectangle) {
+  if (!isInsideRectangle) {
-        history.back(); // Trigger browser's back functionality
+    history.back(); // Trigger browser's back functionality
-      }
+  }
-    });
+});
 
 /////////////////
   async function loadGridNumbers(myURL) {
@@ -294,26 +275,74 @@ if (deg <= 0.01) {
   }
 
   // Function to overlay grid numbers on the map
-  function overlayGridNumbers(gridNumbers) {
+function overlayGridNumbers(rectangle, number) {
-    gridNumbers.forEach(({ lat, lon, number }) => {
+    const latLng = rectangle.getBounds().getCenter();
-      const latLng = L.latLng(lat, lon);
+    const containerPoint = map.latLngToContainerPoint(latLng);
-      const numberElement = document.createElement('div');
+
-      numberElement.className = 'grid-number';
+    const numberElement = document.createElement('div');
-      numberElement.textContent = number;
+    numberElement.className = 'grid-number';
-      numberElement.style.top = `${map.latLngToContainerPoint(latLng).y}px`;
+    numberElement.textContent = number;
-      numberElement.style.left = `${map.latLngToContainerPoint(latLng).x}px`;
+    numberElement.style.position = 'absolute';
-      document.getElementById('map').appendChild(numberElement);
+    numberElement.style.fontSize = '16px';
-    });
+    numberElement.style.fontWeight = 'bold';
-  }
+    numberElement.style.color = 'red';
+    numberElement.style.top = `${containerPoint.y}px`;
+    numberElement.style.left = `${containerPoint.x}px`;
+
+    document.getElementById('map-container').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
+// Load grid numbers and overlay them on the map
-  loadGridNumbers(zoneURL).then(gridNumbers => overlayGridNumbers(gridNumbers));
+loadGridNumbers(zoneURL).then(gridNumbers => {
+  gridNumbers.forEach(({ lat, lon, number }) => {
+    const latLng = L.latLng(lat, lon);
 
+    // Find the corresponding rectangle
+    const matchingRectangle = rectangles.find(rectangle =>
+      rectangle.getBounds().contains(latLng)
+    );
+
+    if (matchingRectangle) {
+      overlayGridNumbers(matchingRectangle, number);
+    }
+  });
+});
+
+// Create a clickable rectangle for each grid cell
+const rectangles = [];
+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}&deg=${NSize}`;
+      window.location.href = url;
+    });
+
+    // Add the rectangle to the map and to the array
+    rectangle.addTo(map);
+    rectangles.push(rectangle);
+  }
+}
   </script>
 </body>
 </html>