Wordpress point geojson REST as leaflet map layer

Looking for a way to be able to display points on a map, but at the same time giving an interface to users to manipulate the geographical points I have tried several approaches that was available to be.

The simplest and best by far for the simple tasks that most of the times I had to deal with is to take advantage of the WordPress REST API to build a custom geojson feed of the points that I want to display in a map. Doing so I can give access to WordPress users to control the spatial data by adding, editing or deleting the data. This geojson feed will be added in a leaflet map and displayed in the same way a postgis layer is being displayed. This leaflet map is an adaptation of the Katla geopark map where the geojson file is produced from a Postgis enabled Postgresql database it is a custom JSON feed from a WordPress website.

The WordPress website has a custom content type that is called Teaching Centers and in this content type, custom fields have been created with the use if the Advanced Custom Fields plugin. These fields are helping describe the Teaching Center and are used for building the properties of each geojson geometry. This will also impact the Attribute table of the geojson in the case we import it into a desktop GIS application.

The first step on achieving this is to create and customize a REST json feed from the content type “Teaching Centers”. This json feed will appear in a registered url with the use of the register_rest_route with the rest_api_init hook. Like so we will create a function that will register the route and build the Array to be served as json object in this route using WP_Query.

The below code will be different at the end since the properties of the geojson will be more complex and there will be the ability to filter data according to the language. This geojson feed will be used for making the maps of the Teaching Centers and the map of each one of the individual details pages of the Teaching Centers by using the parameter theid.



add_action('rest_api_init', 'customize_tott_map_rest');

// Create the route on REST API INIT in the following url
// https://tott.uoc.gr/wp-json/geo/v1/tottmap 
// and execute geo_tottmapSearch

function customize_tott_map_rest() {
    register_rest_route("geo/v1","tottmap",array(
        'methods' => WP_REST_SERVER::READABLE,
        'callback' => 'geo_tottmapSearch'
    ));
}

function geo_tottmapSearch($data) {  
// for multilingual content filter. It is not used at this stage  
    if ( isset($data['language'])) {
        $thelang=sanitize_text_field($data['language']);
    } else {
        $thelang = "";
    }   
    
    $mappartners = new WP_Query(array(
        'post_type' => 'mappartners',
        'posts_per_page' => -1,
        //'lang' => $thelang,
		// s will handle the search text if it exists, the url will look like this https://tott.uoc.gr/wp-json/geo/v1/tottmap/?search=search some text 
        's' => sanitize_text_field($data['search']),
		 // p will handle the post id if it exists https://tott.uoc.gr/wp-json/geo/v1/tottmap/?theid=1353
        'p' => $data['theid']
    ));
// Declare the arrays that will be used for building the custom geojson 
    $geoapi = array();
    $features=array();
	// First ingredient of the geojson point feature collection 
    $geoapi['type']="FeatureCollection";    

    while ($teachingcenters->have_posts()) {
        $teachingcenters->the_post();
        $theid = get_the_id();
     
// Set the geometry *****************************************
        $position=get_field('point_position');

        //$lon=$position['lng'];
        //$lat=$position['lat'];
		
 // For the position in this case an ACF Openstreet Map field that return Raw values was used 
 // https://wordpress.org/plugins/acf-openstreetmap-field/ 
 // For this Open street map field the position is stored in Markers (more of one can exist), however I am using just the first one // From the first marker we store the coordinates (Projection is EPSG:4326)
        
        $lon=$position['markers'][0]['lng'];
        $lat=$position['markers'][0]['lat'];
		
// Declare and build the geometry point array 

        $geom=array();       
        $geom["type"]="Point";
        $geom["coordinates"]=array($lon,$lat);
		
 // Set the Properties of the point feature *************************
 
        $properties = array();
        $properties['id']=$theid;
        $properties['title']=get_the_title();        
        $properties['url']=get_the_permalink($theid);        
        $properties['image_path']=get_the_post_thumbnail_url($theid);
        $properties['geometry']=$position;
        array_push($features, array(
		// Push geojson type
            'type' => 'Feature',
		// Push geojson geometry
            'geometry' => $geom,
		// Push geojson properties		
            'properties' => $properties
        ));
    }
    $geoapi['features']=$features;
    wp_reset_postdata();
    return $geoapi;
}