Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
498 lines (425 sloc) 13.5 KB
<!DOCTYPE html>
<html lang="en">
<head>
<title>KYC Marks</title>
<style>
#map { height:500px; width:800px; border:1px solid black;}
#markData { width: 200px; padding-left:1em; font-family:courier;}
#map, #markData { float:left; }
#mouse {font-weight: bold;}
.rb {width:150px; float:left;padding-left:1em; padding-bottom: 2em; font-family:courier;}
#toggleGhosts { }
.lOffset { margin-left: 1em; }
.bOffset { margin-bottom: 0.5em; }
#version { float:right; width:450px; padding:1em; right:0; position:absolute;}
#addRC, #addMark { display:none; }
#importExport { display:none; margin-top:1em; margin-bottom:1em; border:1px solid #aaa;}
#appData { height:400px; width:90%}
#wind, #range { background-color:#bbb; padding:5px;}
#direction {width:40px;}
#windMark, #ringMark {width:20px;}
</style>
</head>
<body>
<div id="version">
Version: <strong>2010-04-27 23:20</strong>
</div>
<h3>KYC Marks</h3>
<span>Mouse Lat/Lon: <input id="mouse" type="text">
<a id="toggleGrids" class="lOffset" href="#">Grid (Dec)</a>
<span class="lOffset">Bearings: <span id="bearing">True</span> <a id="toggleBearings" href="#">switch</a></span>
<a id="addRC" class="lOffset" href="#">Add RC</a>
<a id="addMark" class="lOffset" href="#">Add Mark</a>
<a id="dataToggle" class="lOffset" href="#">Data</a>
<span id="wind" class="lOffset">
Wind: <input type="text" id="direction"> on <input type="text" id="windMark"> <a href="#" id="applyWind">apply</a>
</span>
<span id="range" class="lOffset">
Ranges on: <input type="text" id="ringMark"> <a href="#" id="applyRings">apply</a>
</span>
<a id="toggleGhosts" class="lOffset" href="#">Hide ghosts</a>
</span>
<div style="clear:both"></div>
<div id="importExport">
<div id="dataControls">
<a href="#" id="hideData" class="lOffset bOffset">[ Hide ]</a> <a href="#" id="loadData" class="lOffset bOffset">[ Load this data ]</a>
</div>
<textarea id="appData"></textarea>
</div>
<div id="map"></div>
<div id="markData"></div>
<div style="clear:both"></div>
<div id="rbdata"></div>
<div style="clear:both"></div>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*
var gmKeys= {
"k7waterfrontorg" : "ABQIAAAA1p3H4HjgFRGggryYDUwteBR-GVf7FupmKPSRacfkHsUAYJ32hxQkhp8NHbvWfAqlbX-s46HBiGLxpQ",
"k7waterfrontcom" : "ABQIAAAA9UjYEZNshce6n1Gi1oDOZRQvrUIvRiY5z4Dot4oYMy9uZJYfGhSveungqDjj2yffNXVThDc_wbPzGA",
"k7waterfrontca" : "ABQIAAAA9UjYEZNshce6n1Gi1oDOZRQtlChVTc9c46L-tXnUNcQRfaZ7YBRdIcqdc_UNdJwJRglpIdE0KKCLZg",
},
gmKey= "ABQIAAAA1p3H4HjgFRGggryYDUwteBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRKJ9lPafzRFCzaRsPQSUSKAe2tww";
*/
</script>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1p3H4HjgFRGggryYDUwteBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRKJ9lPafzRFCzaRsPQSUSKAe2tww" type="text/javascript"></script>
<script src="jquery.gmap.js" type="text/javascript"></script>
<script src="LatLonGraticules.js" type="text/javascript"></script>
<script src="BdccArrowedPolyline.js" type="text/javascript"></script>
<script src="BdccRangeRings.js" type="text/javascript"></script>
<script src="kycMarks.js" type="text/javascript"></script>
<script type="text/javascript">
// $("#markdata").html( markerData() )
// overriding the default behaviour which is a .push() without sorting
var oldAddToMarkerCollection= $.fn.gMap.addToMarkerCollection;
$.fn.gMap.addToMarkerCollection = function( marker, map ) {
// map.gMarkers.push( marker );
oldAddToMarkerCollection( marker, map );
map.gMarkers.sort( markerSort );
};
var kycDefaults = {
scrollwheel: false,
zoom: 13,
latitude: 44.2044,
longitude: -76.4949,
draggable: false
};
function loadMap( kycMarks ) {
var options= $.extend( {}, kycDefaults, kycMarks );
$("#map").gMap( options );
$gmap.declination= 13; // positive is declination west
$gmap.bearings="true";
if ( rcBoats.length ) {
$("#addRC").show();
}
if ( newMarks.length ) {
$("#addMark").show();
}
$gmap.userBearing = function( degrees ) {
var deg= (+degrees);
if (this.bearings.toLowerCase()=== "magnetic") {
var declination= this.declination || 0;
if (declination===0 ) { return deg; }
deg= deg + declination;
if ( deg === 360 ) {
deg= 0;
}
if ( deg > 360 ) {
deg= deg-360;
}
if ( deg < 0 ) {
deg= deg+360;
}
}
return deg;
}
////Mouse pointer movement updates the LL indicator
GEvent.addListener($gmap, "mousemove", function(point) {
document.getElementById("mouse").value= point.toUrlValue();
});
var markers= $gmap.gMarkers;
$( document ).bind( "markerChange", dragEnd )
displayMarksLL();
} ;
$(function() {
loadMap( kycMarks );
// Show/hide ghosts
$("#toggleGhosts").toggle(
function() { $(this).html("Show ghosts"); ghosts( false ); },
function() { $(this).html("Hide ghosts"); ghosts( true ); }
);
// Flop grids
$("#toggleGrids").toggle(
function() {
$(this).html("Grid (deg)");
if( $gmap.grat ) { $gmap.removeOverlay( $gmap.grat ); }
$gmap.grat = new LatLonGraticule();
$gmap.addOverlay( $gmap.grat );
},
function() {
$(this).html("No grid");
if( $gmap.grat ) { $gmap.removeOverlay( $gmap.grat ); }
$gmap.grat = new LatLonGraticule(true);
$gmap.addOverlay( $gmap.grat );
},
function() {
$(this).html("Grid (dec)");
if( $gmap.grat ) {
$gmap.removeOverlay( $gmap.grat );
$gmap.grat= {};
}
}
);
// Flop bearings
$("#toggleBearings").toggle(
function() {
$("#bearing").html("Mag");
$gmap.bearings= "magnetic";
displayMarksLL();
},
function() {
$("#bearing").html("True");
$gmap.bearings= "true";
displayMarksLL();
}
);
// Race committees
$("#addRC").click( function() {
var spec= rcBoats.shift();
$.fn.gMap.addMarker( spec, $gmap );
displayMarksLL();
if (!rcBoats.length ) { $(this).hide()};
return false;
});
// New Marks
$("#addMark").click( function() {
var spec= newMarks.shift();
$.fn.gMap.addMarker( spec, $gmap );
displayMarksLL();
if (!newMarks.length ) { $(this).hide()};
return false;
});
// flop data view
$("#dataToggle").click( function() {
if ( $("#importExport").is(":visible") ) {
$("#importExport").slideUp();
} else {
$("#appData").val( markerData() );
$("#importExport").slideDown();
}
return false;
});
$("#hideData").click( function() {
$("#importExport").slideUp();
return false;
}
);
$("#loadData").click( function() {
var dat= $("#appData").val();
$("#importExport").slideUp();
eval( dat );
loadMap( kycMarks );
return false;
}
);
$("#applyWind").click( function(){
addWind();
var direction= $("#direction").val(), mrk= $("#windMark").val();
direction= (+direction);
addWind( findMarkIndexFromLabel( mrk ), direction );
$("#direction").val("");
$("#windMark").val("");
return false;
});
$("#applyRings").click( function(){
// addRings();
var mrk= $("#ringMark").val();
addRings( findMarkIndexFromLabel( mrk ));
$("#ringMark").val("");
return false;
});
});
function findMarkIndexFromLabel( label ) {
var lbl = label.toUpperCase(), len= $gmap.gMarkers.length;
for ( var i= 0; i < len; i++ ) {
if ( ! $gmap.gMarkers[i].originalConfig.ghost && $gmap.gMarkers[i].originalConfig.html.substring(0,1)=== lbl) {
return i;
}
}
return null;
}
function dragEnd(e) {
displayMarksLL();
$("#toggleGhosts").show();
};
function ghosts( show ) {
$( $gmap.gMarkers ).each( function() {
if ( this.originalConfig.ghost ) {
if ( show ) { this.show(); } else { this.hide(); }
}
});
};
function displayMarksLL() {
// Step 1
// Latitudes and Longitudes
var out= [], marker, lat, lng, markers= $gmap.gMarkers;
for ( var i = 0; i < markers.length; i++ ) {
marker= markers[ i ];
if ( ! marker || ! marker.originalConfig ) {
debugger;
}
if ( marker.originalConfig.ghost ) { continue; }
lat= parseInt( marker.getLatLng().y * 100000, 10 )/ 100000;
lng= parseInt( marker.getLatLng().x * 100000, 10 )/ 100000;
out.push( marker.originalConfig.html.substr( 0, 1 )+ " " + pad( lat.toString(), 8, "0") + " "+ pad( lng.toString(), 9, "0") );
}
$("#markData").html( out.join("<br>") );
// Step 2:
// Range and bearings
var d, html="", brgLbl= $gmap.bearings==="true" ? "T" : "m";
for ( var i = 0; i < markers.length; i++ ) {
if ( markers[ i ].originalConfig.ghost ) { continue; }
html += '<div class="rb">'
for ( var j=0; j<markers.length; j++ ) {
if ( markers[ j ].originalConfig.ghost ) { continue; }
if ( i !== j ) {
d=markers[ i ].getPoint().distanceFrom(markers[ j ].getPoint())/1000*0.539956803;
html += "<strong>"+markers[ i ].originalConfig.html.substr(0,1)+ "->"+markers[ j ].originalConfig.html.substr(0,1);
html += "<\/strong> "+ d.toFixed(2) + " ";
html += $gmap.userBearing( bearing( markers[ i ].getPoint(), markers[ j ].getPoint() )) + "&deg;"+brgLbl+"<br>";
}
}
html += "</div>"
}
$( "#rbdata" ).html( html );
};
/**
*
* Javascript string pad
* http://www.webtoolkit.info/
*
**/
var STR_PAD_LEFT = 1;
var STR_PAD_RIGHT = 2;
var STR_PAD_BOTH = 3;
function pad(str, len, pad, dir) {
if (typeof(len) == "undefined") { var len = 0; }
if (typeof(pad) == "undefined") { var pad = ' '; }
if (typeof(dir) == "undefined") { var dir = STR_PAD_RIGHT; }
if (len + 1 >= str.length) {
switch (dir){
case STR_PAD_LEFT:
str = Array(len + 1 - str.length).join(pad) + str;
break;
case STR_PAD_BOTH:
var right = Math.ceil((padlen = len - str.length) / 2);
var left = padlen - right;
str = Array(left+1).join(pad) + str + Array(right+1).join(pad);
break;
default:
str = str + Array(len + 1 - str.length).join(pad);
break;
} // switch
}
return str;
};
var degreesPerRadian = 180.0 / Math.PI;
var radiansPerDegree = Math.PI / 180.0;
// Returns the bearing in degrees between two points.
// North = 0, East = 90, South = 180, West = 270.
function bearing( from, to ) {
// See T. Vincenty, Survey Review, 23, No 176, p 88-93,1975.
// Convert to radians.
var lat1 = from.latRadians();
var lon1 = from.lngRadians();
var lat2 = to.latRadians();
var lon2 = to.lngRadians();
// Compute the angle.
var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
if ( angle < 0.0 ) { angle += Math.PI * 2.0; }
// And convert result to degrees.
angle = angle * degreesPerRadian;
angle = angle.toFixed(0);
return angle;
};
function markerSort( a , b ) {
if ( !a || !b ) { return 0; }
return a.originalConfig.html > b.originalConfig.html ? 1 : 0;
};
function markerData( ) {
var marks= $gmap.gMarkers, len= marks.length, retData=[], packageData=[];
// first, the existing pins on the map
for ( var i= 0; i < len; i++ ) {
retData.push( markerSerialize( marks[i] ) );
}
packageData.push( "kycMarks= { markers: [ \n"+ retData.join(", \n") + " ]};" );
// next, the RC boats to add
len= rcBoats.length, retData=[]
for ( var i= 0; i < len; i++ ) {
retData.push( markerSerialize( rcBoats[i] ) );
}
packageData.push( "rcBoats= [ \n"+ retData.join(", \n") + " ];" );
// next, the remaining marks to add
len= newMarks.length, retData=[]
for ( var i= 0; i < len; i++ ) {
retData.push( markerSerialize( newMarks[i] ) );
}
packageData.push( "newMarks= [ \n"+ retData.join(", \n") + " ];" );
return packageData.join("\n \n")
};
function markerSerialize( marker ) {
var out=[];
if ( marker.getLatLng ) {
var ll= marker.getLatLng();
out.push("latitude : "+ ll.y );
out.push("longitude : "+ ll.x );
out.push('html : "'+ marker.originalConfig.html+'"' );
out.push('icon : { image : "'+ marker.originalConfig.icon.image + '"}');
if (marker.originalConfig.ghost) {
out.push('ghost : true');
}
if (marker.originalConfig.draggable) {
out.push('draggable : true');
}
} else // we have raw data
{
out.push("latitude : "+ marker.latitude );
out.push("longitude : "+ marker.longitude );
out.push('html : "'+ marker.html+'"' );
out.push('icon : { image : "'+ marker.icon.image + '"}');
if (marker.draggable) {
out.push('draggable : true');
}
}
return "{ "+ out.join(", ") + " }"
};
function addWind( iMarker, bearing, plength) {
if ( typeof iMarker==="undefined") {
var len= $gmap.gMarkers.length;
for ( var i= 0; i< len; i++ ) {
removeWind(i);
}
return;
}
if ( typeof bearing==="undefined") {
return removeWind( iMarker );
}
length = ( plength || 2 ) * 1852; // meters per Nm
var RC= $gmap.gMarkers[ iMarker ].getLatLng(),
ff= Course(RC, length, bearing- ( $gmap.bearings=== "magnetic" ? $gmap.declination : 0 ) ),
poly1= new BDCCArrowedPolyline( [ff, RC],"#FF0000",4,0.3,null,30,7,"#0000FF",2,0.5);
$gmap.addOverlay( poly1 );
$gmap.gMarkers[ iMarker ].poly.push( poly1 );
};
function addRings( iMarker ) {
var RC= $gmap.gMarkers[ iMarker ].getLatLng(), d = [];
d.push(463); // quarter
d.push(926);
d.push(1389);
d.push(1852);
var l = [];
l.push("0.25");
l.push("0.5");
l.push("0.75");
l.push("1.0");
var c = [];
c.push("#0000FF");
c.push("#0000FF");
c.push("#0000FF");
c.push("#0000FF");
rings = new BdccRangeRings(RC, c, 1, 0.4, d, null, l);
$gmap.addOverlay(rings);
}
function removeWind( iMarker ) {
var markers= $gmap.gMarkers;
if ( markers[ iMarker ] && markers[ iMarker ].poly && markers[ iMarker ].poly.length ) {
var num= markers[ iMarker ].poly.length;
for ( var i= 0; i < num; i++ ) {
markers[ iMarker ].poly[0].remove(); // removes the marker
markers[ iMarker ].poly.shift(); // removes the reference to the marker
}
}
}
</script>
</body>
</html>