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
|
||||
});
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<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}°=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>
|
||||
|
|
|
|||
|
|
@ -35,11 +35,14 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
.grid-number {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
z-index: 1300;
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in New Issue