Maps and Lightbox

Directory and Calendar both support an interactive Mapbox map and a slide-out lightbox for product/event detail views.

Map

Enable the map

options: {
  includeMap: true,
  map: {
    autoload: true,
    geoLocateControl: true,
    mapAttachment: 'beforebegin',
    mapBoxOptions: {
      style: 'mapbox://styles/mapbox/light-v11',
      zoom: 10,
      center: [YOUR_LNG, YOUR_LAT],
    },
    markerOptions: {
      showLabel: false,
      style: {
        default: {
          color: '#00004d',
          textColor: '#FFFFFF',
          dotColor: '#FFFFFF',
          strokeColor: '#FFFFFF',
          hoverColor: '#0c6a36',
        },
        fave: {
          color: '#040050',
          textColor: '#FFFFFF',
          hoverColor: '#8DC63F',
        },
      },
    },
    zoomOptions: {
      target: 17,
      popups: 15,
      controls: true,
    },
  },
}

Prerequisites

1. Load Mapbox GL before Haven (see Loading Haven)
2. Set useMapBox: true in haven.config()
3. Provide a Mapbox access token via haven.init({ mapboxApiKey: 'pk....' }) or Kit configuration

Map attachment

The mapAttachment option controls where the map element is inserted relative to the list:

Value	Position
beforebegin	Before the list container
afterbegin	Inside list container, first child
beforeend	Inside list container, last child
afterend	After the list container

Marker interaction

Hovering a list item highlights the corresponding map marker, and clicking a marker zooms to the item.

Listen for map load:

document.addEventListener('havenMapLoad', function (e) {
  console.log('Map is ready');
});

Disable maps

For lightweight widgets:

haven.config({ useMapBox: false });
// do not set includeMap: true in options

Lightbox

Enable the lightbox

options: {
  includeLightbox: true,
  lightbox: {
    expandDirection: 'bottom',
  },
}

Direction	Behavior
bottom	Panel slides up from bottom (default)
top	Panel slides down from top
left	Panel slides in from left
right	Panel slides in from right

Clicking a list item opens the detail view in the lightbox without leaving the page. The URL updates according to your routing configuration.

Breadcrumb in lightbox

When breadcrumbs are enabled, the product name appears in the breadcrumb trail inside the lightbox:

breadcrumb: {
  enabled: true,
  selector: '#haven-breadcrumb-directory',
  showProductInLightbox: true,
}

Combined example

options: {
  includeMap: true,
  includeLightbox: true,
  lightbox: { expandDirection: 'bottom' },
  map: {
    autoload: true,
    mapBoxOptions: {
      style: 'mapbox://styles/mapbox/light-v11',
      zoom: 11,
      center: [-79.38, 43.86],
    },
    markerOptions: {
      style: {
        default: { color: '#00A4DB', hoverColor: '#8DC63F' },
      },
    },
  },
}

Troubleshooting

Issue	Solution
Map does not appear	Ensure Mapbox GL loaded before haven.init()
Blank map tile area	Check Mapbox token is valid
Markers missing	Verify products have geolocation data in Haven
Lightbox does not open	Set includeLightbox: true and include detail template in userTemplates

See Common Issues.