Custom buttons

Introduction

In this page we will see how to replace a button to the pinpoint and once the custom button is clicked, to trigger another action.

For this example we will suppose that we want to replace the wemap like button and add a custom add to selection button to the pinpoint.

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

Add the custom button

The livemap can accepts a parameter custompetals to add custom buttons. The shape of this parameter is an array of the following properties:

• position: the position of the button. A pinpoint has 5 buttons, it takes a value between 1 and 5.
• iconurl: the url of the icon of the button
• text: the text of the button
• actionname: the name of the action to trigger when the button is clicked

[{
    position: 1,
    iconurl: 'https://i.pinimg.com/originals/9a/de/95/9ade95c53e0c62495126f14aa165fc4b.png',
    text: 'Add to selection',
    actionname: 'addToSelection'
}]

We can now create the livemap with this parameter:

const container = document.getElementById('map-container');
const options = {
    emmid: XXXXX,
    custompetals: [{
        position: 1, // 1 is the position of the default like button
        iconurl: 'https://i.pinimg.com/originals/9a/de/95/9ade95c53e0c62495126f14aa165fc4b.png',
        text: 'Add to selection',
        actionname: 'addToSelection'
    }]
};
const livemap = wemap.v1.createLivemap(container, options);

Add the listener to the button

Now that we have our new custom button, we need to listen to the action triggered by the button. You can refer to this page to see that we have access to the event actionButtonClick.

Add the listener to the livemap:

livemap.addEventListener('actionButtonClick', (event) => {
    // event:
    // - item: the item clicked
    // - itemType: the type of the item clicked (pinpoint or event)
    // - actionType: the type of action triggered (addToSelection)
});

Now that know when a custom button is clicked, we can do something when the button is clicked.

livemap.addEventListener('actionButtonClick', (event) => {
    switch (event.actionType) {
        case 'addToSelection':
            myCustomFunction(event.item);
            break;
        default:
            break;
    }
});

Live results

Code playground

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

Results