Event listeners

Introduction

In this page we will see how to use the livemap event listeners. We will show you multiples examples and use cases that you can use with our SDK.

First, you will have to instanciate a livemap in your page in order to access the livemap object. You can find this example here.

The different event listeners

Once you have create your livemap, the livemap object allows you to use the livemap.addEventListener function, which takes an event name and a callback as parameters. Here are the list of event available:

• ready
• mapUpdate
• contentUpdated
• pinpointClick
• actionButtonClick
• pinpointOpen
• pinpointClose
• multipointOpen
• multipointClose
• eventOpen
• eventClose
• listOpen
• listClose
• livemapMoved
• guidingStarted
• guidingUpdated
• guidingStopped
• fullscreenEnter
• fullscreenExit

In the next sections we will not cover all the events but every events have an example in this section. It also assumes that you have already created you map.

How to trigger an action when a pinpoint is opened

Let's say we want trigger an action on our page when a pinpoint is opened or clicked, it can be: update the content next to your map accordingly, open a new page, etc ...

For this one we will open a new page when a pinpoint is clicked by using the pinpoint content

First, we will need to listen to the pinpointClick event:

livemap.addEventListener('pinpointClick', function(props) {

});

As we can see the pinpointClick callback is called with a props parameter. It allows us to retrieve the pinpoint that is opened to trigger our action.

pinpointClick, pinpointOpen, multipointOpen, eventOpen, listOpen events will pass the entity to the callback so you can use this data to trigger other action with the opened entity

livemap.addEventListener('pinpointClick', function(props) {
    window.open(props.pinpoint.link_url, '_blank');
});

In the previous code snippet, we use the link_url property of the pinpoint to open a new page.

If you don't want to let the pinpoint open (since you redirected the user to a new page), you have to use the livemap.closePinpoint function.

livemap.addEventListener('pinpointClick', function(props) {
    window.open(props.pinpoint.link_url, '_blank');
    livemap.closePinpoint();
});

Live results

Code playground

  <div id="map_container"></div>

Results

How to synchronize the map with your content

Let's say we have a list of places with a search by coordinates in our page and we want to update this list when the map moves to keep the list up to date with the map view.

This example will require multiple steps:

• Listen to the livemapMoved event
• Update the list of places
• Update the map content according to the list

Listen to the livemapMoved event

As we saw earlier, the livemap provides a livemapMoved event that is triggered when the map is moved.

First, we will need to listen to the livemapMoved event:

livemap.addEventListener('livemapMoved', function(props) {
    // props: {
    //     zoom,
    //     bounds,
    //     latitude,
    //     longitude
    // }
});

This event provides multiple properties that can be used to update the list of places.

Update the list of places

For this part it will be different depending of how you handle the data. For this example we will assume that we fetch the data from an API with a bounding box but you can also use the latitude and longitude properties.

livemap.addEventListener('livemapMoved', function(props) {
    fetch('API_URL', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            bounds: props.bounds
        })
    })
});

Update the map content according to the list

Now that we have fetch the data, we can update the map content.

livemap.addEventListener('livemapMoved', function(props) {
    fetch('API_URL', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            bounds: props.bounds
        })
    }).then((response) => {
        return response.json();
    }).then((data) => {
        // You should convert your data to a liste of valid pinpoints
        const pinpoints = convertDataToPinpoints(data);
        livemap.setPinpoints(pinpoints);
    });
});