<!doctype html>
<html lang="en">
<head>
<title>i-Boating: Overlay nautical charts on Azure maps with full rotation, pinch, tilt support.</title>
<meta charset="utf-8" />
<link href="/favicon.ico" rel="shortcut icon" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="Nautical Charts, Azure, Maps, 3D, 2D, WebGL" />
<!-- Add references to the Azure Maps Map control JavaScript and stylesheet files -->
<link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.css" rel="stylesheet" />
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/3/atlas.min.js"></script>
<!-- nautical_map div is drawn on top of to pass all events to the underlying azure map div-->
<style>
body { margin: 0; padding: 0; }
html, body, #map { position:absolute;height: 100%; width:100%;}
#nautical_map {position:absolute;height: 100%; width:100%; pointer-events:none; touch-action:none;}
</style>
<!-- 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_azure_nautical.js?rand=1695425337'></script>
</head>
<body>
<div id="map"></div>
<div id="nautical_map"></div>
<script>
function createAzureMap() {
// Create an Azure Maps map object
var map = new atlas.Map('map', {
zoom: 12.5,
center: [-122.3889607,37.8115202],
antialias: true,
// Add authentication details for connecting to Azure Maps
authOptions: {
// Alternatively, use an Azure Maps key in development
// Get an Azure Maps key at https://azuremaps.com/
// NOTE: The primary key should be used as the key
authType: 'subscriptionKey',
subscriptionKey: 'AZURE_MAPS_KEY_HERE'
}
});
// Wait until the map resources are ready to create nautical map.
map.events.add('ready', function () {
// Add map controls
map.controls.add([
new atlas.control.ZoomControl(),
new atlas.control.PitchControl(),
new atlas.control.CompassControl(),
new atlas.control.StyleControl({
mapStyles: ['road', 'satellite', 'satellite_road_labels', 'night', 'grayscale_light', 'grayscale_dark', 'road_shaded_relief', 'high_contrast_light', 'high_contrast_dark']
})
], {
position: 'top-right'
});
new blc_azure_nautical.BlcAzureAdatper(map,
{
container: 'nautical_map',
blc_background_map: 'none',
blc_access_token:'YOUR_ACCESS_TOKEN_HERE'
}
);
addTestMarker(map) ;
});
}
function addTestMarker(map) {
var keys = atlas.getAllImageTemplateNames();
var imageid = keys[0];
var amarker = new atlas.HtmlMarker({
htmlContent: atlas.getImageTemplate(imageid),
text: '00', //Add '00' as placeholder for where text would be rendered on the icon.
position: [-122.3889607,37.8115202]
});
amarker.getElement().style.zIndex = 100;
map.markers.add(amarker);
}
window.onload = function() {
createAzureMap();
}
</script>
</body>
</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 -