code.pixies Webdesign Agentur Logo

How we created an interactive wood construction map with Jetengine

Discover how we turned our client's vision of an Airbnb-style interactive map feature into reality! Learn how we used the versatile Jetengine plugin to develop a user-friendly map and list view for timber construction projects across Saxony.

Sarah

Web Developer/Web Designer at code.pixies

"A map like Airbnb"

 – this is how our customer, Holzbaukompetenz Sachsen GmbH, described its vision for a new feature on its website.

The task was to develop a map function that would allow users to easily and clearly view timber construction projects from all over Saxony. It should be possible to switch between a map and list view, and the results should be fully filterable. The map should also be seamlessly integrated into the design of the website and use customizable markers. It was also important to map the recording of new timber construction projects using a form.

When choosing a suitable plugin for map display, it was important to us to find a solution that was both powerful and flexible. We chose Jetengine from Crocoblock, a multi-talent when it comes to the dynamic display of custom post types. In addition to the map functionality, Jetengine also offers a comprehensive and customizable filter function through its extension Jet Smartfilters.

code pixies GmbH | Wie wir mit Jetengine eine interaktive Holzbaukarte schufen | hks karte 1

Steps to integration:
From activation to adaptation

Below we describe the steps we took to successfully integrate Jetengine’s map function into the Holzbaukompetenz Sachsen GmbH website.

01

Activating and setting the map function

First, we need to activate the map listings via the Jetengine settings. The basics for the map can now be set via the Map Settings tab. Among other things, you can select the map provider and the geocoding provider and, if necessary, enter an API key.

02

Configuring the Custom Post Type

Using the Jetengine dashboard, we create a new Custom Post Type and define the required fields such as project name, location, description, etc.

03

Creating the templates

Now we define what the new custom post type should look like. We create both a single post template for the detail page and a Jetengine listing template for the short presentation in the map and the list.

04

Integration of the map

We insert the "Map Listing" from Jetengine on the page. There we select our previously defined template and specify the address field. To get the address from several meta fields, combine the names of these fields with a "+" sign.

05

Adjusting the map

Using the widget, we can define the behavior of the map and a custom map style. In the "Marker" tab, we can define specific markers for different taxonomies.

06

Create list view

The list view works in a similar way to the map widget. Via the "Listing Grid" widget. We select our listing template and style the list according to our specifications.

In the next part, we will look at the filter function that website visitors can use to filter the timber construction projects on the map.

Custom WordPress SolutionElementorJet enginePage 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.