Float/FloatBackOfffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
dev-chiefworks
2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/views/admin/report/view_report_heatmap.php
+217
View File
@@ -0,0 +1,217 @@
<h1>Heatmap</h1>
<br/>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 625px;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
background-color: #fff;
border: 1px solid #999;
left: 25%;
padding: 5px;
position: absolute;
top: 10px;
z-index: 5;
}
</style>
<div id="floating-panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map"></div>
<script>
// This example requires the Visualization library. Include the libraries=visualization
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
var map, heatmap;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: <?=$center_lat?>, lng: <?=$center_lng?>},
mapTypeId: 'roadmap'
});
heatmap = new google.maps.visualization.HeatmapLayer({
data: getPoints(),
map: map
});
var iconBase =
'https://developers.google.com/maps/documentation/javascript/examples/full/images/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
var icon = {
url: '/assets/images/pin-673-443159.png',
size: new google.maps.Size(30, 40),
scaledSize: new google.maps.Size(30, 40)
};
var features = []; //getParkings();
// Create markers.
for (var i = 0; i < features.length; i++) {
var marker = new google.maps.Marker({
position: features[i].position,
icon: icon, /*icons['parking'].icon,*/ /*features[i].type].icon,*/
title: features[i].provider + '\r\n' + features[i].name + '\r\n' + features[i].description,
map: map
});
};
var toplocations = getTopLocations();
for (var i = 0; i <toplocations.length; i++) {
var marker = new google.maps.Marker({
position: toplocations[i].position,
icon: icons['library'].icon, /*features[i].type].icon,*/
title: 'Total ' + toplocations[i].count,
map: map
});
}
customSettings();
}
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
function changeRadius() {
heatmap.set('radius', heatmap.get('radius') ? null : 50);
}
function changeOpacity() {
heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}
// Heatmap data: 500 Points
function getPoints() {
return [
<?
foreach ($top_locations as $f) {
if ($f["total"]>1) {
for ($i=0;$i<$f["total"];$i++) {
echo "new google.maps.LatLng(".$f["lat"].",".$f["lng"]."),\n";
}
} else {
echo "new google.maps.LatLng(".$f["lat"].",".$f["lng"]."),\n";
}
}
?>
];
}
function getTopLocations() {
return [
<? $i=0; foreach ($top_locations as $f) { ?>
{position: new google.maps.LatLng(<?=$f["lat"].",".$f["lng"]?>), count: <?=$f["total"]?>},
<? $i++; if ($i>10) break; } ?>
];
}
function getParkings() {
return [<?
$handle = fopen("application/models/parking.txt", "r");
while (($line = fgets($handle)) !== false) {
echo "{position: new google.maps.LatLng(".trim(str_replace('position: {lat:','',str_replace('lng:','',str_replace('},','',$line))))."),";
echo " provider: \"\", name: \"\", description: \"\"},\n";
}
fclose($handle);?>];
}
</script>
Showing <?php echo count($top_locations); ?> result(s)
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<?=$googleKey?>&libraries=visualization&callback=initMap">
</script>
<script>
// $(function() {
// Handler for .ready() called.
function customSettings() {
heatmap.set('radius', 30);
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.set('gradient', gradient);
}
//});
/*
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
*/
</script>
<h1>Top locations</h1>
<table>
<tr><th>Total</th><th>Latitude</th><th>Longitude</th></tr>
<? foreach ($top_locations as $f) { ?>
<tr align=right>
<td><?=$f["total"]?></td>
<td><?=$f["lat"]?></td>
<td><?=$f["lng"]?></td>
</tr>
<? } ?>
</table>