Description
This filter changes the marker settings that are sent to the map, such as the size of the markers and the point of the marker that sits on the location.
To use a marker of your own, use the Marker Studio under Store Locator > Marker Studio. You can design a marker there, or upload your own image, and set its size. See Use Custom Markers. The markers are picked in the Markers settings.
scaledSize, origin, anchor, iconAnchor and popupAnchor keys. Their size and anchor come from the marker itself. This also applies to the pins that replace the bundled markers when Marker labels is turned on. Change the size of a Marker Studio marker with its Size option.Marker images from your own marker folder (see wpsl_admin_marker_dir) are shown at the size of the image file itself. The second example below shows how to change that.
Parameters
$marker_props (array) The marker settings. Sizes and positions are in pixels, as [ x, y ] or [ width, height ] arrays.
| Key | Default | Map provider | Description |
|---|---|---|---|
start, store | From the Markers settings | All | The start and store marker. A filename from the marker folder, a full URL, or the SVG of a Marker Studio marker. |
active | From the Markers settings | All | The active store marker. Only included when it differs from the store marker. |
skipStart | false | All | Set it to true to hide the start marker. |
scaledSize | [ 24, 35 ] | All | The width and height of the bundled markers. |
origin | [ 0, 0 ] | Google Maps with JSON styling | The position of the marker image inside the image file. |
anchor | [ 12, 35 ] | Google Maps with JSON styling | The point of the marker that sits on the location, measured from the top left corner of the marker. |
iconAnchor | [ 12, 35 ] | OpenStreetMap, Stadia Maps | The point of the marker that sits on the location. Only included when one of these providers is active. |
popupAnchor | [ 0, -38 ] | OpenStreetMap, Stadia Maps | Where the info window opens, measured from the iconAnchor point. Only included when one of these providers is active. |
bounceHeight | 12 | Mapbox, OpenStreetMap, Stadia Maps | How far the marker moves up when it bounces. |
bouncePeriod | 500 | Mapbox, OpenStreetMap, Stadia Maps | How long one bounce takes, in milliseconds. |
url | Not set | All | The URL of the marker folder. Only included when the WPSL_MARKER_URI constant is defined. |
geometry | Read from the files | All | The width and height of the start, store and active marker when they are image files from your own marker folder, keyed by the image URL. Only included when WPSL_MARKER_URI is defined. |
Google Maps uses Advanced Markers, unless Store Locator > Appearance > Map Style is set to JSON Styling. Advanced Markers always sit on the location with their bottom centre, so they only use scaledSize. Mapbox also works out the anchor from the marker size itself.
The array also holds markerClusters, startOnTop, labels and, with clusters enabled, cluster. These come from the Markers settings, so change them there. The cluster options have their own filters, wpsl_cluster_marker_colors and wpsl_cluster_marker_props.
Usage
This example shows the bundled markers at 30 x 44 pixels, and moves the anchor points to match. The iconAnchor and popupAnchor keys are only changed when OpenStreetMap or Stadia Maps is active.
| add_filter( 'wpsl_marker_props', 'custom_marker_size' ); | |
| function custom_marker_size( $marker_props ) { | |
| // Show the bundled markers at 30 x 44 pixels instead of 24 x 35. | |
| $marker_props['scaledSize'] = [ 30, 44 ]; | |
| // Google Maps with JSON styling: put the point of the marker at the bottom centre. | |
| $marker_props['anchor'] = [ 15, 44 ]; | |
| // OpenStreetMap and Stadia Maps: the same point, and the popup just above the marker. | |
| if ( isset( $marker_props['iconAnchor'] ) ) { | |
| $marker_props['iconAnchor'] = [ 15, 44 ]; | |
| $marker_props['popupAnchor'] = [ 0, -47 ]; | |
| } | |
| return $marker_props; | |
| } |
Use arrays for the sizes and positions. The 2.x string format, for example '24,35', still works, but only without spaces.
This example is for marker images in your own marker folder, set up as explained in Use Custom Markers. It shows them 32 pixels wide and keeps their proportions. The marker stays anchored at its bottom centre.
| add_filter( 'wpsl_marker_props', 'custom_marker_file_size' ); | |
| function custom_marker_file_size( $marker_props ) { | |
| /* | |
| * 'geometry' holds the size of the marker images from your own marker folder, | |
| * read from the files themselves. Show them 32 pixels wide instead, | |
| * and keep their proportions. | |
| */ | |
| if ( ! empty( $marker_props['geometry'] ) ) { | |
| foreach ( $marker_props['geometry'] as $src => $size ) { | |
| $marker_props['geometry'][ $src ] = [ | |
| 'width' => 32, | |
| 'height' => (int) round( $size['height'] * 32 / $size['width'] ), | |
| ]; | |
| } | |
| } | |
| return $marker_props; | |
| } |
You can also make the image file itself the size you want, for example my-marker.png at 24 x 35 pixels and my-marker@2x.png at 48 x 70 pixels for high resolution screens. Then you don’t need this filter.
Changelog
| Version | Description |
|---|---|
| 3.0 | Moved to includes/frontend/maps/class-markers.php. The sizes and positions are now arrays, for example [ 24, 35 ]. New keys: start, store, active, skipStart, iconAnchor and popupAnchor (OpenStreetMap and Stadia Maps), bounceHeight, bouncePeriod, geometry, markerClusters, startOnTop, labels and cluster. On Google Maps, origin and anchor are only used with JSON styling. Marker Studio markers ignore the size and anchor keys. |
| 2.1 | Introduced. |
Source File
This filter is located in /includes/frontend/maps/class-markers.php.
Placement
The code needs to be placed in the functions.php file inside your active theme folder.