WP Open Street Map Shortcode

Below, you’ll find a detailed guide on how to add the WP Open Street Map Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the WP Open Street Map Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the WP Open Street Map Plugin and the shortcodes it provides:

WP Open Street Map

"WP Open Street Map is a dynamic and user-friendly WordPress plugin. It allows users to embed and display interactive open street maps on their website, enhancing navigation and user engagement."

★★★☆✩ (8) Active Installs: 2000+ Tested with: 6.3.2 PHP Version: false

Included Shortcodes:

• [wp-osm]

WP Open Street Map [wp-osm] Shortcode

The wp-osm shortcode is used to display a specific OpenStreetMap on a WordPress page. It fetches map data based on the ‘id’ attribute provided. This shortcode queries the database for the map and its markers, then enqueues necessary scripts and styles. If the map exists, it’s rendered using the ‘map.tpl.php’ template, otherwise, an error message is returned.

Shortcode: [wp-osm]

Parameters

Here is a list of all possible wp-osm shortcode parameters and attributes:

• id – Denotes the specific identifier of the OpenStreetMap

Examples and Usage

Basic example – The shortcode displays a specific map by referencing the map ID.

[wp-osm id=1 /]

Advanced examples

Using the shortcode to display a map with specific markers by referencing the map ID. The map will load with the markers associated with the specified ID.

[wp-osm id=2 /]

Using the shortcode to display a map by referencing the map ID. If the map with the specified ID is not found, an error message will be displayed.

[wp-osm id=3 /]

PHP Function Code

In case you have difficulties debugging what causing issues with [wp-osm] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('wp-osm', 'display_wp_openstreetmap');

Shortcode PHP function:

function display_wp_openstreetmap($atts) {

	if(is_numeric($atts['id']))
	{
		global $wpdb;

		$maps_table = $wpdb->prefix . "wp_openstreetmap";
		$maps_markers_table = $wpdb->prefix . "wp_openstreetmap_markers";
		$q = "SELECT * FROM ".$maps_table." WHERE id = %d";
		$id_map = intval($atts['id']);
		$query = $wpdb->prepare( $q, $id_map);
		$map = $wpdb->get_row( $query );

		if($map)
		{
			$q = "SELECT * FROM ".$maps_table." WHERE id = %d";
			$query = $wpdb->prepare( $q, $id_map );
			$map = $wpdb->get_row( $query );
			$q = "SELECT * FROM ".$maps_markers_table." WHERE id_map = %d";
			$query = $wpdb->prepare( $q, $id_map );
			$map->markers = $wpdb->get_results( $query );

			//on inclut jquery
			wp_enqueue_script( 'jquery' );
			wp_enqueue_script( 'wp-openstreetmap-api',  plugins_url('js/OpenLayers/v6.5.0/build/ol.js', __FILE__)) ;
			wp_enqueue_script( 'wp-openstreetmap-js', plugins_url( 'js/front.js', __FILE__ ));
			wp_enqueue_style( 'wp-openstreetmapFrontStylesheet', plugins_url('css/front.css', __FILE__) );
			wp_enqueue_style( 'wp-openstreetmapPro-OL-CSS', plugins_url('js/OpenLayers/v6.5.0/css/ol.css', __FILE__));

			$html = '';

			ob_start();
			include(plugin_dir_path( __FILE__ ) . 'views/map.tpl.php');
			$html .= ob_get_clean();

			return $html;
		}	
		else
			return 'Map ID '.$id_map.' not found !';	

	}

}

Code file location:

wp-open-street-map/wp-open-street-map/wp_openstreetmap.php

Conclusion

Now that you’ve learned how to embed the WP Open Street Map Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.