Skip to content
Bricks Academy
Community Forum
Get Bricks

Map (Leaflet)

Map (Leaflet) (map-leaflet) embeds an interactive map using Leaflet and tile layers (default: OpenStreetMap). Unlike the Google Map element, it does not use the Google Maps JavaScript API—use this when you want OSM-style tiles or custom tile URLs without Google.

The element is not draggable in the builder (draggable = false) to avoid conflicts with map interaction. It enqueues bricks-leaflet scripts and styles.

Layers

Section titled “Layers”

Layers (repeater) — Each layer:

  • Name (text) — e.g. OpenStreetMap.
  • URL (text) — Tile URL template with {z}, {x}, {y} placeholders.
  • Min Zoom, Max Zoom (number).
  • Error Tile URL (text).
  • Attribution (text).

Default repeater row uses OpenStreetMap’s standard tile URL.

Markers

Section titled “Markers”

Markers (repeater):

  • Coordinates (text) — latitude, longitude (comma-separated). Supports dynamic data.
  • Label (text) — Builder-only helper to tell markers apart.
  • Icon (image) — Per-marker image; Height / Width (px) when set.
  • Popup (Text) (editor) — Popup content for that marker.

Marker (Default)

Section titled “Marker (Default)”

Global defaults when a marker has no custom icon:

  • Icon (image), Icon: Height (px), Icon: Width (px).

Map

Section titled “Map”

  • Height (number with units) — Map container height. Default placeholder: 300px. Triggers reload when changed.

  • Map center (text) — latitude, longitude.

  • Zoom level (Initial) (number).

  • Zoom level (Min), Zoom level (Max) (number).

  • Zoom: Snap, Zoom: Delta (number).

  • Zoom: Double-click (select) — Enabled, Enabled (Center), or Disabled.

  • Zoom: Scroll wheel (select) — Same options.

  • Box Zoom (checkbox).

  • Zoom Control (checkbox).

  • Attribution Control (checkbox).

  • Close popup on click (checkbox).

  • Dragging (checkbox).

  • Track resize (checkbox) — See Leaflet map options.