Skip to content

Releases: gsarig/ootb-openstreetmap

Release 2.8.2

02 Jun 22:10
Compare
Choose a tag to compare

Version 2.8.2 is a follow-up to the new feature of the "Location" custom field, introduced in version 2.8.0, following the request on #49. It adds two new hooks, which allow you to fully change the contents of a marker's modal box as well as its icon, when the new "OpenStreetMap from custom fields" block is used. This can be very powerful, as it allows you to fully modify the content displayed in your markers' modals, even using your own custom fields to display extra information. The hooks are:

ootb_cf_modal_content

Allows you to change the content of the modal that appears when you query posts based on their "Location" custom fields. By default, it will display the value set in the Address field. For example, the following code will display the post's title, thumbnail, excerpt and a link to the post:

add_filter( 'ootb_cf_modal_content', 'my_modal_content', 10, 2 );

function my_modal_content( $address, $post_id ) {

	return sprintf(
		'<div>
			<h3>%1$s</h3>
			<figure>%2$s</figure>
			<p>%3$s</p>
			<p><a href="%4$s">View post</a></p>
		</div>',
		get_the_title( $post_id ),
		get_the_post_thumbnail( $post_id, 'thumbnail' ),
		has_excerpt( $post_id ) ? get_the_excerpt( $post_id ) : $address,
		get_the_permalink( $post_id )
	);
}

ootb_cf_marker_icon

Allows you to change the marker icon for posts that have a "Location" custom field. By default, it will use the default marker. For example, the following code will use a custom marker for a post with ID 123:

add_filter( 'ootb_cf_marker_icon', 'my_marker_icon', 10, 2 );

function my_marker_icon( $icon_url, $post_id ){
	if( 123 === $post_id ) {
		$icon_url = 'https://example.com/my-marker.jpg';
	}
	return $icon_url;
}

For the most up to date info about the available hooks, see the 🪝hooks section.

Release 2.8.1

26 May 22:15
Compare
Choose a tag to compare

Release 2.8.1 is a follow-up fix for Release 2.8.0.

Release 2.8.0

26 May 22:14
Compare
Choose a tag to compare

Custom field support

The highlight of version 2.8.0 is the support of a "Location" custom field, which allows you to store a post's or a post type's location. The data are stored following the official guidelines.

image

You can enable the custom field via Settings → OOTB OpenStreetMap → Custom Fields:

image

To display a map with all the locations, a new block "OpenStreetMap from custom fields" has been created:

image

Bugfixes

Other fixes and improvements introduced in version 2.8.0 include:

  • [FIX] Fixes a PHP warning (see the report).
  • [FIX] Fixes a bug which caused an editor crash (see the report).
  • [FIX] Fixes an issue where the plugin was triggering unnecessary post updates.
  • [MAINTENANCE] Updates the build scripts and the plugin's assets.

Release 2.7.2

03 Mar 22:45
Compare
Choose a tag to compare

