<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mapbox GL JS example</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="robots" content="noindex, nofollow">
<!-- Nautical Mapping -->
<link rel='stylesheet' href='https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/5.5/blc-maps.css?rand=1695425337' />
<script src='https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/5.5/blc-maps.js?rand=1695425337'></script>
<script src='https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/5.5/blc_mapbox_nautical.js?rand=1695425337'></script>
<!-- End Nautical Mapping -->
<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
<script src="https://js.sentry-cdn.com/b4e18cb1943f46289f67ca6a771bd341.min.js" crossorigin="anonymous"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-instrumentile/v3.0.0/mapbox-gl-instrumentile.js" crossorigin="anonymous"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
<style>
body {
margin: 0;
padding:0
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%
}
#nautical_map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
pointer-events:none;
touch-action:none;
}
</style>
<script>
mapboxgl.accessToken = "MAPBOX_ACCESS_TOKEN_HERE"
</script>
</head>
<body>
<div id="map"></div>
<div id="nautical_map"></div>
<script>
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v12",
zoom: 12.5,
center: [-122.3889607,37.8115202]
});
map.on('load', function() {
new blc_mapbox_nautical.BlcMapboxAdatper(map,
{
container: 'nautical_map',
blc_background_map: 'none',
blc_access_token:'YOUR_ACCESS_TOKEN_HERE'
}
);
});
</script>
</body>
<!--
<script>
if (window.map instanceof mapboxgl.Map)
var i = new instrumentile(map, {
token: "pk.eyJ1IjoiZXhhbXBsZXMiLCJhIjoiY2p0MG01MXRqMW45cjQzb2R6b2ptc3J4MSJ9.zA2W0IkI0c6KaAhJfk9bWg",
api: "https://api.tiles.mapbox.com",
source: "docs-examples"
})
</script>
-->
</html>
New! i-Hunting Topo Maps now available -
iPhone / iPad Marine Navigation App and WMTS App are now available -
New! Macbook ChartPlotter, and Windows Marine Navigation App now available -