Map Facet

Last Updated on 18 April 2024
←  All Add-Ons

Create maps from Google Maps, Mapbox or Leaflet as filterable facets. This add-on allows to display markers (posts, terms or users) on a map from longitude and lagitude coordinates. It can optionally filter content when panning the map.

This add-on also includes a Geolocation facet that allows you to search and filter by a location from Google or Mapbox APIs. It is also possible to detect current user’s location thanks to browser Geolocation API (user’s location can be approximated based on the user’s IP).

See demo →

Key features

  • Google Maps API support
  • Mapbox API support
  • Leaflet API support (open-source)
  • Geolocation field (Google & Mapbox APIs)
  • Support marker clustering
  • Support map panning to filter
  • Compatible with Advanced Custom Fields

Usage

Create a new facet and select as Facet Action > Filter and as Filter Type > Map. Once selected, you will be able to select the Map Type (Google Maps, Mapbox or Leaflet) and to fine tune the behaviour of the map, markers, clusters and controls.

A Sort facet can be used to sort by distance the results filtered by the Geolocation facet (Order By > Distance). The grid/content filtered by the Geolocation facet can also be ordered by distance by defining Order by > Included Posts (post__in). Content can only be ordered by a distance when filtered by the Geolocation facet.

This add-on is compatible with Google Map – ACF field, OpenStreetMap – ACF field, Google Maps – Meta Box field and Open Street Map – Meta Box field to easily add coordinates. This add-on also offers custom fields to add lat/lng coordinates (Map coordinates) for your posts, users or terms directly in preview mode in your grid settings.

Screenshots

Map Facet - Settings
Map Facet – Settings
Map Facet - Settings
Map Facet – Settings
Map Facet - Coordinates
Map Facet – Coordinates
Geolocation Facet - Settings
Geolocation Facet – Settings

Geolocation Facet - Settings
Geolocation Facet – Settings

Geolocation Facet - Map location
Geolocation Facet – Location

Documentation

This add-on comes with several PHP filters to easily customize map behaviour and markers content.

Use two custom fields for the coordinates of the Map or Geolocation facet:

PHP
functions.php
function prefix_map_custom_coordinates( $row, $object_id, $facet ) {

	// If it does not matches facet id 1.
	if ( 1 !== $facet['id'] ) {
		return $row;
	}

	// You have to change "latitude_custom_field_name" by yours (latitude field).
	$row['facet_value'] = get_post_meta( $object_id, 'latitude_custom_field_name', true );
	// You have to change "longitude_custom_field_name" by yours (longitude field).
	$row['facet_name']  = get_post_meta( $object_id, 'longitude_custom_field_name', true );

	return $row;

}
add_filter( 'wp_grid_builder/indexer/row', 'prefix_map_custom_coordinates', 10, 3 );

Modify marker content from post, user or term:

PHP
functions.php
function prefix_marker_content( $content, $marker ) {

	// If post ID is 1234, return the title.
	if ( 1234 === $marker['id'] ) {
		return get_the_title();
	}

	return $content;

}
add_filter( 'wp_grid_builder_map/marker_content', 'prefix_marker_content', 10, 2 );

Modify geoJSON features used to place markers:

PHP
functions.php
function prefix_map_geojson( $json, $facet ) {

	// If facet slug is 'my_slug'.
	if ( 'my_slug' === $facet['slug'] ) {

		$json['features'] = array_map(
			function( $feature ) {
				// Add modification here...
				return $feature;
			},
			$json['features']
		);

	}

	return $json;

}
add_filter( 'wp_grid_builder_map/geojson', 'prefix_map_geojson', 10, 2 );

Register/unregister Leaflet tile providers:

PHP
functions.php
function prefix_leaflet_providers( $providers ) {

	$providers['Mapbox - Street v11'] = [
		'url'     => 'http://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=<your access token>',
		'options' => [
			'attribution' => '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a>',
		],
	];

	return $providers;

}
add_filter( 'wp_grid_builder_map/leaflet_providers', 'prefix_leaflet_providers', 10, 2 );

Register/unregister Mapbox styles:

PHP
functions.php
function prefix_mapbox_styles( $styles ) {

	$styles['mapbox://styles/mapbox/streets-v11'] = 'Your Map Style';
	return $styles;

}
add_filter( 'wp_grid_builder_map/mapbox_styles', 'prefix_mapbox_styles', 10, 2 );

This add-on also provides several JavaScript events to easily modify map behaviour, add new features and to catch marker interactions.

This event is triggered before the map is initialized:

JS
Grid settings – JS field
wpgb.facets.on( 'map.beforeInit', function( instance ) {

	// Change maxZoom options.
	instance.options.maxZoom = 18;

} );

This event is triggered after the map was initialized:

JS
Grid settings – JS field
wpgb.facets.on( 'map.afterInit', function( instance ) {

	// Add new layer to Leaflet map.
	var layer = new L.tileLayer( 'https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png' );
	layer.addTo( instance.map );
	
} );

This event is triggered after Mapbox map was loaded:

JS
Grid settings – JS field
wpgb.facets.on( 'map.loaded', function( instance ) {
	// Only happens when Mapbox map is fully loaded.
} );

This event is triggered on marker click:

JS
Grid settings – JS field
wpgb.facets.on( 'map.marker.click', function( instance, feature ) {
	console.log( 'marker ID', feature.properties.id )
} );

This event is triggered when hovering a marker:

