<div id=“container”>
<div id="map"></div>
</div> <script>
// var OSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{ // attribution: '© <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>