Examples

Examples

Load selection state with an iframe

This example demonstrates how to initialize a Waygo map with pre-selected items using an iframe embed. The map will load with specific criteria already applied and items selected.

The iframe approach is the simplest way to embed a map with pre-selected items. It provides the standard Waygo map experience with selection state already applied.

Alternative: Load selection state with Waygo.js

How it works

When using an iframe to embed a map with selection state, you append the selection criteria to the iframe URL in the following format:

https://maps.waygomaps.com/{mapId}/{mapViewId}/selection/{encryptedCriteria}/{multiSelect}

Where:

  • {mapId} - Your map identifier
  • {mapViewId} - Your map view identifier
  • {encryptedCriteria} - URL-encoded JSON criteria for selection
  • {multiSelect} - Boolean value (true or false) for multi-select functionality

Example: Load a map in selection mode for any booth feature

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map with Selection State</title>
    <style>
        body { margin: 0; padding: 0; }
        #map-container { width: 100%; height: 600px; }
    </style>
</head>
<body>
    <div id="map-container">
        <iframe 
            src="https://maps.waygomaps.com/kme-2025/eClHQuAOSue-LI6leXH5Cw/selection/%7B%22type%22%3A%22booth%22%7D/true"
            width="100%" 
            height="100%" 
            frameborder="0"
            allowfullscreen>
        </iframe>
    </div>
</body>
</html>

Selection Criteria Format

The criteria object defines what items should be made selectable in the selections state. Each map feature can be tagged with any data, and the criteria here can be used to filter out the unselectable features in any context.

Only features that fit all the provided criteria will be considered to be selectable. Common criteria include:

Criteria with Single Options

{
    criteria: { type: 'booth', size: '10x10' },
}

Criteria with Varying Options

{
    criteria: { type: 'booth', size: ['10x10', '20x20'] },
}

Complex Criteria

{
    criteria: { 
        type: 'booth', 
        size: ['10x10', '20x20'],
        amenities: ['power', 'internet'],
        location: 'main-hall'
    },
}

Multi-Select Behavior

The multiSelect parameter controls whether users can select multiple items:

  • true - Users can select multiple items
  • false - Users can only select one item at a time

URL Encoding

When constructing the iframe URL manually, make sure to properly URL-encode the criteria JSON:

const criteria = { type: 'booth', size: '10x10' };
const encodedCriteria = encodeURIComponent(JSON.stringify(criteria));
// Result: %7B%22type%22%3A%22booth%22%2C%22size%22%3A%2210x10%22%7D

Listening to Selection Changes

When users interact with the map and change selections, the iframe URL updates with query parameters containing the selected features. You can listen for these changes and extract the selection data.

URL Query Parameters

When selections change, the iframe URL updates with a sel query parameter:

https://maps.waygomaps.com/kme-2025/eClHQuAOSue-LI6leXH5Cw?sel=booth-101:TechCorp%20Booth,booth-102:Innovation%20Labs

The sel parameter contains comma-separated values in the format feature_id:name, where:

  • feature_id - The unique identifier of the selected feature
  • name - The display name of the feature (URL-encoded)

Extracting Selection Data

Here's how to decode and extract the selection data from the URL query parameter:

// Example URL with selections: ?sel=eaafcdf9154848728b03cfbe6cedbf97%3AD04%2Ca59c96a15ddd4afcbfafc46769cc9fe7%3AE08
const urlParams = new URLSearchParams(window.location.search);
const selParam = urlParams.get('sel');

if (selParam) {
    const selections = selParam.split(',').map(item => {
        const [encodedFeatureId, encodedName] = item.split(':');
        return {
            feature_id: decodeURIComponent(encodedFeatureId),
            name: decodeURIComponent(encodedName)
        };
    });
    
    console.log('Selected features:', selections);
    // Result: [
    //   { feature_id: 'eaafcdf9154848728b03cfbe6cedbf97', name: 'D04' },
    //   { feature_id: 'a59c96a15ddd4afcbfafc46769cc9fe7', name: 'E08' }
    // ]
}

Integration with Reservations API

The selection data extracted from the iframe URL provides all the information needed to facilitate a booking or reservation flow using the Reservations API.

The selection data from iframe URL query parameters gives you the feature_ids needed to create reservations. You can use this data in tandem with the Reservations API to build a complete booking flow.

View Reservations API Documentation

Key Data for Reservations

From the iframe URL query parameters, you can extract:

  • Feature IDs: feature_id from decoded selection data - Required for the reservations API
  • Feature Names: name from decoded selection data - Useful for user confirmation
  • Additional Properties: Can be accessed from the original feature data
// Example: Extract feature IDs for reservation
function handleSelectionChange(selections) {
    const featureIds = selections.map(sel => sel.feature_id);
    console.log('Selected features for reservation:', featureIds);
    
    // Send to your backend to call the Reservations API
    // POST /reservations/v1/{map_id}/{map_view_id}
    // Body: { feature_ids: featureIds, data: {...} }
}

Best Practices

  1. Test your criteria - Make sure your selection criteria matches the available options in your map
  2. Handle errors gracefully - Invalid criteria will result in an empty selection state
  3. Use HTTPS - Always use HTTPS URLs for production deployments
  4. Set appropriate dimensions - Ensure your iframe has adequate width and height for the map content
  5. Consider mobile - Test your iframe on mobile devices to ensure proper responsiveness
  6. Handle CORS restrictions - Be aware that cross-origin iframe access may be limited
  7. Polling frequency - Use reasonable intervals (1-2 seconds) to check for URL changes
  8. Error handling - Always wrap iframe URL access in try-catch blocks
  9. Backend integration - Send selection data to your backend for API calls rather than making them from the frontend