<div id=“container”>

<div id="map"></div>

</div> <script>

// var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
//   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
// });
{% for map in site.data.map_source.base %}
var {{% if map.id %}}{{ map.id }} =  {% if map.format %}{{ map.format }}{% endif %}('{% if map.url %}{{ map.url }}{% endif %}',{
  attribution: 'Developed by <a href="https://lerryws.xyz/">wslerry</a> | {% if map.attribution %}{{ map.attribution }}{% endif %}'
});
{% endfor %}
{% for map in site.data.map_source.overlay %}
  var {{% if map.id %}}{{ map.id }} =  {% if map.format %}{{ map.format }}{% endif %}('{% if map.url %}{{ map.url }}{% endif %}',{
    attribution: 'Developed by <a href="https://lerryws.xyz/">wslerry</a> | {% if map.attribution %}{{ map.attribution }}{% endif %}'
  });
{% endfor %}
{% if site.data.map_config.map_bound == true %}
  {% for map in site.data.map_config.param %}
    var corner1  = L.latLng({{ map.y1 }}, {{ map.x1 }}),
    corner2  = L.latLng({{ map.y2 }}, {{ map.x2 }});
    var bounds = L.latLngBounds(corner1, corner2);
  {% endfor %}
{% endif %}
{% for map in site.data.map_config.param %}
var coords = [{{ map.lat }}, {{ map.long }}]; // the geographic center of our map
var zoomLevel = {{ map.zoom }}; // the map scale
{% endfor %}
{% if site.data.map_config.map_bound == true %}
  {% for map in site.data.map_config.param %}
    var map = L.map('map', {
      maxBounds: bounds,
      center: coords,
      zoom: zoomLevel,
      maxZoom: {{ map.maxZoom }},
      minZoom: {{ map.minZoom }},
      layers: [{% for map in site.data.map_source.base %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %},
          {% for map in site.data.map_source.overlay %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %}]
    });
  {% endfor %}
{% else %}
  {% for map in site.data.map_config.param %}
    var map = L.map('map', {
      center: coords,
      zoom: zoomLevel,
      maxZoom: {{ map.maxZoom }},
      minZoom: {{ map.minZoom }},
      layers: [{% for map in site.data.map_source.base %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %},
          {% for map in site.data.map_source.overlay %}{% if map.select == true %}{{map.id}}{% endif %}{% endfor %}]
    });
  {% endfor %}
{% endif %}
// load basemap
var baseMaps = {
  {% for map in site.data.map_source.base %}
  "{% if map.name %}{{ map.name }}{% endif %}": {% if map.id %}{{ map.id }}{% endif %},
  {% endfor %}
};
// configuration for point data
{% for i in site.data.map_data.geojson.point %}
  {% if i.createIcon == false %}
    var {{i.name}}Style = {
      radius: {{ i.radius }},
      fillColor: "{{ i.fillColor }}",
      color: "{{ i.color }}",
      weight: {{ i.weight }},
      opacity: {{ i.opacity }},
      fillOpacity: {{ i.fillOpacity }}
    };
  {% else i.createIcon == true %}
    var {{i.name}}Style = {
      icon: '{{ i.icontype }}',
      iconShape: '{{ i.iconShape }}',
      borderColor: '{{ i.borderColor }}',
      textColor: '{{ i.textColor }}',
      innerIconStyle: 'font-size:10px;padding-top:1px;'
    };
    var {{i.name}}Beautify = L.BeautifyIcon.icon( {{i.name}}Style );
  {% endif %}
{% endfor %}
{% for i in site.data.map_data.geojson.point %}
var {{i.name}}_markerClusters = L.markerClusterGroup({showCoverageOnHover: false});
var {{i.name}}= L.geoJson(null, {
    pointToLayer: function (feature, latlng) {
        {% if i.createIcon == false %}
        return L.circleMarker(latlng, {{ i.name }}Style);
        {% else i.createIcon == true %}
        return L.marker(latlng, {
          icon: {{i.name}}Beautify
        });
        {% endif %}
    },
    onEachFeature: function (feature, layer) {
        var popupcontent = [];
        for (var prop in feature.properties) {
            popupcontent.push("<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>" + prop + "</th><td>"+ feature.properties[prop] + "</td></tr>" + "<table>");
        }
        layer.bindPopup(popupcontent.join("<hr />"));
        {{i.name}}_markerClusters.addLayer( layer )
    } //end onEachFeature
});
$.getJSON("{{ i.url }}", function (data) {
  {{i.name}}.addData(data);
});
{% endfor %}
// configuration for line data
{% for i in site.data.map_data.geojson.line %}
var {{i.name}}= L.geoJson(null, {
    style: function (feature) {
        return {
          color: "{{ i.color }}",
          weight: {{ i.weight }},
          dashArray: "{{ i.dashArray }}",
          opacity: {{ i.opacity }},
        };
    },
    onEachFeature: function (feature, layer) {
        var popupcontent = [];
        for (var prop in feature.properties) {
            popupcontent.push("<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>" + prop + "</th><td>"+ feature.properties[prop] + "</td></tr>" + "<table>");
        }
        layer.bindPopup(popupcontent.join("<hr />"));
    } //end onEachFeature
});
$.getJSON("{{ i.url }}", function (data) {
  {{i.name}}.addData(data);
});
{% endfor %}
// configuration for polygon data
function getColor(d) {
  return d > 16000 ? '#800026' :
  d > 14000  ? '#BD0026' :
  d > 12000  ? '#E31A1C' :
  d > 10000  ? '#FC4E2A' :
  d > 8000   ? '#FD8D3C' :
  d > 6000   ? '#FEB24C' :
  d > 4000   ? '#FED976' :
             '#FFEDA0';
}
// // configuration for polygon data
// function getColor(d) {
//   // d should be between 0 and 1
//   //
//   // 6 scale blues
//   var blue = ['rgb(239,243,255)',
//       'rgb(198,219,239)',
//       'rgb(158,202,225)',
//       'rgb(107,174,214)',
//       'rgb(49,130,189)',
//       'rgb(8,81,156)'
//       ];
//
//   return blue[Math.round(d*6)];
// }
{% for i in site.data.map_data.geojson.area %}
var {{i.name}}= L.geoJson(null, {
  style: function (feature) {
      return {
        fillColor: getColor(feature.properties['{{i.featID}}']),
        weight: {{i.weight}},
        opacity: {{i.opacity}},
        color: "{{i.color}}",
        dashArray: {{i.dashArray}},
        fillOpacity: {{i.fillOpacity}}
      };
  },
    onEachFeature: function (feature, layer) {
        var popupcontent = [];
        for (var prop in feature.properties) {
            popupcontent.push("<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>" + prop + "</th><td>"+ feature.properties[prop] + "</td></tr>" + "<table>");
        }
        layer.bindPopup(popupcontent.join("<hr />"));
    } //end onEachFeature
});
$.getJSON("{{ i.url }}", function (data) {
  {{i.name}}.addData(data);
});
{% endfor %}
// load overlay
var overlay = {
  {% for map in site.data.map_source.overlay %}
    "{% if map.name %}{{ map.name }}{% endif %}": {% if map.id %}{{ map.id }}{% endif %},
  {% endfor %}
  {% for i in site.data.map_data.geojson.point %}
  "{{i.name}}": {{i.name}}_markerClusters,
  {% endfor %}
  {% for i in site.data.map_data.geojson.line %}
  "{{i.name}}": {{i.name}},
  {% endfor %}
  {% for i in site.data.map_data.geojson.area %}
  "{{i.name}}": {{i.name}},
  {% endfor %}
};
L.control.layers(baseMaps, overlay, {collapsed: true}).addTo(map);
map.addControl(new L.Control.Fullscreen());

</script>