i-Boating : Show popup with latitude, longitude on mouse click.



<!DOCTYPE html>
<html>
<head>
    <title>i-Boating : Show popup with latitude, longitude on mouse click. </title>
    <meta charset='utf-8'>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <link rel='stylesheet' href='https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/5.5/blc-maps.css?rand=1695425337' />
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; touch-action:none;}
    </style>
</head>

<body>
<div id='map'></div>
<script src='https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/5.5/blc-maps.js?rand=1695425337'></script>


<script>

var _map = null;
window.onload = function() {
var options =
{
    container: 'map',
    zoom: 10.5,
    blc_access_token:'YOUR_ACCESS_TOKEN_HERE',
    center: [-122.3889607,37.8115202]
}
var map = blcgl.external_to_js.blcCreateMapObject(options);


map.on('load', function() {
	_map = map;

    map.on('click', interactionClick);
});
}


var _popup = null;
function interactionClick(e) {
	if(_popup != null) {
		_popup.remove();
		_popup = null;
	}
	var lngLat = e.lngLat;
	var longitude = lngLat.lng;
	var latitude = lngLat.lat;
	var name = latitude.toFixed(5) + "," + longitude.toFixed(5);
	_popup = new blcgl.Popup({closeOnClick: false, closeButton:false, anchor:'bottom'})
		.setLngLat(lngLat)
		.setHTML('<h1>'+name+'</h1>')
		.addTo(_map);
}

</script>
</body>
</html>