<?php
// Notes
// The api key from Scooty's app/account: iPtAHWdOVLEtgkaymXoMHVVg
// Below is the static html to generate the map, it can also be done more dynamically using https://github.com/LuminFire/leaflet-php but that might be overkill
// array of scooters
$scooters = array(
//'https://platform.tier-services.io/v1/vehicle/fbd739d6-554f-4eaf-bd9c-afe3d501c94b',
'https://opencoil.show/test-json.php?scooterID=1',
'https://opencoil.show/test-json.php?scooterID=2'
);
//make it like this
//$scooters = array(
//'https://opencoil.show/test-json.php?scooterID=1', name of artist, title, desc
//);
// for each scooter in array get the json (TODO, for each, safe to file/database?)
$getJSON = callAPI($scooters[0]);
// decode JSON data to PHP associative array
$arr = json_decode($getJSON, true);
// access values from the associative array
$lat = $arr["data"]["attributes"]["lat"]; // get lattitude
$lng = $arr["data"]["attributes"]["lng"]; // get longitude
$lst = $arr["data"]["attributes"]["lastLocationUpdate"]; // get time of last position
$rnt = $arr["data"]["attributes"]["isRentable"]; // check if scooter is rentable,
$act = $arr["data"]["attributes"]["state"]; // check if scooter is ACTIVE or MAINTAINANCE
//check if scooter is rentable
// if($rnt == true){
// echo "rentable";
// } else {
// echo "gallery not available";
// };
//check if scooter status (if ACTIVE)
// if($act === "ACTIVE"){
// echo "scooter is active";
// } else {
// echo "scooter is in repair";
// };
//// make date time file------
// construct lat/lon for use in leafet
$pos = $lat.', '.$lng;
// TODO save json to file?...mmm one big one? seperate ones, timestamped ones?
// 60 second update interval
// make timestamp file like original python one! to check for updates
// make new custom json:
// scooter 1/marker time1 { lat long }
// time2 { lat long }
// scooter 2/marker time1 { lat long }
// time2 { lat long }
//
//
// for each
// check if lastlocation is different...if update > latest file (map file..)
// check if is rentable
// 2 json files: is retantable, latlong, id, status
// historical: every 60 sec needs update..even tho no state changes
// Custom functions
function checkModified($file, $expiration){ //check if file is older than expiration time
}
function parseJSON(){
}
function callAPI($url){
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_FAILONERROR, true);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_HTTPHEADER, array(
'x-api-key: bpEUTJEBTf74oGRWxaIcW7aeZMzDDODe1yBoSxi2',
'Content-Type: application/json',
)); // set the api key
curl_setopt($curl, CURLOPT_USERAGENT,'ProductionRelease/3.8.2 (app.tier.sharing; build:3.8.2.0; iOS 12.4.4) Alamofire/4.9.1'); // set user-agent to that of the Tier.app, sniffed by burpsuite
$result = curl_exec($curl);
if(!$result){die("Connection Failure");}
curl_close($curl);
return $result;
}
?>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" / >
< script src = "https://code.jquery.com/jquery-1.12.4.min.js" > < / script >
< link rel = "stylesheet" type = "text/css" href = "https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" >
< script src = 'https://unpkg.com/leaflet@1.3.3/dist/leaflet.js' > < / script >
<!-- icons -->
< script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" > < / script >
< script src = "https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js" > < / script >
< link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css" / >
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" / >
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" / >
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" / >
< link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" / >
< link rel = "stylesheet" href = "https://rawcdn.githack.com/python-visualization/folium/master/folium/templates/leaflet.awesome.rotate.css" / >
<!-- begin timeslider -->
< script src = "SliderControl.js" > < / script >
< script src = "http://code.jquery.com/ui/1.9.2/jquery-ui.js" > < / script >
< link rel = "stylesheet" href = "http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" / >
< script src = "//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js" > < / script >
<!-- end of timeslider -->
< style >
#map {
height: 500px
}
< / style >
< script >
L_NO_TOUCH = false;
L_DISABLE_3D = false;
< / script >
< / head >
< body >
< div id = "map" > < / div >
< script >
// define icons
// prefix: glyphicon = bootstrap, list can be found here: https://getbootstrap.com/docs/3.3/components/
// prefix: fa = fontawesome, list is here: https://fontawesome.com/v4.7.0/cheatsheet/
var availableIcon = L.AwesomeMarkers.icon(
{"icon": "wifi", "iconColor": "white", "markerColor": "purple", "spin": "true", "prefix": "fa"}
);
var isRentedIcon = L.AwesomeMarkers.icon(
{"icon": "hourglass-half", "iconColor": "white", "markerColor": "pink", "prefix": "fa"}
);
var isMaintenanceIcon = L.AwesomeMarkers.icon(
{"icon": "wrench", "iconColor": "white", "markerColor": "black", "prefix": "fa"}
);
var map = L.map('map').setView([52.516190, 13.377693], 13);
var Stamen_Toner = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.{ext}', {
attribution: 'Map tiles by < a href = "http://stamen.com" > Stamen Design< / a > , < a href = "http://creativecommons.org/licenses/by/3.0" > CC BY 3.0< / a > — Map data © < a href = "http://www.openstreetmap.org/copyright" > OpenStreetMap< / a > ',
subdomains: 'abcd',
minZoom: 0,
maxZoom: 20,
ext: 'png'
});
map.addLayer(Stamen_Toner);
//for each...
var scooter1 = L.marker([<?php echo $pos ; ?> ],
{time: "2020-10-09T08:00:29Z"},
{icon: availableIcon}).addTo(map)
.bindPopup('Last updated <?php echo $lst ; ?> ')
.bindTooltip('artist name')
.setIcon(availableIcon); // scooter is available
//.setIcon(isRentedIcon); // scooter is rented
//.setIcon(isMaintenanceIcon); // scooter is rented
//.openPopup();
var scooter2 = L.marker([52.508926, 13.355061],
{time: "2020-10-09T08:00:29Z"},
{icon: availableIcon}).addTo(map)
.bindPopup('Last updated <?php echo $lst ; ?> ')
.bindTooltip('artist name')
//.setIcon(availableIcon); // scooter is available
.setIcon(isRentedIcon); // scooter is rented
//.setIcon(isMaintenanceIcon); // scooter is rented
//.openPopup();
var scooter3 = L.marker([52.506926, 13.348061],
{time: "2020-10-09T08:00:29Z"},
{icon: availableIcon}).addTo(map)
.bindPopup('Last updated <?php echo $lst ; ?> ')
.bindTooltip('artist name')
//.setIcon(availableIcon); // scooter is available
//.setIcon(isRentedIcon); // scooter is rented
.setIcon(isMaintenanceIcon); // scooter is rented
//.openPopup();
//scooter 3 different time and poss
var scooter3 = L.marker([52.509926, 13.348061],
{time: "2020-10-09T09:00:29Z"},
{icon: availableIcon}).addTo(map)
.bindPopup('Last updated <?php echo $lst ; ?> ')
.bindTooltip('artist name')
//.setIcon(availableIcon); // scooter is available
//.setIcon(isRentedIcon); // scooter is rented
.setIcon(isMaintenanceIcon); // scooter is rented
//.openPopup();
// time slider
//test markers
//var marker1 = L.marker([52.504926, 13.358061], {time: "2020-10-09T08:00:29Z"});
//var marker2 = L.marker([52.506926, 13.358061], {time: "2020-10-09T09:00:29Z"});
//var marker3 = L.marker([52.508926, 13.358061], {time: "2020-10-09T10:00:29Z"});
// var map = marker1;
// layerGroup = L.layerGroup([marker_e7a96a6d6b08479ba6d17d42769e5202]);
layerGroup = L.layerGroup([scooter1, scooter3]);
var sliderControl = L.control.sliderControl({layer:layerGroup});
map.addControl(sliderControl);
sliderControl.startSlider();
< / script >
< / body >
< / html >
