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?
Go to file
 
 
Cannot retrieve contributors at this time
<!DOCTYPE html>
<html lang="en">
<head>
<title>Synchronize map views - 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 synchronize the views of two or more maps." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, synchronized maps" />
<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>
<!-- Load in the JavaScript for the map synchronizer module. -->
<script src="../Common/scripts/azure-maps-sync-maps.min.js"></script>
<script type='text/javascript'>
var maps = [], syncMap;
//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>'
};
function GetMap() {
//Point the Azure Maps domain to the US Azure Gov Cloud domain.
atlas.setDomain('atlas.azure.us');
//Initialize a map instance.
maps.push(new atlas.Map('map1', {
center: [-122.33, 47.6],
zoom: 12,
view: 'Auto',
authOptions: authOptions
}));
maps.push(new atlas.Map('map2', {
style: 'night',
view: 'Auto',
authOptions: authOptions
}));
maps.push(new atlas.Map('map3', {
style: 'grayscale_dark',
view: 'Auto',
authOptions: authOptions
}));
syncMap = atlas.syncMaps(maps);
}
function toggleEnabledState(elm) {
syncMap.setEnabled(elm.checked)
}
</script>
</head>
<body onload="GetMap()">
<div id="map1" style="position:relative;float:left;width:33%;min-width:100px;height:600px;"></div>
<div id="map2" style="position:relative;float:left;width:33%;min-width:100px;height:600px;"></div>
<div id="map3" style="position:relative;float:left;width:33%;min-width:100px;height:600px;"></div>
<div style="position:absolute;top:0px;left:calc(50% - 100px);background-color:white;padding:5px;">
<input type="checkbox" onclick="toggleEnabledState(this)" checked /> Toggle enabled state
</div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>
<h1 style="font-size:16px">Synchronize map views</h1>
</legend>
This sample shows how to synchronize the views of two or more maps.
This samples uses the open source <a href="https://github.com/Azure-Samples/azure-maps-sync-maps" target="_blank">Azure Maps Sync Maps module</a>.
</fieldset>
</body>
</html>