Event 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

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>

PreviousEvent Once NextLayer Control

Last updated 2 years ago

<!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>