WMTS Tile Layer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>WMTS Tile Layer - Azure Maps Web SDK Samples</title>

    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="This sample shows how to create a tile layer which points to a Web Mapping Tile Service (WMTS)." />
    <meta name="keywords" content="Microsoft maps, map, gis, API, SDK, tiles, layer, WMTS, Web Mapping Tile Service" />
    <meta name="author" content="Microsoft Azure Maps" />

    <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
    <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
    <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

    <script type='text/javascript'>
        var map;

        //WMTS Service accessed from the USGS here: https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer
        //Original WMTS URL format: https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/WMTS/tile/1.0.0/USGSImageryOnly/default/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}
        //Note the settings; TileMatrixSet=EPSG:3857 or GoogleMapsCompatible, TileMatrix={z}, TileRow={y}, TileCol={x}
        var wmtsServiceUrl = 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/WMTS/tile/1.0.0/USGSImageryOnly/default/GoogleMapsCompatible/{z}/{y}/{x}';

        function GetMap() {
            //Point the Azure Maps domain to the US Azure Gov Cloud domain.
            atlas.setDomain('atlas.azure.us');

            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-99.47, 40.75],
                zoom: 4,
                view: 'Auto',

				//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: '<Your Azure Maps Key>'
                }
            });

            //Wait until the map resources are ready.
            map.events.add('ready', function () {
                //Create a tile layer and add it to the map below the transit layer so that roads appear above the imagery.
                map.layers.add(new atlas.layer.TileLayer({
                    tileUrl: wmtsServiceUrl,
                    tileSize: 256,
                    bounds: atlas.data.BoundingBox.fromEdges(-173.25000107492872, 0.0005794121990209753, 146.12527718104752, 71.506811402077),
                    maxSourceZoom: 18
                }), 'transit');
            });
        }
    </script>
</head>
<body onload="GetMap()">
    <div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>

    <fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
        <legend><h1 style="font-size:16px">WMTS Tile Layer</h1></legend>
        This sample shows how to create a tile layer which points to a Web Mapping Tile Service (WMTS).
        This method is a simple way to add WMTS onto the map, for a more robust option, take a look at the <a href="/index.html?search=wmts">OGC Map Layer examples</a>.
        The data in this sample is aerial imagery from the US Geological Survey.
        To add a WMTS to Azure Maps as a Tile Layer, the follow URL parameters would typically be set to the following;

        <ul>
            <li>TileMatrixSet: EPSG:3857 or GoogleMapsCompatible</li>
            <li>TileMatrix: {z}</li>
            <li>TileRow: {y}</li>
            <li>TileCol: {x}</li>
        </ul>

        The data in this sample comes from the <a href="https://viewer.nationalmap.gov/services/" target="_blank">U.S. Geological Survey (USGS) National Map</a>.
    </fieldset>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>WMTS Tile Layer - Azure Maps Web SDK Samples</title>

	<meta charset="utf-8" />
	<meta http-equiv="x-ua-compatible" content="IE=Edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	<meta name="description" content="This sample shows how to create a tile layer which points to a Web Mapping Tile Service (WMTS)." />
	<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, tiles, layer, WMTS, Web Mapping Tile Service" />
	<meta name="author" content="Microsoft Azure Maps" />

	<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
	<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
	<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>

	<script type='text/javascript'>
	var map;

	//WMTS Service accessed from the USGS here: https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer
	//Original WMTS URL format: https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/WMTS/tile/1.0.0/USGSImageryOnly/default/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}
	//Note the settings; TileMatrixSet=EPSG:3857 or GoogleMapsCompatible, TileMatrix={z}, TileRow={y}, TileCol={x}
	var wmtsServiceUrl = 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/WMTS/tile/1.0.0/USGSImageryOnly/default/GoogleMapsCompatible/{z}/{y}/{x}';

	function GetMap() {
	//Point the Azure Maps domain to the US Azure Gov Cloud domain.
	atlas.setDomain('atlas.azure.us');

	//Initialize a map instance.
	map = new atlas.Map('myMap', {
	center: [-99.47, 40.75],
	zoom: 4,
	view: 'Auto',

	//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
	authOptions: {
	authType: 'subscriptionKey',
	subscriptionKey: '<Your Azure Maps Key>'
	}
	});

	//Wait until the map resources are ready.
	map.events.add('ready', function () {
	//Create a tile layer and add it to the map below the transit layer so that roads appear above the imagery.
	map.layers.add(new atlas.layer.TileLayer({
	tileUrl: wmtsServiceUrl,
	tileSize: 256,
	bounds: atlas.data.BoundingBox.fromEdges(-173.25000107492872, 0.0005794121990209753, 146.12527718104752, 71.506811402077),
	maxSourceZoom: 18
	}), 'transit');
	});
	}
	</script>
	</head>
	<body onload="GetMap()">
	<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>

	<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
	<legend><h1 style="font-size:16px">WMTS Tile Layer</h1></legend>
	This sample shows how to create a tile layer which points to a Web Mapping Tile Service (WMTS).
	This method is a simple way to add WMTS onto the map, for a more robust option, take a look at the <a href="/index.html?search=wmts">OGC Map Layer examples</a>.
	The data in this sample is aerial imagery from the US Geological Survey.
	To add a WMTS to Azure Maps as a Tile Layer, the follow URL parameters would typically be set to the following;

	<ul>
	<li>TileMatrixSet: EPSG:3857 or GoogleMapsCompatible</li>
	<li>TileMatrix: {z}</li>
	<li>TileRow: {y}</li>
	<li>TileCol: {x}</li>
	</ul>

	The data in this sample comes from the <a href="https://viewer.nationalmap.gov/services/" target="_blank">U.S. Geological Survey (USGS) National Map</a>.
	</fieldset>
	</body>
	</html>