Map Facet

←  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.

This add-on works with Advanced Custom Fields – Google Map field which allows to easily setup coordinates. This add-on also offers custom fields to add lat/lng coordinates for your posts, users or terms directly in preview mode in your grid settings.

The Map facet works with latitude and longitude coordinates. The source type should be a custom field with as value an array containing the coordinates like this:
[ 'lat' => 5.1025, 'lng' => 40.5548 ]

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.

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 ID is 1234.
	if ( 1234 === $facet['id'] ) {

		$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['Street v11'] = 'mapbox://styles/mapbox/streets-v11';
	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 )
} );

Changelog

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 Gpogle 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