Display contextmenu | TrackAsia GL JS Docs

Display contextmenu to map on right-click.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display contextmenu</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.js"></script>
<link href="https://unpkg.com/trackasia-gl@1.0.5/dist/trackasia-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
#where-is-this-with-google-map {
cursor: pointer;
}

#where-is-this-with-google-map:hover {
color: lightskyblue;
}
</style>

<div id="map"></div>

<script>
var map = new trackasiagl.Map({
container: 'map',
style: 'https://maps.track-asia.com/styles/v1/streets.json?key=public_key',
center: {"lat":10.762622,"lng":106.660172},
zoom: 10
});

let contextMarker = new trackasiagl.Marker();
let popup = new trackasiagl.Popup({ anchor: 'top' });

function displayContextMenu(map, lngLat) {
const innerHTML =
'<p id="where-is-this-with-google-map">Where is this with Google Map?</p>';

if (popup) popup.remove();
if (contextMarker) contextMarker.remove();

contextMarker.setLngLat(lngLat).addTo(map);
popup.setLngLat(lngLat).setHTML(innerHTML).addTo(map);

document
.getElementById('where-is-this-with-google-map')
.addEventListener('click', () => {
window.open(
`http://maps.google.com/maps?f=q&q=${lngLat.lat},${lngLat.lng}`,
'_blank'
);
if (popup) popup.remove();
});
}

map.on('contextmenu', function (event) {
// Handle right-click event here
// You can access the event object (e.g., event.clientX, event.clientY) to get mouse coordinates

// Prevent the default context menu from appearing
event.preventDefault();
displayContextMenu(map, event.lngLat);
});
</script>
 
</body>
</html>