website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
30min

The Map List Layout

The Map Layout is a List Layout which demonstrates how you can use the Google Maps API to visualise Events from the Siteglide database.

Document image

Prerequisites

  • You've Installed the Events Module
  • You've added Events in the Admin
  • You've added a Location to at least one Event

Introduction

The Map Layout is a List Layout which demonstrates how you can use the Google Maps API to visualise Events from the Siteglide database. In order to use this Layout, you'll need to create an account with Google and follow the instructions to generate an API key. We've tried to expose just enough of the JavaScript to allow you to customise your Layout, while keeping as much Liquid as possible tucked away to keep things simple. Despite this, you will need to refer to the Google Maps API docs for any advanced customisation work you'd like to carry out.

Outputting the Map Layout on a Page

The Events Module Map Layout is an example of a List Layout. Like all List Layouts, you can output the Events Module Map Layout in any Liquid File, including Pages, Templates and Layouts. However, it also requires JavaScript to function properly, so it will not be supported inside an Email e.g. Autoresponder or Workflow. 

To output the map, output the List Layout as normal, and choose a Map Layout in the layout parameter.

HTML
|

There are a few parameters which work particularly well on the Map Layout, because we will want to disable Pagination and show all enabled and released Events at once:

  • per_page: 5000 - Makes sure the first Page shows all Events that are enabled and released
  • show_pagination: 'false'  - Hides Pagination Controls

You can use filtering Parameters as normal to filter Events and only show some on the Map.

  • category_ids  - Add a comma-seperated string of Category IDs to display
  • item_ids - Add a comma-seperated string of Item IDs to display

You can also use URL parameters to carry out advanced filtering.

How does the Map Layout Convert Event Locations to a JavaScript array?

You'll notice in the wrapper.liquid file that the ordinary Liquid which fetches the item.liquid files is outputted inside a JavaScript <script> element. This is very important as it allows the Liquid data to be converted to the JavaScript array that Google Maps needs.

JS
|

The item.liquid file should be left in the format of a JSON object, but you may choose to add more variables:

HTML
|

Here, we also use Liquid Logic to check for Events with no location data set and exclude them from the List. 

Clustering

We've added Marker Clustering to the Map- which is useful if you're displaying multiple Events in the same area. Each time the map is moved, or zoomed in or out, an Event Triggers which will re-draw the markers. The following behaviour was chosen by us for convenience and demonstration purposes, but can be changed by following the Google documentation. If any markers are too close to each other, they will be "clustered" under a clustering marker, which will display a number for the number of Events in that location:

Document image

Clicking on the clustering marker will zoom in by an increment of 1, unless the User is at maximum zoom. As soon as we have zoomed in enough to display more of the markers without causing confusion, we will do so:

Document image

If we reach maximum zoom and some Events are still clustered (perhaps at the same location), the next click on the clustering marker will reveal an "infowindow" containing details on all Events at that location:

Document image

Customising the Map

We've split the JavaScript for the Map Layout into two files:

  • wrapper.liquid - Here we define the variables which form the key "settings" needed to to set up the Map the way you want it
  • assets/js/modules/module_12/default_map.js - This contains the rest of the code needed to make the map functional. For advanced developers who wish to edit using the Google Maps API docs, you can edit this file.

Customising the Options

These options are all explained by comments in the wrapper.liquid JavaScript. Make sure to follow each line except the last with a comma:

  • map_selector: "#map" - The Selector for the Element into which you want to render the map.
  • zoom: 3 - Sets the initial zoom on the Map. 1 is minimum and 22 is maximum.
  • center: false - Sets the initial center of the Map. Should be in format {lat: Float, lng: Float} or false. If false, we will find the mid-point between all event locations and center there.
  • show_info_windows: true - Info Windows give the event information as a modal when you click an event marker.
  • markers.animation: - Select an animation option from the Google Maps Documentation. String e.g. "DROP". 
  • show_summary: false - Shows a summary of the Events visible on the current Map Viewport.
  • summary_selector: "#mapSummary" - Selector for Element which will contain any summary. String

Customising the Event Detail Popups (infowindows)

To do this, you'll need to carefully edit the default_map.js file. You'll need to understand how to concatenate Strings and Variables in JavaScript to construct a larger String containing HTML code.

We keep the infowindows for markers and clusters separate. This is because they use different variables, and because it allows you to be more flexible.

1 - Define infowindow HTML for markers

Find the comment in the code: //Define infowindow for markers

Next, you'll need to edit the variable here. It's value should be an HTML String containing the content you'd like for the infowindow. You can move the variables around however you like, as long as the syntax remains correct!

JS
|

2 - Define infowindow HTML for cluster markers

Find the comment in the code:  //--Cluster Markers--- Add a marker clusterer to manage the markers.

Next, you'll need to edit the variable here:

JS
|

This is slightly more complicated, because the JavaScript will loop over this and display it for each Event inside the cluster at this level of zoom.

3 - Edit the CSS

As normal, you can use custom CSS to edit the styling of any of the infowindows. Use any classes you added in the previous two steps to target them.

Customising the Map - Advanced- Following Google's Documentation

Beyond this- you'll have to refer to the Google Maps API documentation to guide you. Good luck! You'll be able to make changes in:

  • The Page
  • item.liquid and wrapper.liquid file
  • default_map.js file 

If you'd like to see the core functionality of the Events Module expanded, please make a suggestion on the Roadmap and we'll consider it for a future release. 

Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
Datasourcing the Event Host on the List or Detail Page
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Introduction
Outputting the Map Layout on a Page
How does the Map Layout Convert Event Locations to a JavaScript array?
Clustering
Customising the Map
Customising the Options
Customising the Event Detail Popups (infowindows)
1 - Define infowindow HTML for markers
2 - Define infowindow HTML for cluster markers
3 - Edit the CSS
Customising the Map - Advanced- Following Google's Documentation