marker.js Live events
Events are the main tool at your disposal to customize how marker.js Live behaves as well as to extend its functionality.
You add event listeners for the available event types via the MarkerView.addEventListener() method. You pass the event type as the first parameter and the function to handle the event as the second.
Lifecycle events
Lifecycle event handlers receive the instance of MarkerView as the only argument.
Here's the list of marker.js Live lifecycle events:
create- fired whenMarkerViewis created but before any markers are loaded.load- fired when markers are loaded and added to the marker canvas.close- fired whenMarkerViewis closed.
Marker events
Marker events are high-level events associated with individual markers.
Marker events receive an instance of MarkerView and the affected marker (or undefined) as arguments.
select- fired when a marker is clicked.over- fired when a pointer enters or exits a marker. In the latter case, the marker argument isundefined
Pointer events
Pointer events, as the name suggests, are pointer (mouse, touch, stylus) associated with either specific markers or MarkerView as a whole.
Pointer event arguments are MarkerView instance, browser PointerEvent, and associated marker (if any).
pointerdown- mimics the browser'spointerdownevent in the context of MarkerView and a specific marker (if any).pointermove- mimics the browser'spointermoveevent in the context of MarkerView and a specific marker (if any).pointerup- mimics the browser'spointerupevent in the context of MarkerView and a specific marker (if any).pointerenter- mimics the browser'spointerenterevent in the context of MarkerView and a specific marker (if any).pointerleave- mimics the browser'spointerleaveevent in the context of MarkerView and a specific marker (if any).
Example
The snippet below sets all markers to be semitransparent when they load. And then makes the marker under the mouse pointer fully opaque.
const markerView = new mjslive.MarkerView(target);
// when loaded make all markers semi-tranpsarent
markerView.addEventListener("load", (mv) => {
mv.markers.forEach((m) => (m.outerContainer.style.opacity = "0.5"));
});
// when hovering over a marker make it opaque
markerView.addEventListener("over", (mv, m) => {
if (m && m !== previousMarker) {
m.outerContainer.style.opacity = "1";
} else if (m === undefined && previousMarker !== undefined) {
previousMarker.outerContainer.style.opacity = "0.5";
}
if (m !== previousMarker) {
previousMarker = m;
}
});
markerView.show(config);See also
Check out the above code in a live demo.