Map
The main map code is located in map.php.
This file is the one you would update to make any changes you want to map rendering.
Warning
Be sure to create a backup of your map.php file before making any changes.
The file Contents are below
1 <script>
2 const queryString = window.location.search;
3 const urlParams = new URLSearchParams(queryString);
4
5 var Lat = <?=($map_row['lat'] ? $map_row['lat'] : 0)?>;
6 var Lon = <?=($map_row['lon'] ? $map_row['lon'] : 0)?>;
7 var Zoom = <?=($map_row['zoom'] ? $map_row['zoom'] : 0)?>;
8
9
10 $(document).ready(function() {
11 var map = L.map('map').setView([Lat, Lon], Zoom)
12
13 // Add basemap
14 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
15 maxZoom: 18,
16 attribution: ''
17 }).addTo(map)
18
19
20 var featurecollection = <?=$geom_row['featurecollection']?>;
21
22 var choroplethLayer = L.choropleth(featurecollection, {
23 <?PHP if($map_row['metric']) { ?>
24 valueProperty: '<?=$map_row['metric']?>',
25 <?PHP } ?>
26 scale: ['#fbfad4', 'green'],
27 steps: 5,
28 mode: 'q',
29 style: {
30 color: '#fff',
31 weight: 2,
32 fillOpacity: 0.8
33 },
34 onEachFeature: function (feature, layer) {
35 var properties = feature.properties;
36
37 var html = '<table style="text-align: left; font-size: 100%;">';
38 for (const key in properties) {
39 html += '<tr><th>'+ key +"</th> <td>"+ properties[key] + "</td></tr>";
40 }
41 html += '</table>';
42
43 layer.bindPopup(html)
44 }
45 }).addTo(map)
46
47 <?PHP if($map_row['metric']) { ?>
48 // Add legend (don't forget to add the CSS from index.html)
49 var legend = L.control({ position: 'topright' })
50 legend.onAdd = function (map) {
51 var div = L.DomUtil.create('div', 'info legend')
52 var limits = choroplethLayer.options.limits
53 var colors = choroplethLayer.options.colors
54 var labels = []
55
56 // Add min & max
57 div.innerHTML = `
58 <div class="labels">
59 <div class="quarter1">` + limits[0] + `</div>
60 <div class="quarter2">` + Math.round(((limits[limits.length - 1]-limits[0])*.25)+limits[0]) + `</div>
61 <div class="quarter3">` + Math.round(((limits[limits.length - 1]-limits[0])*.75)+limits[0]) + `</div>
62 <div class="quarter4">` + limits[limits.length - 1] + `</div>
63 </div>`
64
65 limits.forEach(function (limit, index) {
66 labels.push('<li style="background-color: ' + colors[index] + '"></li>')
67 })
68
69 div.innerHTML += '<ul>' + labels.join('') + '</ul> <span><?=ucwords(str_replace("_", " ", $map_row['metric']))?></span>'
70
71 return div
72 }
73 legend.addTo(map)
74
75 <?PHP } ?>
76 });
77 </script>
You must restart Tomcat for the changes to register.
Note
The above script is very permissive. You should refine your CORS filter to reflect usage.