<!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>
<style>
.marker {
background-size: cover;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: 'Open Sans', sans-serif;
}
</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() {
addTestMarker(map) ;
new blc_mapbox_nautical.BlcMapboxAdatper(map,
{
container: 'nautical_map',
blc_background_map: 'none',
blc_access_token:'YOUR_ACCESS_TOKEN_HERE'
}
);
});
function addTestMarker(map) {
var img_url = 'https://docs.mapbox.com/help/demos/custom-markers-gl-js/mapbox-icon.png';
const el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(' + img_url + ')';
el.style.zIndex = 100;
var popup = new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML(
`<h3>Hello Nautical</h3><p>Nautical using mapbox</p>`
);
// make a marker for each feature and add it to the map
var amarker = new mapboxgl.Marker(el)
.setLngLat([-122.3889607,37.8115202])
.setPopup(
popup
);
amarker.addTo(map);
popup.on('open', () => {
var popupElem = popup.getElement();
if(popupElem) {
popupElem.style.zIndex = 100;
}
});
}
</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 -