<!DOCTYPE html>
<head>
   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
   <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>
   <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   <script src="http://d3js.org/queue.v1.min.js"></script>
   {{ dvf_js }}
   {{ topojson }}
   {{ vega }}
   {{ jquery }}
<style>

.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 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){
        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 }},
        attribution: '{{ attr }}'
    }).addTo(map);

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

    {{ lat_lng_pop }}

    {{ click_pop }}

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

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

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

};

</script>

</body>
