dev-chiefworks
277 lines
8.9 KiB
PHP
277 lines
8.9 KiB
PHP
<?php
|
|
require('../backend.php');
|
|
require('config.php');
|
|
$q = "SELECT min(latitude),max(latitude),min(longitude),max(longitude) FROM address WHERE timezone=1"; //'Asia/Singapore'";
|
|
$r = pg_query($q);
|
|
$f = pg_fetch_row($r);
|
|
$lats = array($f[0],$f[1]);
|
|
$lngs = array($f[2],$f[3]);
|
|
$center_lat = (min($lats)+max($lats))/2;
|
|
$center_lng = (min($lngs)+max($lngs))/2;
|
|
// top locations
|
|
$q = "SELECT SUM(num) AS total, lat, lng FROM ( SELECT COUNT(*) AS num, ROUND(b.latitude,2) AS lat, ROUND(b.longitude,2) AS lng FROM parsedemail_item a LEFT JOIN address b ON b.id=a.location_start_id WHERE b.timezone=1 GROUP BY b.latitude, b.longitude UNION SELECT COUNT(*) AS num, ROUND(c.latitude,2) AS lat, ROUND(c.longitude,2) AS lng FROM parsedemail_item a LEFT JOIN address c ON c.id=a.location_end_id WHERE c.timezone=1 GROUP BY c.latitude, c.longitude ) AS foo GROUP BY foo.lat,foo.lng ORDER BY total DESC";
|
|
$r = pg_query($q);
|
|
$top_locations = array();
|
|
while ($f=pg_fetch_row($r)) {
|
|
$top_locations[] = $f;
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Heatmaps</title>
|
|
<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>
|
|
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
|
|
</head>
|
|
|
|
<body>
|
|
<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: 13,
|
|
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: '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 : 30);
|
|
}
|
|
|
|
function changeOpacity() {
|
|
heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
|
|
}
|
|
|
|
// Heatmap data: 500 Points
|
|
function getPoints() {
|
|
return [
|
|
<?
|
|
$q = "SELECT location_start_lat,location_start_lng,location_end_lat,location_end_lng FROM parsedemail_item WHERE location_start_tz='Asia/Singapore'";
|
|
$r = pg_query($q);
|
|
while ($f=pg_fetch_row($r)) {
|
|
if ($f[0]!==NULL && $f[1]!==NULL) {
|
|
echo "new google.maps.LatLng(".$f[0].",".$f[1]."),\n";
|
|
}
|
|
if ($f[2]!==NULL && $f[3]!==NULL) {
|
|
echo "new google.maps.LatLng(".$f[2].",".$f[3]."),\n";
|
|
}
|
|
}
|
|
?>
|
|
];
|
|
}
|
|
|
|
function getParkings() {
|
|
return [<?
|
|
$handle = fopen("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);?>];
|
|
}
|
|
<? /* ?>
|
|
// Markers
|
|
function getParkings2() {
|
|
return [
|
|
<?
|
|
$radius = 200000;
|
|
$url = $savvyext->cfgReadChar('microservices.catalog') . "/api/v1/parkings/?latitude=${center_lat}&longitude=${center_lng}&radius=${radius}";
|
|
$opts = array(
|
|
'http' => array(
|
|
'method' => "GET",
|
|
'header' => "Accept: application/json\r\n" .
|
|
"Authorization: Server-Token ${catalogToken}\r\n"
|
|
)
|
|
);
|
|
$context = stream_context_create($opts);
|
|
$body = file_get_contents($url, false, $context);
|
|
$data = json_decode($body,true);
|
|
if (is_array($data) && $data["count"]>0 && is_array($data["results"]) && count($data["results"])>0) {
|
|
foreach ($data["results"] as $f) {
|
|
// {"id":869,"provider":"Public","name":"Yellow Box","description":"Bukit Panjang Ring Road Block 542_YB","longitude":103.76393987440395,"latitude":1.3829555377103968,"radius":"1.000","image":null,"extra":{"RackCount":10,"ShelterIndicator":"Y"},"aproximate_scooter_availability":null}
|
|
echo "{position: new google.maps.LatLng(".$f["latitude"].",".$f["longitude"]."), ";
|
|
echo " provider: \"".$f["provider"]."\", name: \"".$f["name"]."\", description: \"".$f["description"]."\"},\n";
|
|
}
|
|
}
|
|
?>
|
|
];
|
|
}
|
|
<? */ ?>
|
|
function getTopLocations() {
|
|
return [
|
|
<? $i=0; foreach ($top_locations as $f) { ?>
|
|
{position: new google.maps.LatLng(<?=$f[1].",".$f[2]?>), count: <?=$f[0]?>},
|
|
<? $i++; if ($i>10) break; } ?>
|
|
];
|
|
}
|
|
</script>
|
|
Showing <?php echo pg_num_rows($r); ?> 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[0]?></td>
|
|
<td><?=$f[1]?></td>
|
|
<td><?=$f[2]?></td>
|
|
</tr>
|
|
<? } ?>
|
|
</table>
|
|
|
|
</body>
|
|
</html>
|
|
<?php
|
|
// vi:ts=2
|
|
|