i-Boating: Overlay nautical charts on Azure maps with full rotation, pinch, tilt support.


<!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" />

    <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: 'AZUURE_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'
			    	}
			    );

		    });
	    }
	    window.onload = function() {
		    createAzureMap();
	    }
    </script>

</body>
</html>