- JetEngine plugin at least 3.0 version;
- Elementor or WordPress block editor;
- created Map meta field for posts/terms/users/CCT items with addresses;
- created Map Listing placed on a page;
- JetSmartFilters plugin.
This feature for WordPress shows posts, terms, users, or CCT items within a given location radius of the users who visited the site if they allow sharing geolocation. You can set it via the JetEngine Query Builder tool and JetSmartFilters User Geolocation widget/block.
- Step 1 — Create a query
- Step 2 — Add the query to the Map Listing
- Step 3 — Create the User Geolocation filter
1 Step — Create a query
Navigate to the JetEngine > Query Builder tab on the WordPress Dashboard and hit the “Add New” tab.
In the General Settings, type the query Name. As the Query Type, you can select “Posts Query,” “Terms Query,” “Users Query,” or “Custom Content Type Query,” according to the object that you want to filter.
Scroll down and click on the Geo Search tab. There are such settings:
- Location. Select the point on the map, and it will be the center of the query radius if users don’t allow access to their geolocation;
- Address Field. Enter the name of the post, term, user, or CCT meta fields in which the address is stored. Here you can specify the same fields as in the Preload option in the Map Settings (without a prefix, it is not necessary because the query type is already selected in advance), a field of the Map type, or comma-separated fields in which latitude and longitude are stored (in separate fields);
- Distance. Enter the results radius;
- Units. Select the measurement units:
When you finish, push the “Add/Update Query” button.
2 Step — Add the query to the Map Listing
Move to the page with the Map Listing widget or block and click to edit it.
That’s how the listing looks without query — it shows the whole map with all objects.
If you work with the Elementor editor, open the Map Listing widget, proceed to the Custom Query tab, enable the Use Custom Query toggle, and select the query name for the map from the drop-down list.
The Map Listing block has the same settings in the Gutenberg editor.
With the query, the Map Listing shows locations according to the static point in the center of the defined radius.
3 Step — Create the User Geolocation filter
Go to the Smart Filters > Add New tab.
Type the filter name and labels, select the “User Geolocation” Filter Type, and enter any value in the Query Variable field (this field is not required for the User Geolocation filter, but you cannot save the filter settings if this field is empty).
Then, press the “Publish/Update” button.
Place the User Geolocation widget or block onto the page containing Map Listing.
Select the newly created filter and pick the “JetEngine Maps” option in the This filter for field.
In the Gutenberg editor, the settings are the same.
When you’re done, update the page and open it on the front end.
All users, who visit the page with the filter for the first time, will see the notification that asks for permission to see their geolocation.
Users who click the “Block” button will see the results around the point selected in the query settings, as we showed in the second step.
If users hit the “Allow” button, the objects on the map are filtered depending on their location.
That’s all. You now know how to set the static point on the map with the JetEngine Query Builder and geosearch based on user geolocation with the JetSmartFilters plugin.