<!DOCTYPE html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>

   {{ dvf_js }}
   {{ topojson }}
   {{ vega }}
   {{ jquery }}

   <style>

      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .legend {
          padding: 0px 0px;
          font: 10px sans-serif;
          background: white;
          background: rgba(255,255,255,0.8);
          box-shadow: 0 0 15px rgba(0,0,0,0.2);
          border-radius: 5px;
      }

      .key path {
        display: none;
      }

   </style>
</head>

<body>

   <div id="map" {{ size }}></div>

   <script>

      queue()
          {%- for load_path in json_paths %}
          {{ load_path }}
          {%- endfor %}
          .await(makeMap)

      function onEachFeature(feature, layer) {
          // does this feature have a property named popupContent?
          if (feature.properties && feature.properties.popupContent) {
              layer.bindPopup(feature.properties.popupContent);
              }
          };

      function makeMap(error, {% for var in func_vars %}{{ var }}
                       {%- if not loop.last %},{%- endif %}{%- endfor %}) {

          {% for topo in topo_convert %}
          {{ topo }}
          {% endfor %}

          {{ vega_parse }}

          function matchKey(datapoint, key_variable){
              if (typeof key_variable[0][datapoint] === 'undefined') {
                  return null;
              }
              else {
                  return parseFloat(key_variable[0][datapoint]);
              };
          };

          {% for scale in color_scales %}
          {{ scale }}
          {% endfor %}

          var map = L.map('map').setView([{{ lat }}, {{ lon }}], {{ zoom_level }});

          L.tileLayer('{{ Tiles }}', {
              maxZoom: {{ max_zoom }},
              minZoom: {{ min_zoom }},
              attribution: '{{ attr }}'
          }).addTo(map);

          {% for style in geo_styles %}
          {{ style }}
          {% endfor %}

          {% for layer in gjson_layers %}
          {{ layer }}
          {% endfor %}

          {% for legend in map_legends %}
          {{ legend }}
          {% endfor %}

          {% for mark, popup, add_mark in markers %}
          {{ mark }}
          {{ popup }}
          {{ add_mark }}
          {% endfor %}

          {% for line, popup, add_line in lines %}
          {{ line }}
          {{ popup }}
          {{ add_line }}
          {% endfor %}

          {% for multiline, add_multiline in multilines %}
          {{ multiline }}
          {{ add_multiline }}
          {% endfor %}

          {{ lat_lng_pop }}

          {{ click_pop }}

          {{ fit_bounds }}

      };

   </script>
</body>
