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.