code.pixies Webdesign Agentur Logo

A filter for the timber construction map

Learn how we use the powerful Jet Smartfilters plugin to filter the projects on the timber construction map according to individual criteria.

Sarah

Web Developer/Web Designer at code.pixies

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.

code pixies GmbH | Ein Filter für die Holzbaukarte | Macbook Pro 16 mockup

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.

01

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.

02

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.

03

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.

Custom WordPress SolutionElementorJet engineJetSmartFiltersPage BuilderWordPress

More insights

The success of your website depends on the concept

Famously said: “A man who does not plan far in advance will find trouble at his door.” – Confucius…
Custom WordPress SolutionWeb Development

Responsive tables with Ninja Tables Pro

Discover how Ninja Tables Pro optimizes your WordPress tables and sets new standards in responsive display of table content….
Custom WordPress SolutionWeb Development

Environmental Protection: Forest Foundation for Saxony

Learn more about our custom solution for Stiftung Wald für Sachsen with progress bars and dynamic forms for seamless user interaction….
Custom WordPress SolutionWeb Development

Stay up to date - Subscribe to our Newsletter!

Sign up for our newsletter and stay up to date with all the latest updates, news and trends in your inbox. Your email address will only be used to send you our newsletter and information about the activities of code.pixies You can unsubscribe at any time using the link included in the newsletter.