{% comment %}Page stub.{% endcomment %}

<div id="diagramContainer" style="height: 400px"></div>

<style>
  .leaflet-container {
    background-color: transparent;
  }
  .documentation.with-expandable-toc > article {
    max-width: none;
  }
</style>

<script>
  (function () {
    var map = L.map('diagramContainer', {
      crs: L.CRS.Simple,
      attributionControl: false,
      scrollWheelZoom: false,
      zoomControl: false,
      minZoom: -10,
    }).
    setView([{{ page.image_height }}/2, {{ page.image_width }}/2]);

    map.addControl(L.control.zoom({ position: 'bottomleft' }));

    var bounds = [[0,0], [{{ page.image_height }}, {{ page.image_width }}]];
    var image = L.imageOverlay('{{ page.image_path }}', bounds).addTo(map);
    map.fitBounds(bounds);
  }());
</script>