An interactive timber construction map
In our last post, we presented the development of an innovative feature for our client’s website: an interactive map function that allows users to explore timber construction projects throughout Saxony.
With the aim of ensuring seamless integration and a user-friendly experience, we decided to use the powerful Jetengine plugin. From enabling the map feature to customizing marker styles and creating a list view, we have detailed the steps to successfully implement it.
Now let’s take a look at the filter function, which can be used to narrow down the timber construction projects.
Expansion through Jet Smartfilters
The Jet Smartfilters plugin provides the required functionality. It extends Jetengine with a powerful filter function. It is extremely easy to use.
Creating the filters
We can create the filters we need in the Smartfilters dashboard. In our case, we want to create three checkbox filters for the taxonomies, as well as a search function for the location and a range filter for completion. We therefore select the desired filter type and data source. Some of the filters offer further customization options. However, these are not necessary in our case.
Insert filter widget
We decided to create our filter in a popup so that we can use the maximum space on the page for the map. We now build our filter in the popup and select the appropriate widget for each filter type.
Set filter widget
Now we set up the widgets. First we select the appropriate filter from the dashboard. Then we set up the filter for the Jetengine map listing. To apply the filter we select Ajax when the values change. This means that our filter is applied as soon as a selection in the filter changes and without reloading the page. Since we only have one map listing on our page, we do not need to specify a query ID for the link.
In the next part, we will look at the form that website visitors can use to submit timber construction projects.
