2. i-Boating SDK Examples
  3. i-Boating : Change depth and distance unit.

i-Boating : Change depth and distance unit. 



<!DOCTYPE html>
<html>
<head>
    <title>i-Boating : Change depth and distance unit. </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;}
        #checkboxes {
            position: absolute;
            background: #fff;
            top:0;
            left:0;
            padding:10px;
        }
    </style>
</head>

<body>
<!-- The map will render under this div. pass it under options -->
<div id='map'></div>
<div id='checkboxes'> <input id='toggle-depth-ft' name='toggle-depth-ft' type='checkbox'> <label>Depth In Ft</label><br /> </div>

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

<script>

var s_globalmapobj = null;
window.onload = function() {
var options =
{
    container: 'map',
    zoom: 12.5,
    blc_access_token:'YOUR_ACCESS_TOKEN_HERE',
    blc_user_settings: {"depth":"m", "distance":"km"},
    center: [-122.3889607,37.8115202]
}
var map = blcgl.external_to_js.blcCreateMapObject(options);

map.on('load', function() {
	console.log('map loaded.');
	s_globalmapobj = map;
});
}
document.getElementById('toggle-depth-ft').onclick = function() {
	if(s_globalmapobj)  {
		var cb = document.getElementById('toggle-depth-ft');
		if(cb.checked) {
			s_globalmapobj.blcApplyUserSettings( {"depth":"ft", "distance":"mi"});
		}
		else {
			s_globalmapobj.blcApplyUserSettings( {"depth":"m", "distance":"km"});
		}
	}
};


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