<div id='container'>

<div id='map'></div>
<script>
  {% for map in site.data.mapdata.base %}
    var {{% if map.id %}}{{ map.id }} =  {% if map.format %}{{ map.format }}{% endif %}('{% if map.url %}{{ map.url }}{% endif %}',{
      attribution: 'Website theme by <a href="https://lerryws.xyz/">wslerry</a> | {% if map.attribution %}{{ map.attribution }}{% endif %}'
    });
  {% endfor %}
  {% for map in site.data.mapdata.overlay %}
    var {{% if map.id %}}{{ map.id }} =  {% if map.format %}{{ map.format }}{% endif %}('{% if map.url %}{{ map.url }}{% endif %}',{
      attribution: 'Website theme by <a href="https://lerryws.xyz/">wslerry</a> | {% if map.attribution %}{{ map.attribution }}{% endif %}'
    });
  {% endfor %}
  {% if site.data.mapdata.map_bound == true %}
    {% for map in site.data.mapdata.param %}
      var corner1  = L.latLng({{ map.y1 }}, {{ map.x1 }}),
      corner2  = L.latLng({{ map.y2 }}, {{ map.x2 }});
      var bounds = L.latLngBounds(corner1, corner2 );
      {% for map in site.data.mapdata.param %}
      var map = L.map('map', {
        center: [{{ map.lat }},{{ map.long }}], //lat,long
        maxBounds: bounds,
        zoom: {{ map.zoom }},
        maxZoom: {{ map.maxZoom }},
        minZoom: {{ map.minZoom }},
        layers: [
        {% for map in site.data.mapdata.base %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %},
        {% for map in site.data.mapdata.overlay %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %}]
      });
      {% endfor %}
    {% endfor %}
  {% else %}
    {% for map in site.data.mapdata.param %}
      var map = L.map('map', {
        center: [{{ map.lat }},{{ map.long }}], //lat,long
        zoom: {{ map.zoom }},
        maxZoom: {{ map.maxZoom }},
        minZoom: {{ map.minZoom }},
        layers: [
        {% for map in site.data.mapdata.base %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %},
        {% for map in site.data.mapdata.overlay %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %}]
      });
    {% endfor %}
  {% endif %}
  // load geojson data
  {% if site.data.mapdata.load_geojson == true %}
    {% for map in site.data.mapdata.geojson.point %}
    function onEachPointFeature(feature, layer) {
      // does this feature have a property named popupContent?
      if (feature.properties && feature.properties.{{ map.feat }}) {
        layer.bindPopup(feature.properties.{{ map.feat }});
      }
    }
    var {{ map.id }}= L.geoJson(null,{onEachFeature: onEachPointFeature});
    $.getJSON("{{ map.url }}", function(data){ {{ map.id }}.addData(data);});
    {% endfor %}
    {% for map in site.data.mapdata.geojson.polygon %}
    function onEachPolygonFeature(feature, layer) {
    // does this feature have a property named popupContent?
    if (feature.properties && feature.properties.{{ map.feat }}) {
      layer.bindPopup(feature.properties.{{ map.feat }});
    }
  }
    var {{ map.id }}= L.geoJson(null,{onEachFeature: onEachPolygonFeature});
    $.getJSON("{{ map.url }}", function(data){ {{ map.id }}.addData(data);});
    {% endfor %}
    {% for map in site.data.mapdata.geojson.line %}
    function onEachLineFeature(feature, layer) {
      // does this feature have a property named popupContent?
      if (feature.properties && feature.properties.{{ map.feat }}) {
        layer.bindPopup(feature.properties.{{ map.feat }});
      }
    }
    var {{ map.id }}= L.geoJson(null,{onEachFeature: onEachLineFeature});
    $.getJSON("{{ map.url }}", function(data){ {{ map.id }}.addData(data);});
    {% endfor %}
  {% endif %}
  // load basemap
  var baseMaps = {
    {% for map in site.data.mapdata.base %}
    "{% if map.name %}{{ map.name }}{% endif %}": {% if map.id %}{{ map.id }}{% endif %},
    {% endfor %}
  };
  // load overlay
  var overlay = {
    {% for map in site.data.mapdata.overlay %}
    "{% if map.name %}{{ map.name }}{% endif %}": {% if map.id %}{{ map.id }}{% endif %},
    {% endfor %}
    {% if site.data.mapdata.load_geojson == true %}
      {% for map in site.data.mapdata.geojson.point %}
      "{% if map.name %}{{ map.name }}{% endif %}": {% if map.id %}{{ map.id }}{% endif %},
      {% endfor %}
      {% for map in site.data.mapdata.geojson.polygon %}
      "{% if map.name %}{{ map.name }}{% endif %}": {% if map.id %}{{ map.id }}{% endif %},
      {% endfor %}
      {% for map in site.data.mapdata.geojson.line %}
      "{% if map.name %}{{ map.name }}{% endif %}": {% if map.id %}{{ map.id }}{% endif %},
      {% endfor %}
    {% endif %}
  };
  L.control.layers(baseMaps, overlay, {collapsed: true}).addTo(map);
  map.addControl(new L.Control.Fullscreen());
  // Add map legend to bottom-left corner
  var legend = L.Control.extend({
    options: { position: 'bottomleft' },
    onAdd: function (map) {
      var container = L.DomUtil.create('div', 'legend');
      container.innerHTML = "<h6>Legends</h6><img src='assets/css/images/marker-icon.png' height=18px/> Just a bunch of pointless points";
      return container;
    }
  });
  map.addControl(new legend());
</script>
<script src="{{ '/assets/js/jquery.min.js' | prepend: site.url }}"></script>
      <script src="{{ '/assets/js/leaflet.js' | prepend: site.url }}"></script>
<script src="{{ '/assets/js/Leaflet.fullscreen.min.js' | prepend: site.url }}"></script>

</div>