add TW numbers on UPlanet
This commit is contained in:
parent
f023baeff8
commit
f77cdd6281
|
@ -27,39 +27,6 @@
|
||||||
dragElement: $('#locations') // where do we catch the mouse drag
|
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();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -241,6 +208,41 @@
|
||||||
buttonContainer.appendChild(button);
|
buttonContainer.appendChild(button);
|
||||||
document.body.appendChild(buttonContainer);
|
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}°=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>
|
</script>
|
||||||
|
|
||||||
</body></html>
|
</body></html>
|
||||||
|
|
|
@ -36,10 +36,13 @@
|
||||||
}
|
}
|
||||||
.grid-number {
|
.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>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
@ -100,18 +103,22 @@
|
||||||
|
|
||||||
console.log(redirectURL);
|
console.log(redirectURL);
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
setTimeout(async function () {
|
setTimeout(async function () {
|
||||||
try {
|
try {
|
||||||
let two = await fetch(redirectURL);
|
let two = await fetch(redirectURL);
|
||||||
const data = await two.json();
|
const data = await two.json();
|
||||||
console.log(data);
|
console.log(data);
|
||||||
return data;
|
resolve(data);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('Fetch error (inside setTimeout):', error);
|
console.log('Fetch error (inside setTimeout):', error);
|
||||||
|
reject(error);
|
||||||
}
|
}
|
||||||
}, 5000);
|
}, 3000);
|
||||||
|
});
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.log('Fetch error:', err);
|
console.log('Fetch error:', err);
|
||||||
|
return Promise.reject(err);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
///////////////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////////////
|
||||||
|
@ -244,42 +251,16 @@ if (deg <= 0.01) {
|
||||||
coordinatesDisplay.textContent = `Latitude: ${lat}, Longitude: ${lng}`;
|
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}°=${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) {
|
async function loadGridNumbers(myURL) {
|
||||||
|
@ -294,26 +275,74 @@ if (deg <= 0.01) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to overlay grid numbers on the map
|
// 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');
|
const numberElement = document.createElement('div');
|
||||||
numberElement.className = 'grid-number';
|
numberElement.className = 'grid-number';
|
||||||
numberElement.textContent = number;
|
numberElement.textContent = number;
|
||||||
numberElement.style.top = `${map.latLngToContainerPoint(latLng).y}px`;
|
numberElement.style.position = 'absolute';
|
||||||
numberElement.style.left = `${map.latLngToContainerPoint(latLng).x}px`;
|
numberElement.style.fontSize = '16px';
|
||||||
document.getElementById('map').appendChild(numberElement);
|
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 zquery = 'zone='+NSize+'&ulat='+southWestLat+'&ulon='+southWestLon; // Replace with your actual query parameters
|
||||||
const zoneURL = station+'/?' + zquery;
|
const zoneURL = station+'/?' + zquery;
|
||||||
|
|
||||||
console.log('ZONE URL:', zoneURL);
|
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}°=${NSize}`;
|
||||||
|
window.location.href = url;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add the rectangle to the map and to the array
|
||||||
|
rectangle.addTo(map);
|
||||||
|
rectangles.push(rectangle);
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue