Skip Navigation

Filtering and Ordering Map Markers by Distance in WordPress

When you insert a Toolset map, you can filter markers or order them by distance. You can also calculate the distance between two given points.

Filtering Markers by Distance

When displaying multiple markers on a map, you can add front-end controls that allow visitors to filter the markers by distance. They enter the location and a distance radius within which to display markers. If your site is using HTTPS protocol, visitors can also use their own location as the center of the search. For example, on a real estate site, they could use this filter to display only property listings that are in a 50-kilometer radius from New York.

Filtering markers by distance radius
Filtering markers by distance radius

The best thing about the Distance filter is that it can be combined with any other Toolset filter. For example, you can allow visitors to display only properties that can be rented (and are not for sale) and are in a 50-kilometer radius from New York. Scroll to the Filter Editor section, click on the New filter button and in the dialog that appears, click the Distance button. A dialog with all the options for your distance filter appears. It allows you to customize the default radius, change labels for displayed controls and more.

Options for the distance filter
Options for the distance filter

One of the important options for a Distance filter is the Comparison field. The filter uses a custom field selected under this option to get the location of each marker. Currently, this custom field needs to be of the Address type. In other words, the posts you are displaying must feature a custom Address field. You can also choose between displaying results that are Inside of radius or Outside of radius. In order to use option, Distance center is set from user location your website must use HTTPS. If this option is selected user’s current location will be used as a center point for filter radius. If you are using Distance filter as part of a custom search you can use it to allow users to search posts using map distance. If you are combining this filter with other filters be sure to set Should distance center input be required value to No.

Distance filter settings
Distance filter settings

Displaying a distance between two locations

If you want to calculate the distance between two given points, insert the Fields and Text block. Next, click the Fields and Views button and then the Distance value button. In the dialog enter the desired values in corresponding fields. 

Calculate the distance between two points
Calculate the distance between two points

Main Toolset Block Used in this Lesson

Create custom lists of posts

Originally written
December 7, 2018
Updated
November 16, 2020