<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Image Viewer</title>
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
        <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
        <style>
            body { margin:0; padding:0; width:100%; height:100%; background-color: #e5e5e5;}
            #map { position:absolute; top:0; bottom:0; width:100%; }
        </style>
    </head>

    <body>
        <div id='map'></div>
        <script type="text/javascript">

var map = L.map('map', {crs: L.CRS.Simple}).setView(new L.LatLng(0,0), 0);

fetch('{{ tilejson_endpoint|safe }}')
    .then(res => {
        if (res.ok) return res.json()
        throw new Error('Network response was not ok.')
    })
    .then(data => {
        L.tileLayer(
            data.tiles[0],
            {
                minzoom: data.minzoom,
                maxNativeZoom: data.maxzoom,
            }
        ).addTo(map)
    })
    .catch(err => {
        console.warn(err)
    })


        </script>
    </body>
</html>
