index.html

{% extends 'templates/site-with-overlay-footer.html' %}

{% set title %}
  {{ SITE_NAME }} - Home
{% endset %}

{% set headmatter %}
  <script src="./map.js"></script>
  <link rel="stylesheet" type="text/css" href="map.css" />
  <link rel="stylesheet" type="text/css" href="slider.css" />
  <script src='./mbgl/v1.12.0/mapbox-gl.js'></script>
  <link href='./mbgl/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <script src='./mbgl/mapbox-gl-inspect/v1.3.1/mapbox-gl-inspect.js'></script>
  <link href='./mbgl/mapbox-gl-inspect/v1.3.1/mapbox-gl-inspect.css' rel='stylesheet' />
{% endset %}

{% set headercontent %}
  <div class="timeslider-wrapper">
    <div id="timeslider">
      <input type="range" class="range" min="1800", max="2000", step="1" value="1950">
      <output class="bubble"></output>
    </div>
  </div>
{% endset %}

{% block content %}
    <div id="map-container">
      <div id='map'></div>
      <div id='debug-panel' class="hidden">
        <div id="debug-close" class="debug-close"></div>
        <div class="debug-container">
          <div>
            <input type="checkbox" id="debug-grid" name="debug-grid">
            <label for="debug-grid">Show Tile Grid</label>
          </div>
          <div>
            <input type="checkbox" id="debug-inspect" name="debug-inspect">
            <label for="debug-inspect">Inspect Data Under Cursor</label>
          </div>
          <div>
            Map Style:
            <div>
              <input type="radio" id="debug-map-style-antique" name="debug-map-style" value="antique" checked="true">
              <label for="debug-map-style-antique">Antique</label>
            </div>
            <div>
              <input type="radio" id="debug-map-style-xray" name="debug-map-style" value="xray">
              <label for="debug-map-style-xray">X-Ray</label>
            </div>
          </div>
        </div>
      </div>
      <div id='debug-splash'>
        Press '0' for debug panel
      </div>
    </div>
{% endblock %}