JSFiddle - React, Tailwind, and code Playground

by Rikin Patel

HTML

<!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=2.0&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.
       ...