Clustered map and Map Design Studio

Available in:Pro

HappenBoard Pro brings two map features. The Events Clustered Map block shows your events on one map and groups nearby pins into numbered circles. Map Design Studio changes the look of your maps: the venue map on event pages and the clustered map.

Both features are part of HappenBoard Pro. See what Pro adds.

Neither needs an account or an API key, unless you paste a style from a map provider that asks for one.

Add the clustered map

Insert the Events Clustered Map block on any page. It places one pin per event, at its venue, and reframes itself around the pins when it loads.

SettingWhat it doesDefault
Height (px)From 240 to 1000.480
Default zoomFrom 1 to 18. It mostly matters when there is a single pin, since the map frames all the pins.5
Cluster radius (px)From 20 to 120. A larger radius groups pins that are further apart.50
Max eventsFrom 10 to 200. With Upcoming, the block reads 100 event dates at most.200
Date rangeUpcoming, Today, This week or This month.Upcoming

The first three settings are in the Map panel, the last two in the Filtering panel. A recurring event gets one pin, not one per date, but each of its dates counts towards the limit.

The Filter Bar does not filter this map.

Give your events coordinates

A pin needs a venue with a latitude and a longitude. The map leaves out, without warning, an event with no venue, with only a venue name typed on the event, or with a venue that has no coordinates. If your map looks emptier than your calendar, check your venues’ coordinates.

When nothing at all can be placed, the block shows No events with venue coordinates in this range. instead of the map.

What visitors can do

  • Click a numbered circle to zoom into that group.
  • Click a pin to open a popup with the date, the event title as a link, and the venue. An all-day event shows All day instead of a time.
  • Zoom with the buttons in the corner, or drag to move around.
  • Use the keyboard: every circle and every pin is a button reached with the Tab key. A circle zooms in and moves the focus to the nearest marker. A pin opens its popup with the focus on the event link, and Escape closes it. Screen readers hear the number of events in a group, and each event’s title, date and venue.
  • Open List view, under the map, for a plain list of the same events, each with its link, date and venue. It suits anyone who would rather not use a map.

A map that does not slow your pages

The map library (MapLibre) loads only on pages that have a map, and only when the map comes near the visible part of the page. A map further down costs nothing until the visitor scrolls to it.

The map pictures (tiles) load in the visitor’s browser, from OpenStreetMap, or from Esri for the Satellite template. OpenStreetMap asks busy sites to use another tile provider: a developer can switch the tiles with a filter.

Choose a map style in Map Design Studio

  1. Go to HappenBoard → Integrations.
  2. On the Map Design Studio (Pro) card, click Configure.
  3. Under Map template, click the card you want.
  4. Click Save changes.
TemplateWhat it gives
Off (use Lite iframe)The default. Venue maps stay as the free plugin draws them, with the provider chosen in your map settings. The clustered map uses plain OpenStreetMap tiles.
LightNeutral tiles with a little extra contrast, for light themes.
DarkDark, low-saturation tiles, for dark themes.
SepiaWarm, faded tiles for a vintage look.
MinimalGrey tiles on a bright background, so the pin stands out.
BrandTiles tinted to match your theme’s accent colour.
SatelliteAerial photos from Esri World Imagery.
Custom JSONYour own map style (see below).

The six ready-made templates, from Light to Satellite, need no key and no account.

A template restyles two maps. The first is the venue map that the free Event Venue block shows when its Show map option is on. Any template other than Off replaces that map, whichever provider your map settings name.

The styled venue map keeps the height and zoom set on the block. It shows a pin on the venue and zoom buttons, and does not zoom when a visitor scrolls the page over it. The second map is the clustered map: the template changes its background, while its blue circles and pins stay the same.

Use your own style

Choose Custom JSON to paste a complete map style in the MapLibre Style Spec JSON box, for example one from MapTiler, Stadia or your own tile server. The style must include a version key. Insert sample fills the box with a starting point.

The style is checked as you type and when you save. If it is empty or broken when a page loads, the page does not break. The venue maps fall back to the free plugin’s map, and the clustered map to plain OpenStreetMap tiles.

Next steps