JS
Grid settings – JS field
wpgb.facets.on( 'map.marker.mouseenter', function( instance, feature ) {
	console.log( 'marker ID', feature.properties.id )
} );

This event is triggered when leaving a marker:

JS
Grid settings – JS field
wpgb.facets.on( 'map.marker.mouseleave', function( instance, feature ) {
	console.log( 'marker ID', feature.properties.id )
} );

To display the post distance, you can use the following shortcode:

HTML
Shortcode
[wpgb_geo_distance id="1234" unit="km" decimal_places="0" decimal_separator="." thousands_separator="" prefix="" suffix="km"]

The id attribute is optional when the shortcode is used in a WordPress loop.

Changelog

v1.5.2

Release date: April 18, 2024

  • addedFrench translation for styles.
  • changedStyle settings for V2.

v1.5.1

Release date: April 10, 2024

  • addedSupport for CSS variables from V2.

v1.5.0

Release date: April 2, 2024

  • addedSupport for WP Grid Builder V2.
  • addedSupport for Google Map Style (V2 only).

v1.4.3

Release date: February 6, 2023

  • addedCompatibility with PHP 8.2.

v1.4.2

Release date: February 2, 2023

  • fixedWarning about missing callback argument in Google Maps JS API.
  • updatedGoogle MarkerClusterer library assets.
  • updatedLeaflet library assets.

v1.4.1

Release date: November 18, 2022

  • updatedGoogle MarkerClusterer library assets.
  • updatedMapBox library assets.
  • updatedLeaflet library assets.

v1.4.0

Release date: October 12, 2022

  • addedAuto geolocate feature for Geolocation facet.
  • addedPrefix and suffix attributes in geolocation distance shortcode.
  • updatedGoogle MarkerClusterer library assets.
  • updatedLeaflet library assets.
  • fixedRace condition (JS) between Map and Geolocation facets.

v1.3.0

Release date: June 20, 2022

  • addedLeaflet Marker Popup autopan feature.
  • improvedBehavior of Leaflet Marker Popup when dragging and filtering.
  • fixedPerformance issue when refreshing markers in the map.

v1.2.2

Release date: June 9, 2022

  • updatedGoogle MarkerClusterer library assets.
  • fixedIssue with query string detection on page load.

v1.2.1

Release date: May 2, 2022

  • updatedGoogle Maps and MarkerClusterer library assets.
  • updatedLeaflet library assets.

v1.2.0

Release date: March 23, 2022

  • fixedIssue with Marker content cache when using multiple markers from the same ID.

v1.1.9

Release date: March 22, 2022

  • addedLatitude and longitude coordinates in the marker content endpoint.
  • fixedIssue with marker content and post types excluded from search.

v1.1.8

Release date: October 22, 2021

  • fixedIssue when querying attachment post type in marker popup.
  • updatedLeaflet Cluster and Gesture scripts.

v1.1.7

Release date: October 5, 2021

  • fixedIssue when querying an orphan term in the marker popup.
  • updatedMap Leaflet Cluster script.

v1.1.6

Release date: April 23, 2021

  • fixedIssue with Map Filtering option not working properly.

v1.1.5

Release date: April 7, 2021

  • fixedMissing source when retrieving marker content in some contexts.

v1.1.4

Release date: February 9, 2021

  • updatedMap library assets (CSS/JS).
  • fixedIssue when dragging Leaflet map on load.
  • fixedNon-composited animations of pan to search checkbox.

v1.1.3

Release date: January 11, 2021

  • addedGeolocation distance block for the card builder and shortcode.
  • addedPossibility to sort by geolocation distance when content is filtered.
  • updatedLeaflet library assets and JS gestures library for Leaflet.
  • fixedIssue with highlighted marker icon when overriding idle icon in geoJSON.

v1.1.2

Release date: November 23, 2020

  • fixedIssue when resetting posts data in marker popup.
  • fixedIssue with PHP 5.6 and facets detection in the page.
  • fixedIssue with Rest API response.

v1.1.1

Release date: October 19, 2020

  • addedCompatibility with Elementor editor.
  • fixedIssue with async or defer attribute on scripts.
  • fixedCSS issue with autocomplete button colors.
  • fixedCSS issue with pan to search tooltip.
  • fixedIssue with Google Map width in grid sidebars on mobile devices.

v1.1.0

Release date: July 15, 2020

  • addedGeolocation facet (Google & Mapbox APIs).
  • fixedIssue with Mapbox map filtering position.

v1.0.4

Release date: April 14, 2020

  • improvedMap facet can now index any array containing lat and lng properties.
  • addedFrench translation of backend and frontend.
  • fixedIssue with default marker icon in Leaflet map.

v1.0.3

Release date: March 25, 2020

  • updatedLeaflet and Google Map assets.
  • fixedJS issue when destroying Map instances.
  • fixedJS issue when initializing Map after destroying it if no facet content.
  • fixedJS issue with highlight marker events and multiple Map instances.

v1.0.2

Release date: February 10, 2020

  • addedCompatibility with Multilingual add-on.

v1.0.1

Release date: November 18, 2019

  • addedNew facet option to display “Pan to Search” checkbox over the map.
  • addedNew facet option to highlight marker icon when hovering cards in grid.
  • addedMap grid and card demos available from the importer of WP Grid Builder (plugin Dashboard).

v1.0.0

Release date: November 4, 2019

  • released Public Release