Version 2.7.2 adds support for Mapbox styles (see #42). You can find the style URL on Mapbox Studio. There, use the "Share" button, and under "Developer resources", copy the "Style URL". It should look like that: mapbox://styles/username/style-id.
image

You can declare a global style on the plugin's settings (Settings → OOTB OpenStreetMap), to be used as a default for all the maps, or you can set a custom style for each individual map, by using the block's settings panel.

To use the feature, you need to have a valid Mapbox API key.

Release 2.6.0

28 Jan 22:24
Compare
Choose a tag to compare

Version 2.6.0 adds the option to query maps: This allows you to create a map consisting of other maps, added on other posts or post types. This can be quite powerful when, for example, you have a custom post type for "Places" with each place having its own map, and you want to dynamically gather-up all the places on a single map. A shortcode has also been added as an alternative way to use this feature.

query-block-ezgif com-video-to-gif-converter

FAQ

How can I query maps from other posts or post types?

On the block's side panel, Select the "Map data" panel and click on the "Fetch locations" button. This will automatically retrieve on the frontend all the markers from your posts (you can also select a specific post type from the dropdown). The block will be locked from editing, as the markers will be dynamically retrieved from the selected posts. If you don't want that, there is a "Stop syncing" button that will unlock the block, drop the markers on the map and allow you to edit.

How can I use the shortcode?

The shortcode [ootb_query] allows you to display a dynamic map, which retrieves markers from other posts or post types. Just add it to a post or page and you're good to go. By default, it will fetch the markers from the 100 most recent posts. The shortcode supports the following attributes:

  • post_type: (Optional) The type of post to query. By default, it is set to post.
  • posts_per_page: (Optional) The number of posts to be displayed on page. Default value is 100.
  • post_ids: (Optional) Comma-separated IDs of the posts to include in the query.
  • height: (Optional) The desired height for the map. Default value is empty, which falls back to 400px.
  • provider: (Optional) Specifies the map provider. Options are: openstreetmap, mapbox and stamen. The default value is an empty string which falls back to openstreetmap.
  • maptype: (Optional) Specifies the type of map. Options are: markers, polygon and polyline. The default value is an empty string, which will fall back to markers.
  • touchzoom: (Optional) If set, touch zoom will be enabled on the map. It can be either true or false. The default value is an empty string, which falls back to true.
  • scrollwheelzoom: (Optional) If set, enables zooming on the map with mouse scroll wheel. It can be either true or false. The default value is an empty string, which falls back to true.
  • dragging: (Optional) If set, dragging is enabled on the map. It can be either true or false. The default value is an empty string, which falls back to true.
  • doubleclickzoom: (Optional) If set, allows zooming in on the map with a double click. It can be either true or false. The default value is an empty string, which falls back to true.
  • marker: (Optional) Specifies the marker for the map. This should correspond to the URL of the image that you want to use as the marker's icon (example: https://www.example.com/my-custom-icon.png). The default value is an empty string, which retrieves the default marker.

Here's an example of how you can use it:

[ootb_query post_type="post" post_ids="1,2,3,4" height="400px" provider="mapbox" maptype="polygon" touchzoom="true" scrollwheelzoom="true" dragging="true" doubleclickzoom="true" marker="https://www.example.com/my-custom-icon.png"]

I want more control. Are there any hooks that I could use?

Glad you asked! There are a few hooks that you can use to further customize the plugin's behavior. Here they are:

  • ootb_query_post_type: Allows you to change the post type that the plugin will query for markers. By default, it is set to post. You can pass multiple post types as an array. Example:
add_filter( 'ootb_query_post_type', function() { return array( 'post', 'page' ); } );
  • ootb_query_posts_per_page: Allows you to change the number of posts that the plugin will query for markers. By default, it is set to 100. Example:
add_filter( 'ootb_query_posts_per_page', function() { return 500; } );
  • ootb_query_extra_args: Allows you to add extra arguments to the query that the plugin will use to retrieve markers. By default, it is set to an empty array. Example:
  add_filter(
     'ootb_query_extra_args',
     function() {
        return [
           'tax_query' => [
           [
              'taxonomy' => 'people',
              'field' => 'slug',
              'terms' => 'bob'
           ]
        ];
     }
  );

Keep in mind that the extra args will be merged with the default ones, so you don't have to worry about overriding them. In fact, the args that are required for the query to work, cannot be overridden.

Release 2.5.0

30 Dec 00:06
Compare
Choose a tag to compare

Version 2.5.0 introduces OpenAI integration, which allows you to add markers by using commands in natural language. To use, you will need to create an account to OpenAI and get an API key. Then, go to the plugin’s settings page and paste your key there. After that, you can start adding markers by using commands in natural language.

Just say “please” to activate (e.g. “Please, show me where GOT was filmed”). Please keep in mind, though, that it’s like asking ChatGPT: the answers you get might not always be 100% reliable, and you should always double-check to confirm their accuracy. Read more.

Demo GIF

Release 2.4.1

04 Nov 20:50
Compare
Choose a tag to compare

Version 2.4.1 fixes a bug which caused the "delete" button to remove the wrong marker (see the bug report).

Also, it bumps compatibility to support WordPress 6.4, and updates some build scripts.

Release 2.4.0

26 Mar 00:11
Compare
Choose a tag to compare

Version 2.4.0 adds an option to prevent the default map scroll/touch behaviours to make it easier for users to navigate in a page (pretty much like in Google Maps).

image

The option is deactivated by default, to keep the default Leaflet.js functionality, and avoid loading an additional script. You might want to activate it, though, as it prevents users from getting trapped on the map when scrolling a long page.

image

The new feature utilizes leaflet-gesture-handling. It will auto detect a user's language from the browser setting and show the appropriate translation.

However if you wish to override this, you can set your own text, using the ootb_gesture_handling_options filter as shown below (you must specify text for touch, scroll and scrollMac):

add_filter( 
	'ootb_gesture_handling_options', 
	function () {
		return [
			'text'     => [
				'touch'     => 'Hey there, use two fingers to move the map',
				'scroll'    => 'Hey there, use ctrl + scroll to zoom the map',
				'scrollMac' => 'Hey there, use \u2318 + scroll to zoom the map',
			],
			'locale'   => 'en', // set language of the warning message.
			'duration' => 5000, // set time in ms before the message should disappear.
		];
	} 
);

(you should paste the above in your theme's functions.php)

Thanks @sebfried for the report of the issue: #23

Release 2.3.0

11 Mar 18:36
Compare
Choose a tag to compare

Version 2.3.0 adds support for setting different icons per marker. To do that, the popup UI has been modified to support additional actions:

image

This UI will be used for any future functionality that modifies a specific marker.

Other changes/fixes of version 2.3.0 include:

  • Updating of the react-leaflet script to v.4.2.1.
  • Updating compatibility with WordPress 6.2 and removing some deprecations.

Release 2.2.0

13 Jan 22:24
Compare
Choose a tag to compare

Version 2.2.0 adds support for importing and exporting locations. More specifically:

  • Adds option to export locations to a JSON file
  • Adds option to import locations from a previously exported JSON file

ootb-import-export

There is nothing fancy with the JSON's structure, and if it follows a specific pattern, it could even be manually created from a set of coordinates. For example:

[
  {
	"lat": "37.9839412",
	"lng": "23.7283052",
	"text": "<p>Athens, Municipality of Athens, Regional Unit of Central Athens, Attica, 104 31, Greece</p>",
	"id": 1673647730152
  },
  {
	"lat": "40.7127281",
	"lng": "-74.0060152",
	"text": "<p>New York, United States</p>",
	"id": 1673647735921
  },
  {
	"lat": "41.3828939",
	"lng": "2.1774322",
	"text": "<p>Barcelona, Barcelonès, Barcelona, Catalonia, 08001, Spain</p>",
	"id": 1673647741383
  },
  {
	"lat": "51.5073219",
	"lng": "-0.1276474",
	"text": "<p>London, Greater London, England, United Kingdom</p>",
	"id": 1673647744636
  }
]

The id field can be any number, to be used as a unique identifier. It should be different for each entry, or else you wouldn't be able to drag & drop the locations if you needed to move them after the import.