first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
||||
<meta charset="utf-8">
|
||||
<title>Circles</title>
|
||||
<style>
|
||||
/* Always set the map height explicitly to define the size of the div
|
||||
* element that contains the map. */
|
||||
#map {
|
||||
height: 100%;
|
||||
}
|
||||
/* Optional: Makes the sample page fill the window. */
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<script>
|
||||
// This example creates circles on the map, representing populations in North
|
||||
// America.
|
||||
|
||||
// First, create an object containing LatLng and population for each city.
|
||||
var citymap = {
|
||||
chicago: {
|
||||
center: {lat: 41.878, lng: -87.629},
|
||||
population: 2714856
|
||||
},
|
||||
newyork: {
|
||||
center: {lat: 40.714, lng: -74.005},
|
||||
population: 8405837
|
||||
},
|
||||
losangeles: {
|
||||
center: {lat: 37.7126152, lng: -122.1754642},
|
||||
population: 360000
|
||||
},
|
||||
vancouver: {
|
||||
center: {lat: 49.25, lng: -123.1},
|
||||
population: 603502
|
||||
}
|
||||
};
|
||||
|
||||
function initMap() {
|
||||
// Create the map.
|
||||
var map = new google.maps.Map(document.getElementById('map'), {
|
||||
zoom: 4,
|
||||
center: {lat: 37.090, lng: -95.712},
|
||||
mapTypeId: 'terrain'
|
||||
});
|
||||
|
||||
// Construct the circle for each value in citymap.
|
||||
// Note: We scale the area of the circle based on the population.
|
||||
for (var city in citymap) {
|
||||
// Add the circle for this city to the map.
|
||||
var cityCircle = new google.maps.Circle({
|
||||
strokeColor: '#FF0000',
|
||||
strokeOpacity: 0.8,
|
||||
strokeWeight: 2,
|
||||
fillColor: '#FF0000',
|
||||
fillOpacity: 0.35,
|
||||
map: map,
|
||||
center: citymap[city].center,
|
||||
radius: Math.sqrt(citymap[city].population) * 100
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script async defer
|
||||
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvjiRTxngOQyBP4zpqFlZuiquc0ROvo9c&callback=initMap">
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
<?php require '../../svrsavvy/SAVVY/common/Polyline.php'; ?>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>View trips</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;
|
||||
}
|
||||
</style>
|
||||
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
<?php
|
||||
$flist = [];
|
||||
$dh = opendir('.');
|
||||
while (($f = readdir($dh)) !== false) {
|
||||
if (substr($f,-5)=='.json' && substr($f,0,5)=='trips') {
|
||||
$flist[] = $f;
|
||||
}
|
||||
}
|
||||
closedir($dh);
|
||||
$json = isset($_GET['json'])?$_GET['json']:'';
|
||||
$l = isset($_GET['leg'])?$_GET['leg']:0;
|
||||
$o = isset($_GET['overview'])?$_GET['overview']:0;
|
||||
if (count($flist)==1 && $json=='') $json = $flist[0];
|
||||
if ($json!="" && file_exists($json)) {
|
||||
$data = json_decode(file_get_contents($json), true);
|
||||
}
|
||||
?>
|
||||
<form>
|
||||
<select name="json">
|
||||
<? foreach ($flist as $f) { ?>
|
||||
<option value="<?=$f?>"<?=$f==$json?' selected':''?>><?=$f?></option>
|
||||
<? } ?>
|
||||
</select>
|
||||
<? if (isset($data) && is_array($data) && array_key_exists("options",$data) && is_array($data["options"])) { ?>
|
||||
<select name="leg">
|
||||
<? foreach ($data["options"]["legs"] as $leg) { ?>
|
||||
<option value="<?=$leg['id']?>"<?=$leg["id"]==$l?' selected':''?>>Leg #<?= $leg["id"] ?></option>
|
||||
<? } ?>
|
||||
</select>
|
||||
<? } ?>
|
||||
<input type="checkbox" name="overview" value="1"<?=$o==1?' checked':''?>> overview
|
||||
<input type=submit name=t value="Show" />
|
||||
</form>
|
||||
<hr size=-1>
|
||||
<div id="map"></div>
|
||||
<?php
|
||||
$points = [];
|
||||
if (isset($data) && is_array($data) && isset($data["options"]) && count($data["options"])>0) {
|
||||
foreach ($data["options"]["legs"] as $leg) {
|
||||
?>
|
||||
<table>
|
||||
<tr><td>Start address:</td><td><?= $data["location_start"]?></td></tr>
|
||||
<tr><td>End address:</td><td><?= $data["location_end"]?></td></tr>
|
||||
<tr><td>Departure time:</td><td><?= date("Y-m-d H:i:s",$leg["departure_time"])?></td></tr>
|
||||
<tr><td>Arrival time:</td><td><?= date("Y-m-d H:i:s",$leg["arrival_time"])?></td></tr>
|
||||
<tr><td>Distance:</td><td><?= sprintf("%0.02f",$leg["distance"]/1000) ?></td></tr>
|
||||
<tr><td>Duration:</td><td><?= (int)($leg["duration"]/60) ?></td></tr>
|
||||
<tr><td>Start location:</td><td><?= $data["location_start_lat"].",".$data["location_start_lng"]?></td></tr>
|
||||
<tr><td>End location:</td><td><?= $data["location_end_lat"].",".$data["location_end_lng"]?></td></tr>
|
||||
<tr><td>Steps:</td><td><?=count($data["options"]["leg_steps"][$leg["id"]])?></td></tr>
|
||||
</table>
|
||||
<table border=1 cellspacing=0>
|
||||
<tr>
|
||||
<th>Distance</th>
|
||||
<th>Duration</th>
|
||||
<th>Start location</th>
|
||||
<th>End ocation</th>
|
||||
<th>Travel mode</th>
|
||||
<th>Instructions</th>
|
||||
</tr>
|
||||
<?php if(leg["id"]==$l) $points=[]; foreach ($data["options"]["leg_steps"][$leg["id"]] as $step) { ?>
|
||||
<tr>
|
||||
<td><?=$step["distance"] ?></td>
|
||||
<td><?=$step["duration"]?></td>
|
||||
<td><?=$step["location_start_lat"].",".$step["location_start_lng"]?></td>
|
||||
<td><?=$step["location_end_lat"].",".$step["location_end_lng"]?></td>
|
||||
<td><?=$step["travel_mode"]?></td>
|
||||
<td><?=$step["html_instructions"]?></td>
|
||||
</tr>
|
||||
<?php if ($leg["id"]==$l) $points[] = $step["polyline"]; } ?>
|
||||
<?php if ($o==1 && $leg["id"]==$l) $points = $leg["overview_polyline"]; ?>
|
||||
</table>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
<script>
|
||||
var map;
|
||||
function initMap() {
|
||||
map = new google.maps.Map(document.getElementById('map'), {
|
||||
zoom: 13,
|
||||
center: {lat: 37.976187778798575, lng: -122.56306920732123},
|
||||
mapTypeId: 'roadmap'
|
||||
});
|
||||
<?php
|
||||
$i=0;
|
||||
foreach ($points as $item) {
|
||||
if ($item==NULL || $item=="") continue;
|
||||
$gps = Polyline::decode($item);
|
||||
echo ' var flightPlanCoordinates' . $i . ' = [' . "\n";
|
||||
$n = count($gps)-2;
|
||||
for ($j=0;$j<$n;$j+=2) {
|
||||
echo " {lat: ".$gps[$j].", lng: ".$gps[$j+1]."},\n";
|
||||
}
|
||||
echo " {lat: ".$gps[$n].", lng: ".$gps[$n+1]."}\n";
|
||||
?>
|
||||
];
|
||||
var flightPath<?=$i?> = new google.maps.Polyline({
|
||||
path: flightPlanCoordinates<?=$i?>,
|
||||
geodesic: true,
|
||||
strokeColor: '#FF0000',
|
||||
strokeOpacity: 1.0,
|
||||
strokeWeight: 2
|
||||
});
|
||||
flightPath<?=$i?>.setMap(map);
|
||||
<?php
|
||||
$i++;
|
||||
}
|
||||
?>
|
||||
}
|
||||
</script>
|
||||
<script async defer
|
||||
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvjiRTxngOQyBP4zpqFlZuiquc0ROvo9c&libraries=visualization&callback=initMap">
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user