index.html

---
layout: map
title: Colorful Traces
---
<div id="mapid"></div>


<div id="insights-sidebar" class="sidebar sidebar-left active">
  <div class="dismiss">
    <i class="fas fa-arrow-left"></i>
  </div>
  <div class="sidebar-header">
    <h5>Insights</h5>
  </div>

  <div class="sidebar-content">
    <div class="title">Deliveries throughout the day</div>
    <figure id="time-hist"></figure>

    <div class="title">Delivery distance</div>
    <figure id="distance-hist"></figure>

    <div class="title">Delivery duration</div>
    <figure id="duration-hist">    </figure>
  </div>
  
</div>

{% include clock.html %}

<div id='right-panel'>
  <div class="card map-panel" id='options-card'>
      <header class="card-header">
          <a href="#" data-toggle="collapse" data-target="#collapse-options" aria-expanded="true" class='collapsed'>
              <i class="icon-action fa fa-sort-down"></i>
              <span class="title">Options</span>
          </a>
      </header>
      <div class="collapse" id="collapse-options" style="">
          <article class="card-body">
              <div class="form-check">
                  <input id="rest-markers-check" class="form-check-input" type="checkbox" value="" checked>
                  <label class="form-check-label" for="rest-markers-check">
                      Show restaurants
                  </label>
              </div>
              <div>
                  <label class="btn-toggle-label" for="map-style-toggle">
                      Map style
                  </label>
                  <div id="map-style-toggle" class="btn-group btn-group-toggle" data-toggle="buttons">
                      <label id="map-style-dark" class="btn btn-secondary btn-sm active">
                          <input type="radio" name="options" autocomplete="off" checked> Dark
                      </label>
                      <label id="map-style-light" class="btn btn-secondary btn-sm">
                          <input type="radio" name="options" autocomplete="off"> Light
                      </label>
                  </div>
              </div>
          </article>
          <div class="card-body">
              <label class="legend" for="heatmap_legend">
                  Legend
              </label>
              <svg id="heatmap_legend"></svg>
          </div>
      </div>
  </div>
</div>