"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.
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.
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.
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.
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.
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.
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.
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.
