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); + } +}