{"id":1161360,"date":"2018-12-07T09:10:31","date_gmt":"2018-12-07T09:10:31","guid":{"rendered":"https:\/\/toolset.com\/?post_type=course-lesson&#038;p=1161360"},"modified":"2020-11-16T10:08:58","modified_gmt":"2020-11-16T10:08:58","slug":"filtering-and-ordering-map-markers-by-distance","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/es\/course-lesson\/filtering-and-ordering-map-markers-by-distance\/","title":{"rendered":"Filtering and Ordering Map Markers by Distance"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\" id=\"filtering-markers-by-distance\">Filtering Markers by Distance<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"06b7d10084e77ad0af316801a71c6e3d\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2017\/12\/toolset-maps-filtering-by-distance-radius.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2017\/12\/toolset-maps-filtering-by-distance-radius-500x483.png\" alt=\"\" class=\"wp-image-959944\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Filtering markers by distance radius<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The best thing about the&nbsp;<strong>Distance&nbsp;<\/strong>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&nbsp;<strong>Filter Editor&nbsp;<\/strong>section, click on the&nbsp;<strong>New filter&nbsp;<\/strong>button and in the dialog that appears, click the&nbsp;<strong>Distance&nbsp;<\/strong>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.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"4a0f09acb8b530c0db6871beebc1ab77\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2018\/12\/toolset-maps-distance-filter-dialog-options.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2018\/12\/toolset-maps-distance-filter-dialog-options-500x644.png\" alt=\"Options for the distance filter\" class=\"wp-image-1683899\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Options for the distance filter<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>One of the important options for a\u00a0<strong>Distance\u00a0<\/strong>filter is the\u00a0<strong>Comparison field<\/strong>. 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\u00a0<strong>Address\u00a0<\/strong>type. In other words, the posts you are displaying must feature a custom\u00a0<strong>Address\u00a0<\/strong>field. You can also choose between displaying results that are\u00a0<strong>Inside of radius<\/strong>\u00a0or\u00a0<strong>Outside of radius<\/strong>. In order to use option,\u00a0<strong>Distance center is set from user location<\/strong>\u00a0your website must use HTTPS. If this option is selected user&#8217;s current location will be used as a center point for filter radius. If you are using\u00a0<strong>Distance filter<\/strong>\u00a0as part of\u00a0a custom search you can use it\u00a0to allow users to search posts using map distance. If you are\u00a0combining this filter with other filters be sure to set\u00a0<strong>Should distance center input be required\u00a0<\/strong>value to\u00a0<strong>No<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"68329b48e49c3558c0918ed8463f01f8\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2018\/12\/maps-distance-filter-search-posts.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2018\/12\/maps-distance-filter-search-posts-281x595.png\" alt=\"Distance filter settings\" class=\"wp-image-1683931\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Distance filter settings<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Displaying a distance between two locations<\/h2>\n\n\n\n<p>If you want to calculate the\u00a0distance between two given points, insert the <strong>Fields and Text<\/strong> block. Next, click the <strong>Fields and Views<\/strong> button and then the\u00a0<strong>Distance value\u00a0<\/strong>button. In the dialog enter the desired values in corresponding fields.\u00a0<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-media aligncenter\" data-toolset-blocks-image=\"a836577cb1b9f504fc99f4242f94ea11\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2018\/12\/show-the-distance-between-two-points.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2018\/12\/show-the-distance-between-two-points-500x358.png\" alt=\"Calculate the distance between two points\" class=\"wp-image-1683941\"\/><\/a><div class=\"tb-image-caption\"><figcaption>Calculate the distance between two points<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"author":4341,"featured_media":1666875,"template":"","related-lesson":[8423],"class_list":["post-1161360","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-maps"],"_links":{"self":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1161360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/users\/4341"}],"version-history":[{"count":6,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1161360\/revisions"}],"predecessor-version":[{"id":1683963,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/course-lesson\/1161360\/revisions\/1683963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media\/1666875"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/media?parent=1161360"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/es\/wp-json\/wp\/v2\/related-lesson?post=1161360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}