added icons to curl.php
This commit is contained in:
user
parent
b53b1d6bdd
commit
69fc2de7f2
110
website/curl.php
110
website/curl.php
@ -11,6 +11,15 @@ $scooters = array(
|
||||
'https://opencoil.show/test-json.php?scooterID=2'
|
||||
);
|
||||
|
||||
//make it like this
|
||||
$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'
|
||||
);
|
||||
|
||||
|
||||
|
||||
// for each scooter in array get the json (TODO, for each, safe to file/database?)
|
||||
$getJSON = callAPI($scooters[0]);
|
||||
|
||||
@ -21,18 +30,48 @@ $arr = json_decode($getJSON, true);
|
||||
$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
|
||||
|
||||
|
||||
|
||||
@ -72,17 +111,51 @@ function callAPI($url){
|
||||
<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 (glyphicon = bootstrap, list can be found here: https://getbootstrap.com/docs/3.3/components/)
|
||||
var availableIcon = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "remove", "iconColor": "white", "markerColor": "purple", "spin": "true", "prefix": "glyphicon"}
|
||||
);
|
||||
|
||||
var isRentedIcon = L.AwesomeMarkers.icon(
|
||||
{"extraClasses": "fa-rotate-0", "icon": "imdb", "iconColor": "white", "markerColor": "gray", "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}', {
|
||||
@ -94,9 +167,34 @@ function callAPI($url){
|
||||
});
|
||||
map.addLayer(Stamen_Toner);
|
||||
|
||||
L.marker([<?php echo $pos; ?>]).addTo(map)
|
||||
//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; ?>')
|
||||
.openPopup();
|
||||
.bindTooltip('artist name')
|
||||
//.setIcon(availableIcon); // scooter is available
|
||||
.setIcon(isRentedIcon); // scooter is rented
|
||||
//.openPopup();
|
||||
|
||||
|
||||
// scooter1.setIcon(icon_7e68fd836a604f9481171759656817aa);
|
||||
|
||||
|
||||
|
||||
// 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, marker2, marker3]);
|
||||
var sliderControl = L.control.sliderControl({layer:layerGroup});
|
||||
map.addControl(sliderControl);
|
||||
sliderControl.startSlider();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user