diff --git a/earth/index.html b/earth/index.html
index d7d0de3..548f3ed 100644
--- a/earth/index.html
+++ b/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}°=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();
- }
- });
@@ -100,18 +103,22 @@
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);
+ return new Promise((resolve, reject) => {
+ setTimeout(async function () {
+ try {
+ let two = await fetch(redirectURL);
+ const data = await two.json();
+ console.log(data);
+ resolve(data);
+ } catch (error) {
+ console.log('Fetch error (inside setTimeout):', error);
+ 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
- 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);
- }
- }
+///// UPPER THAN 0.01
}
- // 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
- }
- });
+// 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
+ }
+});
/////////////////
async function loadGridNumbers(myURL) {
@@ -294,26 +275,74 @@ if (deg <= 0.01) {
}
// 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);
- });
- }
+function overlayGridNumbers(rectangle, number) {
+ const latLng = rectangle.getBounds().getCenter();
+ const containerPoint = map.latLngToContainerPoint(latLng);
+
+ const numberElement = document.createElement('div');
+ numberElement.className = 'grid-number';
+ numberElement.textContent = number;
+ numberElement.style.position = 'absolute';
+ 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
- loadGridNumbers(zoneURL).then(gridNumbers => overlayGridNumbers(gridNumbers));
+// Load grid numbers and overlay them on the map
+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}°=${NSize}`;
+ window.location.href = url;
+ });
+
+ // Add the rectangle to the map and to the array
+ rectangle.addTo(map);
+ rectangles.push(rectangle);
+ }
+}