Map Facet

←  All Add-Ons
Map Facet - Gridbuilder ᵂᴾ

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

See demo →

Key features

  • Google Maps API support
  • Mapbox API support
  • Leaflet API support (open-source)
  • 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

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