Kiln for Bricks Buy Kiln

Modules / Maps

Map: sync markers with a query loop

Map (Leaflet): sync with a query loop

Bricks offers "Sync with query" on its Google map only. This module adds it to the Map (Leaflet) element. The markers come from the Map Connector elements inside a query loop and follow the loop's filters and pagination.

  • On by default
  • Needs Bricks 2.4 or newer
  • Tested with Bricks 2.4.3
Buy Kiln · all 39 modules, US$79 a yearBrowse the other 38 modules

One of 39 modules · Recording in progress

Where to find it in the builder

On the Map (Leaflet) element, in the Markers controls. The controls show in the builder, but the synced markers show on the front end only. In the builder, the map keeps the markers you set on the element.

How to use it

  1. Build a query loop on the page.
  2. Inside the loop, add Bricks' Map Connector element. Give it a latitude and a longitude. A marker image and an Info Box popup template are optional.
  3. Select the Map (Leaflet) element. In its Markers controls, find the separator Sync with query (Kiln).
  4. In the query list under it, choose your loop (Select query loop). The page's main query is not offered.
  5. Optional: tick Keep the map's center and zoom (do not fit to the markers), or Keep the markers above as well. Both appear once a loop is chosen.
  6. View the page on the front end.

What the map does

  • It fits the view to the loop's markers, with 40 pixels of padding. With one marker, or markers at the same spot, it centres on that point and keeps the current zoom.
  • It updates after query filters, AJAX pagination and "load more".
  • A marker uses the Map Connector's marker image at 40 pixels tall, with the image's own proportions. Without an image, the marker is Leaflet's default.
  • The marker's popup is the Info Box template, when the connector has one. Without a template, the popup is the marker's label as plain text.
  • A map hidden at load, for example in a tab, an accordion or a popup, fits its markers when it is revealed.
  • Hovering a loop item adds the class kiln-map-active to its marker, and hovering a marker adds it to its loop item. Keyboard focus on the item does the same. Kiln ships no styles for the class, so add your own CSS.
  • A connector with a missing latitude or longitude, or a value outside the valid range, is skipped.
  • If the chosen loop is not on the page, the map keeps its own markers.

How it works with the markers on the element

By default, Kiln removes the markers set on the Map (Leaflet) element once the sync starts. Tick Keep the markers above as well to keep them. They then count toward the fit.

Limits

  • Latitude and longitude only. Kiln doesn't geocode the connector's address field, because Leaflet has no geocoder.
  • Kiln can't use an Info Box template set to load by AJAX. The marker's label shows instead.
  • Synced markers show on the front end only. The builder shows the markers set on the element.

Settings

None. The module is on by default and does nothing until you choose a loop on a map.

Requirements

Bricks 2.4 or newer.