A widget on my Github-Page: performing a Neaby-search on the openstreetmap-endpoint: around x find y

General talk
1

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

element where the search results will be displayed. The JavaScript code uses the Fetch API to make a request to the Overpass API, retrieves the nearby schools, and dynamically updates the page with the results.

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).?

2

This code is vulnerable to a XSS attack.

For example if the name of a school in OSM is changed to <script>alert("PWND")</script> then your page will happily inject the JS into the page.
A naive solution to this is to just remove all “<” and “>” from the school.tags.name

1 Like