User interaction

Waygo's maps follow Mapbox GL JS's gesture and event handling for robust user interaction. When users interact with the map, their actions are captured as events which can enable custom interactions to built with Controls.

Default gestures

Desktop gestures

• Pan: Click and drag the map to move it.
• Adjust pitch: Right click and drag the map to adjust the pitch.
• Adjust zoom: Scroll the mouse wheel to adjust the zoom.
• Rotate: Right click and drag the map to rotate it, or on Mac hold control + click and drag the map to rotate it.

Mobile gestures

• Pan: Tap and drag the map to move it.
• Adjust zoom: Touch pinch with two fingers to adjust the zoom.
• Rotate: Rotate the map with two fingers.
• Adjust pitch: Drag the map up or down with two fingers to adjust the pitch.

Events

Events are triggered when a user interacts with the map. Events can include the following:

Listening to events

Listen to any of these events by subscribing to the event you're interested in:

# Listen to click events
mapView.on('click', (event) => {
    console.log('Clicked event', event);
});

# Listen to MapView load events
mapView.on('load', () => {
    console.log('Map has loaded');
});

• Show how to actually get info from the events, like what was clicked.

Programmatic gestures

When creating a MapView instance, you can set defaultControls option to true to enable default map gestures and default UI controls (ie. the Waygo standard search bar, floor selector, etc.). However you can instead use your own UI components to control the map (by not passing in the defaultControls option), and by instead programmatically triggering gestures with your own UI controls.

Change the floor

const floorButton = document.getElementById('floor-button');
const currentFloor = mapView.getCurrentFloor();
floorButton.addEventListener('click', () => {
    mapView.updateFloor(currentFloor + 1, zoomOut=true);
});

When the floor changes, a floorChanged event is fired:

mapView.on('floorChanged', (data) => {
    const { floorIndex } = data
    console.log("Updated to floor index:", floorIndex);
    ...
});

MapView states

A MapView instance always exists in one of 4 states:

• default: The map in its default state.
• search: The map in search mode.
• selectedContent: The map in selected content mode.
• directions: The map in wayfinding mode.

You can always programatically change the state of the MapView by calling one of 4 methods:

mapView.setToDefaultState();
mapView.setToSearchState(query);
mapView.setToSelectedContentState(contentId);
mapView.setToDirectionsState(startContentId, endContentId);

After the mapView state is updated, a state:{STATE_NAME} event is fired. You can listen for these events to perform any actions you need when the mapView state changes:

mapView.on('state:default', () => {
    console.log('MapView has entered default state');
});

mapView.on('state:search', (data) => {
    const { query, results } = data;
    console.log('MapView has entered search state');
    updateSearchResults(results);
});

mapView.on('state:selectedContent', (data) => {
    const { contentPlacementIds, selectedContentPlacement } = data;
    console.log('MapView has entered selectedContent state');
});

mapView.on('state:directions', (data) => {
    const { startContentPlacement, endContentPlacement } = data;
    console.log('MapView has entered directions state');
});

Fly the camera

You can fly the camera to a specific location by calling the flyTo method:

const zoomOutButton = document.getElementById('reset-map-view');
zoomOutButton.addEventListener('click', () => {
    mapView.flyTo({
        center: [lng, lat],
        zoom: 12,
        pitch: 36,
        bearing: -22,
        speed: 1.2,
        curve: 1.5,
        duration: 300
    });
});