Skip to main content

Map-Grid Embed

Embeddable VibeMap component that combines the map and grid views with a toggle button. Automatically fetches places and boundary data from the VibeMap API.

Usage​

Basic Embed Code​

<div id="vibemap-map-grid"></div>
<script
	src="https://web.vibemap.com/load.js"
	data-iframe-el="vibemap-map-grid"
	data-resize="true"
	data-url="https://web.vibemap.com/embed/map-grid?slug=san-francisco"
></script>

URL Parameters​

Required Parameters​

  • slug - Required. Boundary slug to fetch places for (e.g., san-francisco, oakland, berkeley)
    • Automatically fetches boundary polygon and all places within the boundary
    • Uses city name from boundary to load places from API
    • Example: slug=san-francisco

View Settings​

  • initialView - Starting view: map or grid (default: map)
  • showTopLevelFilters - Show filters at top: true or false (default: true)

Map Viewport (Optional - will use boundary defaults if not provided)​

  • lat or latitude - Override center latitude
  • lng or longitude - Override center longitude
  • zoom - Override zoom level 0-20
  • bearing - Map rotation in degrees (default: 0)
  • pitch - Map tilt in degrees (default: 0)

Filter Configuration​

  • showFilters - Show filter section: true or false
  • showVibeFilter - Show vibe filter: true or false
  • showCategoryFilter - Show category filter: true or false
  • showTagFilter - Show tag filter: true or false
  • showSearchFilter - Show search box: true or false
  • filterViewMode - Filter layout: horizontal or tabbed
  • filterSelectionMode - Selection mode: single, multiple, or auto

Map Display​

  • mapStyle - Map style: light, dark, streets, etc.
  • showBoundary - Show boundary overlay: true or false
  • showMarkers - Show map markers: true or false
  • showHeat - Show heatmap layer: true or false
  • showMapCards - Show card carousel on map (mobile): true or false

Grid Display​

  • gridColumns - Number of columns (default: 3)
  • showDateRangeSelector - Show date filter: true or false
  • shownAtStart - Initial items to display (default: 100)

Card Display​

  • cardStyle - Card layout: list or carousel
  • showVibesOnCards - Show vibes on cards: true or false
  • showTagsOnCards - Show tags on cards: true or false
  • showAddressOnCards - Show address on cards: true or false
  • showRating - Show ratings: true or false
  • showBookmark - Show bookmark button: true or false
  • hideNoImageItems - Hide items that do not have an image: true or false
  • subtitleSource - Subtitle content: category, address, etc.

Example with Parameters​

<div id="vibemap-sf-events"></div>
<script
	src="https://web.vibemap.com/load.js"
	data-iframe-el="vibemap-sf-events"
	data-resize="true"
	data-url="https://web.vibemap.com/embed/map-grid?slug=san-francisco&initialView=grid&gridColumns=4&showDateRangeSelector=true&showVibesOnCards=true"
></script>

Data Fetching​

The embed automatically:

  1. Fetches boundary data from https://api.vibemap.com/v0.3/boundaries?slug={slug}
  2. Extracts the city name and boundary polygon from the response
  3. Fetches all places from https://api.vibemap.com/v0.3/places/?city={cityName}&filter_by_boundary=1
  4. Handles pagination automatically to load all available places
  5. Displays the boundary polygon on the map
  6. Centers the map on the boundary

PostMessage Events​

The embed sends events to the parent window:

From Embed to Parent​

  • view-changed - User toggled between map/grid
  • filters-changed - User changed filter selections
  • card-clicked - User clicked a card
  • marker-clicked - User clicked a map marker
  • resize - Height changed (for iframe resizing)

From Parent to Embed​

  • lightbox-state - Lock viewport during modal/lightbox

Development​

Test locally:

# Basic test
http://localhost:3000/embed/map-grid?slug=san-francisco

# With options
http://localhost:3000/embed/map-grid?slug=oakland&initialView=grid&showVibesOnCards=true

# Test different cities
http://localhost:3000/embed/map-grid?slug=berkeley
http://localhost:3000/embed/map-grid?slug=austin

Note: Make sure the slug exists in the VibeMap API. You can check available boundaries at https://api.vibemap.com/v0.3/boundaries