mbgl-index.html

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

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

{% set headmatter %}
  <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' />

  <script src='./kartta-slider.js'></script>
  <link href='./kartta-slider.css' rel='stylesheet' />
  <script src='./mbgl-photomap.js'></script>
  <script src='./mbgl-timefilter.js'></script>
  <script src="./mbgl-map.js"></script>
  <link rel="stylesheet" type="text/css" href="./mbgl-map.css" />
{% endset %}


{% set headercontent %}
<div id="year-slider-placeholder"></div>
{% endset %}

{% block content %}
<div id="map-wrapper">
  <div id='map'></div>

<div id="sidebar">
  <div id="search-box">
    <input type="text" name="query" id="search-query-text" maxlength="50" placeholder="Search" autofocus="autofocus">
    <div id="search-button">Go</div>
  </div>

  <div id="search-results" class="kartta-hidden">
    <div id="search-results-close-button-wrapper">
      <div id="search-results-close-button">&times;</div>
    </div>  
    <div id="search-results-results">
      <div id="search-results-loading">Loading...</div>
      <ul id="search-results-list">
      </ul>
    </div>
  </div>
</div>


  <div id="map-3d-message-overlay" class="kartta-hidden">
    Choose a location in the map to switch to 3D view.  Then use mouse and W, A, S, D keys to move.
    <div id="cancel-3d-button">Cancel</div>
  </div>
  <div id="map-info-zoom-message" class="kartta-hidden">
    Zoom in to inspect features in the map
  </div>
  <div id="kartta-attribution">
    <a href="/copyright">Copyright</a>
  </div>
</div>
{% endblock %}