<!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>
        <script src="https://unpkg.com/leaflet-iiif@3.0.0/leaflet-iiif.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', {
  center: [0, 0],
  crs: L.CRS.Simple,
  zoom: 0
});

L.tileLayer.iiif('{{ info_endpoint|safe }}').addTo(map);
        </script>
    </body>
</html>
