use the otter-blocks for the creation of a special purpose-block

good evening dear otter-experts,

i am deeply fascinated bout the “Otter is a Gutenberg Blocks page builder plugin” that adds extra functionality to the WordPress Block Editor (also known as Gutenberg) for a better page-building experience without the need for traditional page builders like Elementor and Divi.

well i have to confess – i really am impressed and i like your otter-plugin and all the awesome features i see.
btw: i want to perform a retrieval to the endpoint of OSM – eg like described below. And yes: i want to use the Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE.

see my approach:

i want to perform a retrieval-request to the openstreetmap api – endpoint: like so : https://overpass-turbo.eu/s/1Qei

[out:csv(::id,::type,::lon,::lat,amenity,name,"addr:postcode","addr:city","addr:street","addr:housenumber","contact:website",website,"contact:email")]
[timeout:600];
rel[boundary=administrative][admin_level=6][name="München"] -> .city;
(nwr[amenity=hospital][name](around.city:200);
nwr[amenity=school][name](around.city:200);
nwr[amenity=church][name](around.city:200);
nwr[amenity=childcare][name](around.city:200);
nwr[amenity=nursing_home][name](around.city:200););
out center;

with the following approach

<?php
/*
Plugin Name: ACF Schools Widget
Description: Displays nearby schools using Overpass Turbo and ACF.
Version: 1.0
Author: foo bar
*/

// Exit if accessed directly
if (!defined('ABSPATH')) exit;

// Include ACF
include_once(plugin_dir_path(__FILE__) . 'acf/acf.php');

// Register ACF fields
function register_acf_fields() {
    if (function_exists('acf_add_local_field_group')) {
        acf_add_local_field_group(array(
            'key' => 'group_1',
            'title' => 'Nearby Schools Widget',
            'fields' => array(
                array(
                    'key' => 'field_1',
                    'label' => 'Latitude',
                    'name' => 'latitude',
                    'type' => 'number',
                    'required' => 1,
                ),
                array(
                    'key' => 'field_2',
                    'label' => 'Longitude',
                    'name' => 'longitude',
                    'type' => 'number',
                    'required' => 1,
                ),
                array(
                    'key' => 'field_3',
                    'label' => 'Radius (km)',
                    'name' => 'radius',
                    'type' => 'number',
                    'required' => 1,
                ),
            ),
            'location' => array(
                array(
                    array(
                        'param' => 'post_type',
                        'operator' => '==',
                        'value' => 'page',
                    ),
                ),
            ),
        ));
    }
}
add_action('acf/init', 'register_acf_fields');

// Enqueue necessary scripts
function acf_schools_widget_enqueue_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'acf_schools_widget_enqueue_scripts');

// Shortcode to display schools
function display_nearby_schools($atts) {
    $latitude = get_field('latitude');
    $longitude = get_field('longitude');
    $radius = get_field('radius');

    if (!$latitude || !$longitude || !$radius) {
        return 'Please provide latitude, longitude, and radius.';
    }

    // Overpass API URL
    $query = '[out:json][timeout:25];(node["amenity"="school"](around:' . ($radius * 1000) . ',' . $latitude . ',' . $longitude . '););out body;>;out skel qt;';
    $url = 'https://overpass-api.de/api/interpreter?data=' . urlencode($query);

    // Fetch data from Overpass API
    $response = wp_remote_get($url);
    if (is_wp_error($response)) {
        return 'Unable to retrieve data.';
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    if (empty($data['elements'])) {
        return 'No schools found in the specified area.';
    }

    // Display data
    $output = '<ul class="nearby-schools">';
    foreach ($data['elements'] as $element) {
        if (isset($element['tags']['name'])) {
            $output .= '<li>';
            $output .= esc_html($element['tags']['name']);
            if (isset($element['tags']['website'])) {
                $output .= ' - <a href="' . esc_url($element['tags']['website']) . '" target="_blank">' . esc_html($element['tags']['website']) . '</a>';
            }
            $output .= '</li>';
        }
    }
    $output .= '</ul>';

    return $output;
}
add_shortcode('nearby_schools', 'display_nearby_schools');

which ought to give back the following results that i want to display. on the blocks:: which gives back the following – which i want to display on the widget of my wordpress-site – or let us say – i only wanna display a small amount of the data.. of this following:

@id	@type	@lon	@lat	amenity	name	addr:postcode	addr:city	addr:street	addr:housenumber	contact:website	website	contact:email
703266518	node	11.5746643	48.1387135	school	EAM School of International Business	80331	München	Frauenplatz	11	https://eam-muenchen.com/		
1187338076	node	11.6800258	48.0835510	childcare	Little Giants	81739	München	Asenweg	18		https://www.littlegiants.de/kitas/kita/muenchen-waldperlach/	
1187338193	node	11.6779495	48.0840912	childcare	Kinderhaus Waldperlach	81739	München	Asenweg	2		https://www.kinderhaus-muenchen.de	
1719550854	node	11.5115441	48.0586595	school	Erzbisch?fliche Pater-Rupert-Mayer-Volksschule Pullach					https://www.prmvs.de/index.php?id=19	https://www.prmvs.de/index.php?id=19	[email protected]
1719550857	node	11.5128669	48.0605418	school	Pater-Rupert-Mayer-Realschule						https://www.prmrs.de/index.php?id=26	

well i have to say – i will shorten the amount od data i think less is more. Well above all
i guess that i can do such – with the otter-blocks – i am sure that this will be possible

look forward to your ideas