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
• mapMoved
• guidingStarted
• guidingUpdated
• guidingStopped
• fullscreenEnter
• fullscreenExit

info

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.

info

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 mapMoved event
• Update the list of places
• Update the map content according to the list

Listen to the mapMoved event

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

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

livemap.addEventListener('mapMoved', 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('mapMoved', 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('mapMoved', 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 list of valid pinpoints
        const pinpoints = convertDataToPinpoints(data);
        livemap.setPinpoints(pinpoints);
    });
});

How to externalize content from the map

We have a map with content but we don't want to use the default sidebar, we want to create our own sidebar with the content of the map. We can use the event listener contentUpdated to get the content of the map, this event will be triggered when the content of the map is updated. (on map move, on map zoom, when a filter applies, etc ...)

This example will require multiple steps:

• Listen to the contentUpdated event
• Use the content to create our own sidebar

Listen to the contentUpdated event

As we saw earlier, the livemap provides a contentUpdated event that is triggered when the content is updated.

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

livemap.addEventListener('contentUpdated', function(data) {
    // data: {
    //      type: 'pinpoints' | 'events'
    //      items: Array<Pinpoint | Event>,
    //      query: {
    //        query: string
    //        minaltitude: number
    //        maxaltitude: number
    //        tags: Array<string>
    //        bounds: BoundingBox
    //      }
    // }
});

This event provides multiple properties like the type of the content, the query used and the items. For our case we will only need the items.

Use the content to create our own sidebar

For this part we will create a simple sidebar with only the name and description of the points but you can create more complex elements to match your own design and needs.

const points = data.items;
const sidebar = document.getElementById('my-sidebar');
sidebar.innerHTML = '';

points.forEach((point) => {
    const sidebarItem = document.createElement('article');
    const sidebarItemTitle = document.createElement('h2');
    const sidebarItemDescription = document.createElement('p');
    sidebarItemTitle.innerHTML = point.name;
    sidebarItemDescription.innerHTML = point.description;

    sidebarItem.appendChild(sidebarItemTitle);
    sidebarItem.appendChild(sidebarItemDescription);

    sidebar.appendChild(sidebarItem);
});

Live results

And now if we put everything together we have a map with a custom sidebar that is updated when the map is moved. Try to move the map and see the sidebar update.

Code playground

  <div id="map_container"></div>
  <sidebar id="my-sidebar">
    <h1>My custom sidebar</h1>
    <section id="my-sidebar-content"></section>
  </sidebar>

Results