121 wiersze
3.6 KiB
HTML
121 wiersze
3.6 KiB
HTML
<html>
|
|
<head>
|
|
<title>GUI test</title>
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
|
<link href="css/hourly.css" type="text/css" rel="stylesheet">
|
|
<script src="js/jquery.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
|
|
var map;
|
|
var launch_img = "images/marker-sm-red.png";
|
|
var land_img = "images/marker-sm-red.png";
|
|
var burst_img = "images/pop-marker.png";
|
|
|
|
function initialize() {
|
|
var latlng = new google.maps.LatLng(52, 0);
|
|
var myOptions = {
|
|
zoom: 8,
|
|
center: latlng,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP
|
|
};
|
|
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
|
|
parseCSV("new.csv");
|
|
}
|
|
|
|
function parseCSV(csv_name) {
|
|
$.get(csv_name, null, function(data, textStatus) {
|
|
var lines = data.split('\n');
|
|
var path = [];
|
|
var max_height = -10; //just any -ve number
|
|
var max_point = null;
|
|
var launch_pt;
|
|
var land_pt;
|
|
$.each(lines, function(idx, line) {
|
|
entry = line.split(',');
|
|
if(entry.length >= 4) { // check valid entry length
|
|
var point = new google.maps.LatLng( parseFloat(entry[1]), parseFloat(entry[2]) );
|
|
if ( idx == 0 ) { // get the launch lat/long for marker
|
|
var launch_lat = entry[1];
|
|
var launch_lon = entry[2];
|
|
launch_pt = point;
|
|
}
|
|
|
|
// set on every iteration, last valid entry
|
|
// gives landing position
|
|
var land_lat = entry[1];
|
|
var land_lon = entry[2];
|
|
land_pt = point;
|
|
|
|
if(parseFloat(entry[3]) > max_height) {
|
|
max_height = parseFloat(entry[3]);
|
|
max_point = point;
|
|
}
|
|
path.push(point);
|
|
}
|
|
});
|
|
|
|
// make some nice icons
|
|
var launch_icon = new google.maps.MarkerImage(launch_img,
|
|
new google.maps.Size(16,16),
|
|
new google.maps.Point(0, 0),
|
|
new google.maps.Point(8, 8)
|
|
);
|
|
|
|
var land_icon = new google.maps.MarkerImage(land_img,
|
|
new google.maps.Size(16,16),
|
|
new google.maps.Point(0, 0),
|
|
new google.maps.Point(8, 8)
|
|
);
|
|
|
|
var launch_marker = new google.maps.Marker({
|
|
position: launch_pt,
|
|
map: map,
|
|
icon: launch_icon,
|
|
title: 'Balloon launch'
|
|
});
|
|
|
|
var land_marker = new google.maps.Marker({
|
|
position: land_pt,
|
|
map:map,
|
|
icon: land_icon,
|
|
title: 'Predicted Landing'
|
|
});
|
|
|
|
// now add the launch/land markers to map
|
|
launch_marker.setMap(map);
|
|
land_marker.setMap(map);
|
|
|
|
var path_polyline = new google.maps.Polyline({
|
|
path:path,
|
|
strokeColor: '#000000',
|
|
strokeWeight: 3,
|
|
strokeOpacity: 0.75
|
|
});
|
|
|
|
path_polyline.setMap(map);
|
|
|
|
var pop_marker = new google.maps.Marker({
|
|
position: max_point,
|
|
map: map,
|
|
icon: burst_img,
|
|
title: 'Balloon burst (max. altitude: ' + max_height + 'm)',
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body onload="initialize()">
|
|
<div id="map_canvas" style="width:100%; height:100%"></div>
|
|
<div id="scenario_template" class="box">
|
|
<h1>Scenario Template</h1>
|
|
hello world :)
|
|
<br>
|
|
this is a happy box
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|