then
/
opencoil-paracity
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

added icons to curl.php

master
user 4 years ago
parent
b53b1d6bdd
commit
69fc2de7f2
1 changed files with 103 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 108
      website/curl.php

108
website/curl.php
View File

@ -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
// construct lat/lon for use in leafet
$pos = $lat.', '.$lng;
//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";
// };
// TODO save json to file?...mmm one big one? seperate ones, timestamped ones?
//// 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>

Write Preview
Loading…
Cancel
Save