good day dear Openstreetmap-experts,
i was working on the Nearby-Search that works on the developer-end of overpass-turbo:
we have got a solution:
the question is: well is it possible to integrate a nearby search functionality into my GitHub project page, that said: GitHub Pages, which hosts project pages, primarily serves static content, so we won’t be able to directly run server-side code like PHP (e…g. in the WordPress - for example in a WordPress-widget) to interact with APIs.
However, there is hope: i think that we can still achieve a similar functionality by using client-side languages like JavaScript to make requests to the Overpass API and display the results on our GitHub project page.
i guess that there some options would be like so: could this be a high-level overview of how we could approach it:
HTML/CSS: Create a structure and styling for our project page, including any elements needed for displaying the search results.
JavaScript: now we would have to write JavaScript code to handle user interactions, make requests to the Overpass API, and dynamically update the page with the retrieved data. we can use libraries like Leaflet.js for mapping functionalities if needed.
GitHub Pages Integration: we ought to add the HTML, CSS, and JavaScript files to our GitHub repository and configure: GitHub Pages to serve them as our project page.
Here’s a simplified example of how we might implement the JavaScript part to perform a nearby search using Overpass API:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nearby Schools Search</title>
<!-- Include any CSS files here -->
</head>
<body>
<h1>Nearby Schools</h1>
<div id="schoolList"></div>
<script>
// Function to perform nearby search
function nearbySchoolsSearch() {
var url = 'http://overpass-api.de/api/interpreter';
var data = '[out:json][timeout:25];(node["amenity"="school"](around:10000,48.1351,11.5820););out;';
fetch(url, {
method: 'POST',
body: data
})
.then(response => response.json())
.then(data => {
// Display search results
var schools = data.elements;
var schoolList = document.getElementById('schoolList');
schoolList.innerHTML = '<ul>';
schools.forEach(school => {
schoolList.innerHTML += '<li>' + school.tags.name + '</li>';
});
schoolList.innerHTML += '</ul>';
})
.catch(error => {
console.error('Error:', error);
});
}
// Call the nearbySchoolsSearch function when the page loads
window.onload = nearbySchoolsSearch;
</script>
</body>
</html>
This code creates a simple HTML page with a heading and a
Well the widget on my github-page retrieves nearby schools using Overpass API within a 10km radius of Munich’s coordinates (48.1351 latitude, 11.5820 longitude), and displays them in an unordered list. Well we may need to adjust the coordinates and then run it against the Overpass API query to fit even more specific requirements.
Do you have some additional ideas - what to add to the (logic).?