<!DOCTYPE html>
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"/>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css"/>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css"/>
   <link rel="stylesheet" href="https://raw.githubusercontent.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css"/>

   <style>

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

      #map {
        position:absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
      }

   </style>

   <style>
       #{{ map_id }} {
           position:relative;
           {{ size }}
           left:0.0%;
           top:0.0%;
       }
    </style>

</head>

<body>

    <div class="folium-map" id="{{ map_id }}" ></div>

</body>

<script>

    var southWest = L.latLng({{ min_lat }}, {{ min_lon }});
    var northEast = L.latLng({{ max_lat }}, {{ max_lon }});
    var bounds = L.latLngBounds(southWest, northEast);

    var {{ map_id }} = L.map('{{ map_id }}', {
        center:[{{ lat }}, {{ lon }}],
        zoom: {{ zoom_level }},
        maxBounds: bounds,
        layers: [],
        crs: L.CRS.{{crs}}
        });

    {% for tile in tile_layers %}
        var {{tile['id']}} = L.tileLayer(
            '{{tile['address']}}',
            {
                maxZoom: {{tile['max_zoom']}},
                minZoom: {{tile['min_zoom']}},
                attribution: '{{tile['attr']}}',
                detectRetina: {{tile['detect_retina'].__str__().lower()}}
                }
            ).addTo({{ map_id }});
    {% endfor %}

</script>

