This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
Where abouts does the code go from screenshot 3 circle in blue go into screenshot 165, and the code show below to the map ready event callback area to add a simply overlay of weather radar running on my visual studio 2022 it's not working properly as shown in screenshot 1 and 2 no timer no clouds will this fix it?
The url link https://samples.azuremaps.com/?sample=animated-tile-layer is working online but when I copy and paste the code this code https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animated%20tile%20layer/Animated%20tile%20layer.html into https://github.com/rbrundritt/SimpleUwpAzureMaps in to MapApp.html code and I put in my azure maps authentication key in it won't work on visual studio 2022 code is
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated tile layer - Azure Maps Web SDK Samples</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="This sample shows how to animate an sequence of tile layers smoothly." />
<meta name="keywords" content="Microsoft maps, map, gis, API, SDK, animate, animation, tiles" />
<meta name="author" content="Microsoft Azure Maps" />
<meta name="version" content="1.0" />
<meta name="screenshot" content="screenshot.gif" />
<!-- Add references to the Azure Maps Map control JavaScript and CSS 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>
<!-- Add reference to the animation module. -->
<script src="/lib/azure-maps/azure-maps-animations.min.js"></script>
<script>
var map, layer, timer;
//Base weather tile layer URL for radar data. {azMapsDomain} is a placeholder that is set automatically by the map, and will also automatically append the map credentials to the request.
var urlTemplate = 'https://{azMapsDomain}/map/tile?api-version=2022-08-01&tilesetId={tilesetId}&zoom={z}&x={x}&y={y}&timeStamp={timeStamp}&tileSize=256&view=Auto';
//Details on the availability of the different weather layers.
var weatherLayers = {
'microsoft.weather.infrared.main': {
interval: 10 * 60 * 1000, //10 minute interval
past: 3 * 60 * 60 * 1000, //Data available up to 3 hours in the past.
future: 0 //Forecast data not avaiable.
},
'microsoft.weather.radar.main': {
interval: 5 * 60 * 1000, //5 minute interval
past: 1.5 * 60 * 60 * 1000, //Data available up to 1.5 hours in the past.
future: 1.5 * 60 * 60 * 1000 //Data available up to 1.5 hours in the future.
}
};
var displayMessages = [];
function getMap() {
//Initialize a map instance.
map = new atlas.Map('myMap', {
center: [-95, 40],
zoom: 3,
style: 'grayscale_dark',
view: 'Auto',
//Add authentication details for connecting to Azure Maps.
authOptions: {
//Use Microsoft Entra ID authentication.
//authType: 'anonymous',
clientId: 'b730af07-199c-4751-8603-6a8954ed0c35', //Your Azure Maps client id for accessing your Azure Maps account.
//getToken: function (resolve, reject, map) {
//URL to your authentication service that retrieves an Microsoft Entra ID Token.
//var tokenServiceUrl = 'https://samples.azuremaps.com/api/GetAzureMapsToken';
//fetch(tokenServiceUrl).then(r => r.text()).then(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: 'YX9uxPlXbDJHBNaAcaSSRjYFiUOLZPCOe6g8qJoXnH2mQ18Ljj0eJQQJ99AFACYeBjFGctIKAAAgAZMPbsqe'
}
});
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Load the radar layer by default.
loadWeatherLayer('microsoft.weather.radar.main');
});
}
function loadWeatherLayer(tilesetId) {
//If there is already a layer, stop it animating.
if (layer) {
layer.stop();
clearInterval(timer);
}
//Get the current time.
var now = new Date().getTime();
//Get the details for the requested weather layer.
var layerInfo = weatherLayers[tilesetId];
//Calculate the number of timestamps.
var numTimestamps = (layerInfo.past + layerInfo.future) / layerInfo.interval;
var tlOptions = [];
for (var i = 0; i < numTimestamps; i++) {
//Calculate time period for an animation frame. Shift the interval by one as the olds tile will expire almost immediately.
var time = (now - layerInfo.past) + (i + 1) * layerInfo.interval;
//Create a tile layer option for each timestamp.
tlOptions.push(createTileLayer(tilesetId, time));
//Optionally, create a message to display for each frame of the animation based on the time stamp.
if (time === now) {
displayMessages.push('Current');
} else {
var dt = (time - now) / 1000 / 60;
displayMessages.push(`${dt} minutes`);
}
}
if (layer) {
layer.setOptions({
tileLayerOptions: tlOptions
});
layer.play();
} else {
//Create the animation manager.
layer = new atlas.layer.AnimatedTileLayer({
tileLayerOptions: tlOptions,
duration: numTimestamps * 800, //Allow one second for each frame (tile layer) in the animation.
autoPlay: true,
loop: true
});
//Add an event to the underlying frame animation to update the message panel when the frame changes.
map.events.add('onframe', layer.getPlayableAnimation(), function (e) {
if (e.frameIdx >= 0) {
var msg = displayMessages[e.frameIdx];
document.getElementById('messagePanel').innerText = msg;
}
});
//Add the layer to the map.
map.layers.add(layer, 'labels');
//Setup an interval timer to shift the layers (remove oldest, add newest) based on the update interval of the tile layer.
timer = setInterval(intervalHandler(tilesetId), layerInfo.interval);
}
}
function createTileLayer(tilesetId, time) {
//Create an ISO 8601 timestamp string.
//JavaScripts format for ISO string includes decimal seconds and the letter "Z" at the end that is not supported. Use slice to remove this.
var timestamp = new Date(time).toISOString().slice(0, 19);
//Create a tile layer option for each timestamp.
return {
tileUrl: urlTemplate.replace('{tilesetId}', tilesetId).replace('{timeStamp}', timestamp),
tileSize: 256, //Weather tiles only available in 256 pixel size.
opacity: 0.9,
maxSourceZoom: 15 //Weather tiles only available to zoom level 15. If you zoom in closer, the map may pull tiles from level 15 to fill the map.
};
}
function intervalHandler(tilesetId) {
return function () {
//Get the details for the requested weather layer.
var layerInfo = weatherLayers[tilesetId];
//Calculate time period for an animation frame. Shift the interval by one as the olds tile will expire almost immediately.
var time = (now - layerInfo.past) + (i + 1) * layerInfo.interval;
//Create an ISO 8601 timestamp string.
//JavaScripts format for ISO string includes decimal seconds and the letter "Z" at the end that is not supported. Use slice to remove this.
var timestamp = new Date(time).toISOString().slice(0, 19);
//Get the current tile layer options from the animation layer.
var layers = layer.getOptions().tileLayerOptions;
//Remove the oldest tile layer options.
tlOptions.shift();
//Add the newest tile layer options.
tlOptions.push(createTileLayer(tilesetId, time));
//Update the animation layer.
layer.setOptions({ tileLayerOptions: tlOptions });
}
}
function updateTileLayer(elm) {
var tilesetId = elm.options[elm.selectedIndex].value;
loadWeatherLayer(tilesetId);
}
function setSpeed(elm) {
var speed = parseFloat(elm.options[elm.selectedIndex].value);
layer.setOptions({ speedMultiplier: speed });
}
</script>
</head>
<body onload="getMap()">
<div id="myMap" style="position:relative;width:100%;min-width:290px;height:600px;"></div>
<div style="position:absolute;top:15px;left:15px;border-radius:5px;padding:5px;background-color:white;">
Select weather overlay:
<select onchange="updateTileLayer(this)" title="Select weather overlay">
<option value="microsoft.weather.radar.main" selected="selected">Radar</option>
<option value="microsoft.weather.infrared.main">Infrared</option>
</select>
<br /><br />
<input type="button" value="Play" title="Play" onclick="layer.play();" />
<input type="button" value="Pause" title="Pause" onclick="layer.pause();" />
<input type="button" value="Stop" title="Stop" onclick="layer.stop();" />
<input type="button" value="Reset" title="Reset" onclick="layer.reset();" />
<br /><br />
Speed:
<select onchange="setSpeed(this)" title="Speed">
<option value="0.5">0.5x</option>
<option value="1" selected="selected">1x</option>
<option value="2">2x</option>
<option value="5">5x</option>
</select>
</div>
<div id="messagePanel" style="position: absolute;top: 20px;right: 20px;background-color: white;padding: 2px;border-radius: 15px;width: 110px;text-align: center;"></div>
<fieldset style="width:calc(100% - 30px);min-width:290px;margin-top:10px;">
<legend>Animated tile layer</legend>
This sample shows how to animate an sequence of tile layers smoothly.
This example uses the AnimatedTileLayer to animate through an array of tile layers.
For this sample weather data from Azure Maps through the <a href="https://docs.microsoft.com/en-us/rest/api/maps/render-v2/get-map-tile">Reader services</a> are used.
Infrared data is updated every 10 minutes and available for 3 hours in the past. Radar data updated every 5 minutes and available 1.5 hours past and future forecast.
This sample uses the open source <a href="https://github.com/Azure-Samples/azure-maps-animations" target="_blank">Azure Maps Animation module</a>
</fieldset>
</body>
</html>
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(32, 45%, 13%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ESP%3C/text%3E%3C/svg%3E)
Hi, @Luke Ferguson , have you include azure-maps-animations.min.js in the UWP project? From the code snippet, it seems refer to relative path.
Would that be in MainPage.xaml
This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Comments have been turned off. Learn more
I copy and paste this raw code https://github.com/Azure-Samples/AzureMapsCodeSamples/blob/main/Samples/Animations/Animated%20tile%20layer/Animated%20tile%20layer.html as shown in screenshot 1 its circled in blue into visual studio 2022 it would run and debug normally but it still won't work no timer clouds and I did put in my azure maps key?