first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,276 @@
|
||||
<?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
|
||||
|
||||
Reference in New Issue
Block a user