It is possible to listen for events in order to track or respond to user behavior. To listen for an event, use the on(eventName, cb) function where eventName is the event name you wish to listen for, and cb is the callback function that is to be called on that event. The cb function will be called with the first argument being the event name, and subsequent arguments being event-specific (see below).

`userMoveStart`

This event will be triggered when a user starts moving the map (pan, zoom, pitch change, etc.) When this event triggers, your callback will receive the eventName ('userMoveStart') and a map status object identifying the new position, zoom, and pitch of the map.

`userMoving`

This event will be triggered repeatedly as a user is moving the map (pan, zoom, pitch change, etc.) When this event triggers, your callback will receive the eventName ('userMoving') and a map status object identifying the new position, zoom, and pitch of the map. Be aware that this event may fire multiple times per second as a user is dragging the map. To ensure a pleasant experience for your users, you must budget your callback CPU usage carefully. Avoid doing heavy DOM updates on this event - and instead use the userMoveStart or moveEnd events

`moveEnd`

This event will be triggered when a map movement of some kind is "completed". This movement can be triggered by a user, in which case the moveEnd event triggers when the user has lifted their finger from the mouse (or from the touch screen). This event can also be triggered upon completion of an automated map move, such as when a user selects a POI and the map repositions and zooms itself to highlight the POI location. When this event triggers, your callback will receive the eventName ('moveEnd') and a map status object identifying the new position, zoom, and pitch of the map.

`levelChange`

This event will be triggered any time the map is moved (pan, zoom, pitch change, etc.) When this event triggers, your callback will receive the eventName ('levelChange') and a level status object containing properties such as floorId, structureId, etc.

`poiSelected`

This event is triggered when a POI is selected by the user on the map. When this event triggers, your callback will receive the eventName ('poiSelected') and the POI object.

`poiShown`

This event is triggered when a POI is shown for any reason which can be due to:

• a user clicking a POI on the map
• selecting a POI from a search result
• programmatically displaying a POI via showPOI command
• sets a state via setState in which a POI is shown
• enters the map in a POI shown state via URL parameters

When this event triggers, your callback will receive the eventName ('poiSelected') and the POI object.

Code Sample

The following code sample shows how to implement the "poiSelected" event:

<!DOCTYPE html>
<html lang="en">

    <head>
        <script type="module">

            import LMInit from 'https://maps.locuslabs.com/sdk/LocusMapsSDK.js'

            const config = {
                venueId: 'lax',
                accountId: 'A11F4Y6SZRXH4X',
                headless: false
            }

            window.LMInit = LMInit
            LMInit.setLogging(true)
            LMInit.newMap('.mymap', config)
                .then(m => { 
                    window.map = m;
                    map.on('poiSelected', (_, details) => console.log(`poiSelected - ${details.poiId} - ${details.name}`))
                })
                .catch(e => console.error('Error initializing map: ', e))

        </script>
        <style>
            html, body, .mymap {
                height: 100%; margin: 0; padding: 0;
            }
        </style>
    </head>

    <body>
        <div class="mymap" style="height: 100%;"></div>
    </body>

</html>