On/Off
Event detection

on / off

Adds or removes a listener for a specific event on a given layer.
// Adds a listener
mapInstance.on(type, layerId, listener);
// Removes a listener
mapInstance.off(type, layerId, listener);

Parameter

Parameter
Description
Type
type
specifies which event to listen to.
String
Supported types:
"mouseup", "mousedown", "click", "dblclick", "mousemove", "mouseenter", "mouseleave, "mouseover", "mouseout", "contextmenu", "touchstart", touchend" or "touchcancel". "mouseenter" and "mouseover" events are triggered when the cursor enters a visible portion of the specified layer or map canvas from outside and vice versa for "mouseleave" and "mouseout".
layerId (Optional)
ID of a style layer. Only layer that matches the given parameter will trigger the event listener.
String
listener
A callback function that detects the event and triggers further procedures.
Function

Example(Javascript + HTML)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map Event</title>
</head>
<body>
<div style="height: 100vh">
<div id="app"></div>
<pre id="info"></pre>
</div>
<button style="position: absolute; float: top; top: 50px; left: 50px;" onclick="mapClick()">On map Click</button>
<button style="position: absolute; float: top; top: 50px; left: 150px;" onclick="mapClickoff()">OFF map Click</button>
<style>
#info {
display: block; position: absolute; float: top; top: 0; left: 30%;
width: 50%; padding: 10px; border: none; border-radius: 3px; font-size: 12px;
text-align: center; color: #222; background: #fff;
}
</style>
<script type="text/javascript" src="https://maps.fatos.biz/dist/fatosmap-gl.js"></script>
<script>
const LatLng = {lat: 37.482901, lng: 126.896038};
let mapInstance = new fatosmap.maps.Map(
document.getElementById("app"),
{
zoom: 14.5,
center: LatLng,
maxZoom: 20,
minZoom: 2,
key: 'YOUR_API_KEY',
}
);
function mapClick() {
mapInstance.on('click', clickEvent);
}
function clickEvent(e) {
console.log('click', e);
document.getElementById('info').innerHTML = JSON.stringify(e.lngLat);
}
function mapClickoff() {
mapInstance.off('click', clickEvent);
}
</script>
</body>
</html>
Last modified 10mo ago
Copy link
On this page
on / off
Parameter