DEV Community

hubs
hubs

Posted on

wordpress-plugin (widget) that performs a Neaby-search on the openstreetmap-endpoint: around x find y

i am about to create a wordpress-plugin that offers the output of the following data ... the data of a a Neaby-search:

can we create a quewry that shows up all the schools that are in the near - in other words

example: what i am after. how to create a request to find all the schools - in the area of - let us say munich - in a radius of 10 km for example!?

a output that shows all the schools around a certain point - or in other words; all in Munich - in a area /(radius) of let us say 10 kilometers can we create a query that works on Overpass-turbo.eu

eg like so: first of all see the intened osm - nearby-search that runs against the overpass-Turbo.eu -API

`[out:csv(::id,::type,::lon,::lat,amenity,name,"addr:postcode","addr:city","addr:street","addr:housenumber","contact:website",website,"contact:email")]
[timeout:600];

area[name="München"];
nwr(area)[name="Marienplatz"];
nwr["amenity"="school"](around:10000);
out center;`
Enter fullscreen mode Exit fullscreen mode

it gives back the results:

`@id @type   @lon    @lat    amenity name    addr:postcode   addr:city   addr:street addr:housenumber    contact:website website contact:email
312793352   node    11.5815046  48.1322045  school  Schulverbund München    80469   München Kohlstraße  5       https://www.schulverbund.de/    
703266518   node    11.5746643  48.1387135  school  EAM School of International Business                    https://eam-muenchen.com/       
1096318121  node    11.5827303  48.1368214  school  Otto-Falckenberg-Schule 80539   München Stollbergstraße 7a      https://www.otto-falckenberg-schule.de/ 
1096318127  node    11.5822067  48.1376239  school  Otto-Falckenberg-Schule 80539   München Falckenbergstraße   2       https://www.otto-falckenberg-schule.de/ 
1142514805  node    11.5665710  48.1353750  school  Evangelisches Bildungszentrum   80331   München Herzog-Wilhelm-Straße   24  https://www.stadtakademie-muenchen.de/      stadtakademie.muenchen@elkb.de
1576527684  node    11.5728245  48.1336093  school  Theresia-Gerhardinger-Grundschule am Anger                      https://gs-am-anger.de/ 
1576528339  node    11.5721671  48.1333479  school  Theresia-Gerhardinger-Gymnasium am Anger                        https://www.tggaa.de/   
2493656150  node    11.5814603  48.1366835  school  Förderschule an der Herrnstraße 80539   München Herrnstraße 21      https://stadt.muenchen.de/service/info/sonderpaedagogisches-foerderzentrum-muenchen-mitte-2-herrnstr-21/1060084/    
2654727020  node    11.5812823  48.1365482  school  Grundschule an der Herrnstraße`
Enter fullscreen mode Exit fullscreen mode

well i think that firstly i should to take care that i have to create the WordPress Plugin Structure: Set up the basic structure of your WordPress plugin, including a main PHP file and any additional files or folders you may need.

Register the Widget: then i need to define a certain kind of a custom widget class that extends the WP_Widget class provided by WordPress.

Implement the Widget Logic: Within your custom widget class, implement the logic to retrieve data from the Overpass API and format it for display.

Display the Widget: Register a callback function to output the widget content, including any HTML markup necessary to display the data.

Here's a basic outline of how you might approach each step:
`
<?php
/*
Plugin Name: osm Nearby Schools Widget
Description: Widget to display nearby schools using Overpass API.
Version: 0.9
Author: osm-fan
*/

// Step 2: well - first of all - we ought to register the Widget propperly
class Nearby_Schools_Widget extends WP_Widget {
    // Constructor
    public function __construct() {
        parent::__construct(
            'nearby_schools_widget', // Base ID
            'Nearby Schools Widget', // Name
            array( 'description' => 'Displays nearby schools using Overpass API' ) // Args
        );
    }

    // Step 4: we ought to display the Widget
    public function widget( $args, $instance ) {
        // Widget output
        echo $args['before_widget'];
        echo $args['before_title'] . 'Nearby Schools' . $args['after_title'];
        echo '<ul>';

        // Step 3: Implement the Widget Logic
        $schools = $this->get_nearby_schools();
        foreach ($schools as $school) {
            echo '<li>' . $school->name . '</li>';
        }

        echo '</ul>';
        echo $args['after_widget'];
    }

    // Step 3: here we  implement the Widget Logic
    private function get_nearby_schools() {
        $url = 'http://overpass-api.de/api/interpreter';
        $data = array(
            'data' => '[out:json][timeout:25];(node["amenity"="school"](around:10000,48.1351,11.5820););out;',
        );

        $response = wp_remote_post( $url, array(
            'body' => $data,
        ) );

        if ( is_wp_error( $response ) ) {
            return array();
        }

        $body = wp_remote_retrieve_body( $response );
        $schools = json_decode( $body );

        return $schools->elements;
    }
}

// Step 2: Register the Widget
function register_nearby_schools_widget() {
    register_widget( 'Nearby_Schools_Widget' );
}
add_action( 'widgets_init', 'register_nearby_schools_widget' );
Enter fullscreen mode Exit fullscreen mode

`

hmm - well - i think that this could be a first step into the direction: i think that this code sets up a WordPress plugin that creates a widget called "OSM-Nearby Schools Widget"

Well the widget 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 plugin(logic)?

Top comments (0)