Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

AzureMapsGovCloudCodeSamples/AzureMapsCodeSamples/Controls/Spyglass map visualization.html

Go to file
 
 
Cannot retrieve contributors at this time
108 lines (93 sloc) 4.65 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<title>Spyglass map visualization - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico"/>
<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 add a spyglass data viewer to the map." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, spyglass, synchronized maps, magnifying glass" />
<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>
<!-- Add reference to the spyglass window module. -->
<script src="../Common/scripts/azure-maps-spyglass.min.js"></script>
<script type='text/javascript'>
var primaryMap, spyMap;
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
atlas.setDomain('atlas.azure.us');
//Add authentication details for connecting to Azure Maps.
var authOptions = {
//Use Azure Active Directory authentication.
authType: 'anonymous',
clientId: 'c9f2f391-13f1-407b-a4a5-f0a241bacfbf', //Your Azure Active Directory client id for accessing your Azure Maps account.
getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Azure Active Directory Token.
var tokenServiceUrl = 'https://azuremapscodesamples.azurewebsites.us/Common/TokenService.ashx';
fetch(tokenServiceUrl).then(function (response) {
return response.text();
}).then(function (token) {
resolve(token);
});
}
//Alternatively, use an Azure Maps key. Get an Azure Maps key at https://azure.com/maps. NOTE: The primary key should be used as the key.
//authType: 'subscriptionKey',
//subscriptionKey: '<Your Azure Maps Key>'
};
//Initialize a map instances.
primaryMap = new atlas.Map('primaryMap', {
center: [-87.65, 41.87],
zoom: 11,
view: 'Auto',
authOptions: authOptions
});
spyMap = new atlas.Map('spyMap', {
view: 'Auto',
authOptions: authOptions
});
//Create an insteance of the spyglass.
new atlas.Spyglass(primaryMap, spyMap, {
size: 400,
borderColor: '#555555',
borderWidth: 8
});
//Wait until the spyMap resources are ready and then load some data into is.
spyMap.events.add('ready', function () {
//Add an overlay of an old map image to the spyglass map.
spyMap.layers.add(new atlas.layer.ImageLayer({
url: '../Common/images/image-overlays/Chicago_1872_Map.png',
coordinates: [
[-87.732, 41.938], //Top Left Corner
[-87.592, 41.9381], //Top Right Corner
[-87.589, 41.811], //Bottom Right Corner
[-87.7298, 41.8105] //Bottom Left Corner
]
}));
});
}
</script>
<style>
.mapContainer {
position: relative;
width: 100%;
min-width: 290px;
height: 600px;
}
</style>
</head>
<body onload="GetMap()">
<div class="mapContainer">
<div id="primaryMap" class="mapContainer"></div>
<div id="spyMap"></div>
</div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend><h1 style="font-size:16px">Spyglass map visualization</h1></legend>
This sample shows how to add a spyglass data viewer to the map.
This samples uses the open source <a href="https://github.com/Azure-Samples/azure-maps-spyglass" target="_blank">Azure Maps Spyglass module</a>.
The old map image in this sample comes from <a href="https://commons.wikimedia.org/wiki/File:Chicago-warner-beers-1875.jpg" target="_blank">Wikimedia</a> and is a map of Chicago from 1875 created by Warner and Beers.
</fieldset>
</body>
</html>