images/1050010040277300.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Los Angeles Eaton Fire, Friday, 2025-01-10 10:36 AM Pacific</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/3.0.0/openseadragon.min.js"></script>
    <style>
      body {
        display: flex;
        flex-direction: column;
        height: 100vh;
        margin: 0;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
      }
      #openseadragon {
        flex: 1 1 auto;
      }
      #source {
        flex: 0 0 auto;
        padding: 5px;
          text-align: center;
        font-size: 12px;
      }
    </style>
</head>
<body>
    <div id="source">Los Angeles Eaton Fire, Friday, 2025-01-10 10:36 AM Pacific <br><a href="../"><span style="color:red;font-weight:bold;">NEWER IMAGERY IS AVAILABLE</span> More images and info &rarr;</a></div></a></div>
    <div id="openseadragon"></div>
    <script>
        // Initialising the OpenSeadragon viewer
        const viewer = OpenSeadragon({
            id: "openseadragon",
            prefixUrl: "https://cdnjs.cloudflare.com/ajax/libs/openseadragon/3.0.0/images/",
            tileSources: "https://firemaps-data.wil.cool/huge/huge/1050010040277300.dzi",
            showNavigator: true, // Adds a small navigator window
            zoomPerClick: 2,    // Adjust zoom level per click
            animationTime: 1.2, // Smooth animation time
            getTileUrl: function (level, x, y) {
                const baseUrl = this.buildTileUrl(level, x, y);
                return `${baseUrl}?v2`;
            }
        });
    </script>
</body>
</html>