<html>
  <head>
    <link rel="stylesheet" href="{{ static_css }}/DatasetJS-Viz-deps-0.1.3.css" />
    <style>
      {% include 'css/table.css' %}
      {% include 'css/base.css' %}
    </style>
    <script id="data" type="application/json">
      {{ DATA }}
    </script>
  </head>
  <style>
    #side-bar{
    position: absolute;
    width: 20%;
    top: 62px;
    z-index: 10000;
    background: white;
    height: 90%;
    right: 0;
    }
    #side-bar-content {
    padding-left: 10px;
    padding-right: 10px;
    }
    #tile-toggle {
    position: absolute;
    top: 20px;
    left: 50px;
    z-index: 10000;
    background: white;
    }
  </style>
  <body>
    <div ng-app="main">
      <div ng-controller="controller">
        <div style="height:{{ height | default('500px') }}">
          <button type="button" class="btn btn-secondary leaflet-bar" id="tile-toggle" ng-click="toggleBaseMap(basemap)">
            Dark Theme
          </button>
          <div id="lmap" style="width: 100%;"></div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="{{ static_js }}/DatasetJS-Viz-deps-0.1.3.js"></script>
    <script type="text/javascript" src="{{ static_js }}/DatasetJS-0.2.4.min.js"></script>
    <script type="text/javascript" src="{{ static_js }}/DatasetJS-Viz-0.1.5.min.js"></script>
    <script>
        {% include 'app.js' %}
    </script>
  </body>
</html>
