+++ /dev/null
-<!DOCTYPE html>
-<html>
-<head>
-<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
-<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
-<style type="text/css">
- html { height: 100% }
- body { height: 100%; margin: 0px; padding: 0px }
- #map_canvas { height: 100% }
-</style>
-<title>Foxy</title>
-
-<link rel="stylesheet" type="text/css" href="foxy.css">
-<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
-
-<script type="text/javascript">
-
- /*
- foxy.html
- David Rowe
- May 25 2013
-
- Simple Google Maps application to plot Fox Hunt bearings.
-
- See README.txt for more information.
-
- search/grep on string "idea" for future ideas documented in
- comments below.
-
- */
-
- var map;
-
- // cookie params
-
- var cookiename = "foxy0001";
- var cookieexpy = 7;
-
- // these are stored in cookie, with default values
-
- var lat = 0;
- var lng = 0;
- var myzoom = 2;
- var update_enable = 0;
- var debug_enable = 1;
- var known_location = true;
- var bearing = 0.0;
-
- var bearings = []; // database of bearings we keep in memory
- // mirrors breaings.txt
-
-
- // Called when we load page
-
- function initialize() {
-
- // we use our cookie as a mini-databse for map location,
- // control panel values etc
-
- getCookie();
-
- var myLatlng = new google.maps.LatLng(lat, lng);
- var myOptions = {
- zoom: myzoom,
- center: myLatlng,
- scaleControl: true,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- }
- map = new google.maps.Map(document.getElementById("main-map"), myOptions);
-
- google.maps.event.addListener(map, 'click', function (event) {
- bearing = parseFloat(document.control_panel.bearing.value);
- placeMarker(event.latLng, bearing, false);
- });
-
- document.control_panel.debug_enable.checked = debug_enable;
-
- // read from bearings.txt database text file on server and init map
-
- downloadUrl("/cgi-bin/getbearings.cgi", loadBearings);
- }
-
-
- // Slurp up bearings.txt when web pages loads
-
- loadBearings = function(doc, status) {
- log("loadBearings start");
-
- // split the document into lines
-
- var lines = doc.split("\n");
- for (var i=0; i<lines.length; i++) {
- if (lines[i].length > 1) {
-
- // split each line into parts separated by "," and use the contents
-
- parts = lines[i].split(",");
- if (parts.length > 1) {
- var lat = parseFloat(parts[0]);
- var lng = parseFloat(parts[1]);
- var bearing = parseFloat(parts[2]);
-
- addNewBearing(lat, lng, bearing, false);
- }
- }
- }
-
- log("loadBearings end");
-
- }
-
-
- // remove leading and trailing whitespace from a string
-
- function trim(stringToTrim) {
- return stringToTrim.replace(/^\s+|\s+$/g,"");
- }
-
-
- // calculate distance between two points
-
- rad = function(x) {return x*Math.PI/180;}
-
- distHaversine = function(p1, p2) {
- var R = 6371; // earth's mean radius in km
- var dLat = rad(p2.lat() - p1.lat());
- var dLong = rad(p2.lng() - p1.lng());
-
- var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
- Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
- var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
- var d = R * c;
-
- return d.toFixed(3);
- }
-
-
- // sets up map for a new bearings
- // adds bearing to bearings[] array but doesn't write to text file
-
- function addNewBearing(lat, lng, bearing, isNewBearing) {
-
- // create the marker at point where bearing starts
-
- var location = new google.maps.LatLng(lat, lng);
- var newMarker = new google.maps.Marker(
- {position: location,
- map: map});
-
- // idea: might be useful fore "new" bearing indicator
- // if (isNewBearing) {
- // newMarker.setAnimation(google.maps.Animation.BOUNCE);
- //}
-
- // add to bearings array
- // idea: add time stamp to info window? Signal strength? Order
-
- var newInfoWindow = new google.maps.InfoWindow(
- { content: "put some info here"
- });
- var newBearing = {marker : newMarker,
- bearing: newBearing,
- infowindow: newInfoWindow};
- bearings.push(newBearing);
-
- // draw bearing as polyline
-
- var location2 = bearingToLocation(location, bearing, 100000);
- var coords = [
- location,
- location2
- ];
- var path = new google.maps.Polyline({
- path: coords,
- strokeColor: "#080000",
- strokeOpacity: 0.5,
- strokeWeight: 5
- });
- path.setMap(map);
-
- google.maps.event.addListener(newMarker, "click", function() {
-
- for (var j=0; j<bearings.length; j++) {
- if (bearings[j].marker.position == newMarker.position) {
- bearings[j].infowindow.open(map, newMarker);
- }
- }
-
- });
-
- google.maps.event.addListener(newMarker, "rightclick", function() {
-
- // remove bearing from bearings array
-
- var new_bearings = [];
- for (var j=0; j<bearings.length; j++) {
- if (bearings[j].marker.position != newMarker.position) {
- new_bearings.push(bearings[j]);
- }
- }
- bearings = new_bearings;
-
- // delete bearing from text file
-
- var url;
- url = "/cgi-bin/delbearing.cgi?" + "lat=" + this.position.lat() + "&" + "lng=" + this.position.lng();
- downloadUrl(url, function(doc) { });
- this.setMap(null);
-
- });
-
- }
-
-
- // save state (config info) to our cookie
-
- function setCookie() {
- var cookietext = cookiename;
- cookietext += "=" + map.getCenter().lat();
- cookietext += "|" + map.getCenter().lng() + "|" + map.getZoom();
- cookietext += "|" + debug_enable;
- if (cookieexpy) {
- var exdate=new Date();
- exdate.setDate(exdate.getDate()+cookieexpy);
- cookietext += ";expires="+exdate.toGMTString();
- }
-
- // write the cookie
-
- document.cookie = cookietext;
- }
-
-
- // Grab a bunch of config info from our cookie
-
- function getCookie() {
-
- if (document.cookie.length > 0) {
- cookieStart = document.cookie.indexOf(cookiename + "=");
-
- // lets see if our cookie exists
-
- if (cookieStart!=-1) {
- cookieStart += cookiename.length+1;
- cookieEnd=document.cookie.indexOf(";",cookieStart);
- if (cookieEnd==-1) {
- cookieEnd=document.cookie.length;
- }
- cookietext = document.cookie.substring(cookieStart,cookieEnd);
-
- // split the cookie text and create the variables
-
- bits = cookietext.split("|");
- lat = parseFloat(bits[0]);
- lng = parseFloat(bits[1]);
- myzoom = parseInt(bits[2]);
- debug_enable = parseInt(bits[6]);
- }
- }
- }
-
-
- // Converts numeric degrees to radians
-
- function toRad(deg) {
- return deg * Math.PI / 180;
- }
-
- // Converts radians to numeric (signed) degrees
-
- function toDeg(rad) {
- return rad * 180 / Math.PI;
- }
-
- // given a bearing and distance calculate end location
-
- function bearingToLocation(location1, bearing, d) {
- var lat1 = toRad(location1.lat());
- var lon1 = toRad(location1.lng());
- var bearing_rad = toRad(bearing);
- var R = 6378137;
-
- var lat2 = Math.asin( Math.sin(lat1)*Math.cos(d/R) +
- Math.cos(lat1)*Math.sin(d/R)*Math.cos(bearing_rad) );
- var lon2 = lon1 + Math.atan2(Math.sin(bearing_rad)*Math.sin(d/R)*Math.cos(lat1),
- Math.cos(d/R)-Math.sin(lat1)*Math.sin(lat2));
-
- var location2 = new google.maps.LatLng(toDeg(lat2), toDeg(lon2));
- return location2;
- }
-
- // called when we click to add a bearing on map
-
- function placeMarker(location, bearing, isNewBearing) {
- if (isNewBearing == undefined) {
- isNewBearing = false;
- }
-
- addNewBearing(location.lat(), location.lng(), bearing, isNewBearing);
-
- // save to bearings database by calling a CGI
-
- var url;
- url = "/cgi-bin/addbearing.cgi?" + "lat=" + location.lat() + "&" + "lng=" + location.lng() + "&" + "bearing=" + bearing;
- downloadUrl(url, function(doc) { });
- }
-
-
- /**
- * Returns an XMLHttp instance to use for asynchronous
- * downloading. This method will never throw an exception, but will
- * return NULL if the browser does not support XmlHttp for any reason.
- * @return {XMLHttpRequest|Null}
- */
- function createXmlHttpRequest() {
- try {
- if (typeof ActiveXObject != 'undefined') {
- return new ActiveXObject('Microsoft.XMLHTTP');
- } else if (window["XMLHttpRequest"]) {
- return new XMLHttpRequest();
- }
- } catch (e) {
- changeStatus(e);
- }
- return null;
- };
-
- /**
- * This functions wraps XMLHttpRequest open/send function.
- * It lets you specify a URL and will call the callback if
- * it gets a status code of 200.
- * @param {String} url The URL to retrieve
- * @param {Function} callback The function to call once retrieved.
- */
- function downloadUrl(url, callback) {
- var status = -1;
- var request = createXmlHttpRequest();
- if (!request) {
- return false;
- }
-
- request.onreadystatechange = function() {
- if (request.readyState == 4) {
- try {
- status = request.status;
- } catch (e) {
- // Usually indicates request timed out in FF.
- }
- if (status == 200) {
- callback(request.responseText, request.status);
- request.onreadystatechange = function() {};
- }
- }
- }
- request.open('GET', url, true);
- try {
- request.send(null);
- } catch (e) {
- changeStatus(e);
- }
- };
-
- function log(message) {
- if (debug_enable == 1) {
- message_list = document.getElementById("debugging_messages");
- log_message = document.createTextNode(message);
- log_list_item = document.createElement('li');
- log_list_item.appendChild(log_message);
- message_list.appendChild(log_list_item);
- }
- }
-
- function clearDatabase() {
-
- // call CGI to rm bearings.txt
-
- downloadUrl("/cgi-bin/cleardb.cgi",function(doc){});
- }
-
- function debugClicked() {
- if (document.control_panel.debug_enable.checked)
- debug_enable = 1;
- else
- debug_enable = 0;
- }
-
-</script>
-
-</head>
-<body onload="initialize()" onunload="setCookie()">
-
- <div id="main-map">
- </div>
-
- <div id="side">
-
- <h3>Help</h3>
- <table>
- <tr><td width="5%"></td><td><a href="https://freetel.svn.sourceforge.net/svnroot/freetel/foxy/README.txt">Foxy README</a></td></tr>
- </table>
-
- <div id="control" style="width: 100%;">
- <h3>Contol Panel</h3>
- <form name="control_panel">
- <table>
- <tr>
- <td width="5%">
- <td>Bearing</td>
- <td colspan="2"><input type="text" name="bearing" value="0" size="15"></td>
- </tr>
- <tr>
- <td></td>
- <td>Clear Database</td>
- <td></td>
- <td width="30%"></td>
- <td width="60"><input type="button" value="Clear" onclick="clearDatabase()"></td>
- </tr>
- <tr>
- <td></td>
- <td>Debug Messages</td>
- <td><input type="checkbox" name="debug_enable" onclick="debugClicked()"></td>
- </tr>
- </table>
- </form>
-
-
- <div id="tests" style="width: 100%;">
- <h3>Tests</h3>
- <ol>
- <li><a href="/cgi-bin/getbearings.cgi">Test bearings.txt database</a><br>
- </ol>
- </div>
-
- <div id="debugging_output" style="width: 100%;">
- <h3>Debugging Output</h3>
- <ol id="debugging_messages">
- </ol>
- </div>
- </div>
-
-
-</body>
-</html>
projects / freetel-svn-tracking.git / commitdiff