map
This commit is contained in:
Anton
parent
01b1d3b4b4
commit
9c9c7f3142
150
api_fun/damaged_scooters/damaged_map/index.php
Normal file
150
api_fun/damaged_scooters/damaged_map/index.php
Normal file
@ -0,0 +1,150 @@
|
||||
<?php
|
||||
|
||||
function makeMarker($id){ // generate appropriate markers based on latest JSON
|
||||
$readJSON = file_get_contents('./nonactiveScooters.json'); //read latest data
|
||||
$latestData = json_decode($readJSON, true);
|
||||
$scooter = $latestData[$id]["data"];
|
||||
$lat = $scooter["attributes"]["lat"]; // get lattitude
|
||||
$lng = $scooter["attributes"]["lng"]; // get longitude
|
||||
$pos = $lat.', '.$lng; // construct lat/lon for use in leafet
|
||||
$lst = $scooter["attributes"]["lastLocationUpdate"]; // get time of last position
|
||||
$rnt = $scooter["attributes"]["isRentable"]; // check if scooter is rentable,
|
||||
$act = $scooter["attributes"]["state"]; // check if scooter is: ACTIVE, INACTIVE, MAINTAINANCE, DAMAGED
|
||||
$bat = $scooter["attributes"]["batteryLevel"]; // battery level 0-100
|
||||
$nam = $scooter["attributes"]["code"]; // get the artist name
|
||||
|
||||
//check scooter status and construct marker with corresponding icon
|
||||
|
||||
//check if scooter is rentable
|
||||
if($rnt == true && $act === 'ACTIVE'){
|
||||
$marker = 'var scooter'.$nam.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
|
||||
.bindPopup("<b>'.$nam.'</b><br><b>batteryLevel: </b>'.$bat.'<br><b>Status: </b>'.$act.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'")
|
||||
.bindTooltip("'.$nam.'").setIcon(availableIcon);';
|
||||
};
|
||||
//check if scooter is rented out
|
||||
if ($rnt == false && $act === 'ACTIVE') {
|
||||
$marker = 'var scooter'.$nam.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
|
||||
.bindPopup("<b>'.$nam.'</b><br><b>batteryLevel:</b>'.$bat.'<br><b>Status: </b>'.$act.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'")
|
||||
.bindTooltip("'.$nam.'").setIcon(isRentedIcon);';
|
||||
|
||||
};
|
||||
//check if scooter battery is low
|
||||
if($act === "INACTIVE" && $bat > 0){
|
||||
$marker = 'var scooter'.$nam.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
|
||||
.bindPopup("<b>'.$nam.'</b><br><b>batteryLevel:</b>'.$bat.'<br><b>Status: </b>'.$act.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'")
|
||||
.bindTooltip("'.$nam.'").setIcon(lowBatIcon);';
|
||||
};
|
||||
|
||||
//check if scooters battery is dead
|
||||
if($act === "INACTIVE" && $bat == 0){
|
||||
$marker = 'var scooter'.$nam.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
|
||||
.bindPopup("<b>'.$nam.'</b><br><b>batteryLevel:</b>'.$bat.'<br><b>Status: </b>'.$act.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'")
|
||||
.bindTooltip("'.$nam.'").setIcon(noBatIcon);';
|
||||
};
|
||||
|
||||
//check if scooters is dead
|
||||
if($act === "DAMAGED" || $act === "MAINTAINANCE" || $act === "OUT_OF_ORDER" || $act === "GPS_ISSUE"){
|
||||
$marker = 'var scooter'.$nam.' = L.marker(['.$pos.'], {time: "'.$lst.'"}).addTo(map)
|
||||
.bindPopup("<b>'.$nam.'</b><br><b>batteryLevel:</b>'.$bat.'<br><b>Status: </b>'.$act.'<br>Last updated: '.$lst=str_replace(array('T', 'Z'), ' ', $lst).'")
|
||||
.bindTooltip("'.$nam.'").setIcon(isMaintenanceIcon);';
|
||||
};
|
||||
|
||||
|
||||
return $marker;
|
||||
|
||||
};
|
||||
|
||||
?>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<title>TIER Hamburg</title>
|
||||
<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"/>
|
||||
<!-- location -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.72.0/dist/L.Control.Locate.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol@0.72.0/dist/L.Control.Locate.min.js" charset="utf-8"></script>
|
||||
<!-- main css -->
|
||||
<link rel="stylesheet" href="main.css"/>
|
||||
<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", "prefix": "fa"}
|
||||
);
|
||||
var isRentedIcon = L.AwesomeMarkers.icon(
|
||||
{"icon": "hourglass-half", "iconColor": "white", "spin": "true", "markerColor": "pink", "prefix": "fa"}
|
||||
);
|
||||
var lowBatIcon = L.AwesomeMarkers.icon(
|
||||
{"icon": "battery-1", "iconColor": "white", "markerColor": "pink", "prefix": "fa"}
|
||||
);
|
||||
var noBatIcon = L.AwesomeMarkers.icon(
|
||||
{"icon": "battery-empty", "iconColor": "white", "markerColor": "black", "prefix": "fa"}
|
||||
);
|
||||
var isMaintenanceIcon = L.AwesomeMarkers.icon(
|
||||
{"icon": "wrench", "iconColor": "white", "markerColor": "black", "prefix": "fa"}
|
||||
);
|
||||
|
||||
|
||||
var map = L.map('map', { zoomControl: false, attributionControl: false }).setView([52.516190, 13.377693], 11.5);
|
||||
|
||||
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);
|
||||
|
||||
//the magic: for each scooter in $scooters array, request status and construct marker
|
||||
<?php
|
||||
|
||||
$readJSON = file_get_contents('./nonactiveScooters.json'); //read latest data
|
||||
$latestData = json_decode($readJSON, true);
|
||||
$id = 0; //start id
|
||||
foreach ($latestData as $item) {
|
||||
$scooter = $item['data'];
|
||||
print_r($scooter.PHP_EOL);
|
||||
echo makeMarker($id);
|
||||
$id++;
|
||||
};
|
||||
|
||||
?>
|
||||
|
||||
L.control.locate(
|
||||
{ "keepCurrentZoomLevel": "true",
|
||||
icon: 'fa fa-crosshairs',
|
||||
follow: true,
|
||||
circleStyle: {}, // change the style of the circle around the user's location
|
||||
markerStyle: {},
|
||||
locateOptions: {
|
||||
enableHighAccuracy: true
|
||||
}
|
||||
}).addTo(map);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
302
api_fun/damaged_scooters/damaged_map/main.css
Normal file
302
api_fun/damaged_scooters/damaged_map/main.css
Normal file
@ -0,0 +1,302 @@
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#title-container {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
z-index: 800;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
font-family: Courier;
|
||||
color: #d152b8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-top: 2%;
|
||||
padding-right: 2%;
|
||||
font-size: 10vw;
|
||||
align-self: flex-start;
|
||||
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-top: 10%;
|
||||
padding-right: 2.5%;
|
||||
font-size: 3vw;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding-top: 15%;
|
||||
font-size: 2.5vw;
|
||||
padding-right: 2%;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
#bottom_menu {
|
||||
position: absolute;
|
||||
pointer-events: all !important;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-self: flex-end;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
height: 4%;
|
||||
width: 100%;
|
||||
font-family: Courier;
|
||||
font-weight: bold;
|
||||
font-size: 2vw;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
border: 1px #d152b8;
|
||||
|
||||
}
|
||||
|
||||
#bottom_menu a {
|
||||
padding: 1vw 3vw 1vw 3vw;
|
||||
color: #d152b8;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
#infotext, #infotext_en, #abouttext, #contacttext, #popuptext, #popuptext_en, #howtotext, #howtotext_en:-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
#infotext, #infotext_en, #abouttext, #contacttext, #howtotext, #howtotext_en, #popuptext, #popuptext_en {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
#infotext, #infotext_en, #abouttext, #contacttext, #howtotext, #howtotext_en, #popuptext, #popuptext_en {
|
||||
|
||||
visibility: hidden;
|
||||
opacity:0;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: scroll !important;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
word-wrap: break-word;
|
||||
background-color: #d152b8;
|
||||
color: white;
|
||||
margin: 14% 10% 10% 10%;
|
||||
transition: opacity 1s;
|
||||
|
||||
}
|
||||
|
||||
#infotext p, #infotext_en p, #abouttext p, #howtotext p, #howtotext_en p {
|
||||
padding: 0% 10% 10% 10%;
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
font-size: 1.5vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#popuptext p, #popuptext_en p {
|
||||
padding: 0% 10% 10% 10%;
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
font-size: 2.5vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#infotext a, #infotext_en a, #abouttext a, #howtotext a, #howtotext_en a , #popuptext a, #popuptext_en a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#howtotext a {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
#howto {
|
||||
font-size: 2vw;
|
||||
}
|
||||
|
||||
#contacttext p {
|
||||
padding: 0% 10% 10% 10%;
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
font-size: 1.5vw;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#contacttext a, #contacttext span, , #howtotext span, #howtotext_en span {
|
||||
color: white;
|
||||
padding-left: 5vw;
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
#abouttext p {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
#abouttext span {
|
||||
font-size: 1.5vw;
|
||||
}
|
||||
|
||||
#infobuttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
#closeButton {
|
||||
height: min-content;
|
||||
width: min-content;
|
||||
font-family: Arial;
|
||||
font-size:2vw;
|
||||
font-weight:bold;
|
||||
padding:1%;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#enButton {
|
||||
position: relative;
|
||||
height: min-content;
|
||||
width: min-content;
|
||||
margin: 0;
|
||||
font-family: Arial;
|
||||
font-size:2vw;
|
||||
font-weight:bold;
|
||||
color: white;
|
||||
padding:1%;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#closeButtonbottom {
|
||||
position: relative;
|
||||
font-family: Arial;
|
||||
font-size: 2vw;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding-bottom: 5vh;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*client location*/
|
||||
.leaflet-control-locate a {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.leaflet-control-locate a span {
|
||||
font-size: 1.4em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.leaflet-control-locate.active a {
|
||||
color: #2A93EE;
|
||||
}
|
||||
.leaflet-control-locate.active.following a {
|
||||
color: #2A93EE;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
|
||||
h1 {
|
||||
font-size: 15vw;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-top: 10vh;
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
h3 {
|
||||
padding-top: 15vh;
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
#howto {
|
||||
font-size: 6vw;
|
||||
}
|
||||
|
||||
#infotext, #infotext_en, #abouttext, #contacttext, #howtotext, #howtotext_en {
|
||||
visibility: hidden;
|
||||
overflow-x: hidden !important;
|
||||
overflow-y: scroll !important;
|
||||
position: absolute;
|
||||
z-index: 400;
|
||||
width: 90%;
|
||||
height: 73%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
word-wrap: break-word;
|
||||
background-color: #d152b8;
|
||||
color: white;
|
||||
margin: 28% 5% 0% 5%;
|
||||
}
|
||||
|
||||
#abouttext span {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
#contacttext p {
|
||||
font-size: 5vw;
|
||||
}
|
||||
|
||||
#contacttext a, #contacttext span, , #howtotext span, #howtotext_en span {
|
||||
font-size: 4vw;
|
||||
}
|
||||
|
||||
#closeButton, #enButton {
|
||||
font-family: Arial;
|
||||
font-size:4vw;
|
||||
font-weight:bold;
|
||||
padding:3%;
|
||||
}
|
||||
|
||||
#closeButtonbottom {
|
||||
font-size:4vw;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
#infotext p, #infotext_en p, #abouttext p, #contacttext p, #howtotext p, #howtotext_en p {
|
||||
padding: 20px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
font-size: 4vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#bottom_menu {
|
||||
height: 5%;
|
||||
font-size: 5vw;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user