Store Mouse Events

Overview
Sample

Overview

The Woosmap JS Store Locator API provides store events you can listen to. The name of the event should be one of the following: click, mousedown, mouseout, mouseover, mouseup.

An action may trigger multiple events. For instance, a click on a store marker first triggers mousedown, when the button is pressed, then mouseup and click when it’s released. For touchscreen and touchpad devices mouse events also happen, they are emulated.

Sample

Let’s test yourself the mouse events with the following example.

Here is the highlighted javascript snippet used to register the mouseover event and display hovered stores attributes using the woosmap.TemplateRenderer object.

        const mapView = new woosmap.TiledView(map, {/*options*/});
//Use a template to render store properties as HTML
const customTemplate = "<div class='store-photo'><img src=''/></div>"
    + "<div class='store-title'>Introducing Interactivity and Customization in Woosmap JS Store Locator API</div>"
    + "<div class='store-address'></div>";
//Register the mouseover event
mapView.addListener('mouseover', function (store) {
    // Render the hovered store info using woosmap.TemplateRenderer
    const templateRenderer = new woosmap.TemplateRenderer(customTemplate)
    const renderedTemplate = templateRenderer.render(store.properties);
    document.querySelector("#mouse-hover-content").innerHTML = renderedTemplate;
})

Was this article helpful?

Have more questions? Submit a request