|
|
Hi all..
I am a new member in this group and need help to create a little routine in a standard Google Map .html script which uses a scheduled upload of an data.xml file containing ship information and their geo location. Each google map .html script has a defined geo co-ordinate and I need to create a little routine to filter the uploaded data.xml file accordingly. This is the google map script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<!--Serif WebPlus 9 HTML Export-->
<!--Supports HTML 4.01-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator" content="Serif WebPlus 9.00">
<title>AIS Live Map</title>
<style type="text/css">
<!--
body {margin: 0px; padding: 0px;}
.Normal-P
{
margin:0.0px 0.0px 0.0px 0.0px; text-align:justify; font-weight:400;
}
.Normal-P0
{
margin:0.0px 0.0px 0.0px 0.0px; text-align:right; font-weight:400;
}
.Normal-P1
{
margin:0.0px 0.0px 0.0px 0.0px; text-align:left; font-weight:400;
}
.Normal-P2
{
margin:0.0px 0.0px 0.0px 0.0px; text-align:center; font-weight:400;
}
.Normal-C
{
font-family:"Verdana", sans-serif; font-size:13.0px;
line-height:1.23; color:#ffffff;
}
.Normal-C0
{
font-family:"Verdana", sans-serif; font-size:16.0px;
line-height:1.13;
}
-->
</style>
<script src="/forum/_wp_scripts/jsRollover.js" type="text/javascript">
</script>
<script type="text/javascript">
<!--
PPImgInit('roll0-0','/forum/_wp_generated/wp2654a93a.jpg','/forum/_wp_generated/wp0e05f653.jpg','','',0,0);
PPImgInit('roll0-1','/forum/_wp_generated/wp08488888.jpg','/forum/_wp_generated/wp71489bca.jpg','','',0,0);
PPImgInit('roll0-2','/forum/_wp_generated/wp73a9ec5c.jpg','/forum/_wp_generated/wpdea0eaf6.jpg','','',0,0);
//-->
</script>
</head>
<!--
a {text-decoration: none; color: #000000;}
a:hover {text-decoration: none; color: #FFFFFF;}
// -->
</style>
<HEAD></div></div>
<div style="position:absolute; left:0px; top:0px; width:987px; height:679px;">
<div style="text-align:left;"><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Live Maritime Data</title>
<style type="text/css" media="screen">
v\:* {
behavior:url(/forum/index.html);
}
.gpopup {
width:190px;
}
.gpopup table {
padding:0px;
border-collapse:collapse;
border:0;
font-family: Verdana, Arial, Helvetica, sans-serif, "MS sans serif";
font-size: 9px;
text-align:left;
color: black;
background: white;
}
#tooltip span {
color:blue;
background:white;
font-weight:bold;
font-size: 8pt;
font-family: Verdana, Arial, Helvetica, sans-serif, "MS sans serif";
white-space: nowrap;
}
</style>
<!-- Get an API key from http://www.google.com/apis/maps/ -->
<script src="http://maps.google.com/maps?file=api&v=2&
key=ABQIAAAA5U6NmoA88d4eLGhv1IcYBRQHPLImyz-AJeztyd2Kfo3_ztPY6xR8nR3glV9LytqT1rZzGWADIDF6QQ" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function loadup() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(-26.95, -44.50), 6); // Change these to your own part of the world
// ====== set up marker mouseover tooltip div ======
tooltip = document.createElement("div");
map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
tooltip.style.visibility="hidden";
icon_k = myicon("/forum/mm_20_black.png");
icon_b = myicon("/forum/mm_20_blue.png");
icon_a = myicon("/forum/mm_20_gray.png");
icon_g = myicon("/forum/mm_20_green.png");
icon_r = myicon("/forum/mm_20_red.png");
icon_w = myicon("/forum/mm_20_white.png");
icon_y = myicon("/forum/mm_20_yellow.png");
clusterer = new Clusterer(map);
autoUpdate();
}
function ais_type(id)
{
var type1 = new Array('unspecified', 'Reserved', 'Wing In Grnd', '', 'Hi Spd Crft', '', 'Passenger', 'Cargo', 'Tanker', 'Other');
var type2 = new Array('', // All ships of this type
'Haz A', /* Major Hazard */
'Haz B', /* Hazard */
'Haz C', /* Minor Hazard */
'Haz D', /* Recogniseable Hazard */
'',
'',
'',
'',
'' // No additional information
);
type3 =new Array('Fishing', 'Towing', 'Towing', 'Dredger', 'Dive Vessel', 'Military Ops', 'Sail', 'Pleasure Craft', 'Reserved', 'Reserved');
type5 = new Array('Pilot Vessel', 'SAR', 'Tug', 'Port Tender', 'Anti-polution', 'Law enforce', 'Local Vessel', 'Local Vessel', 'Medical Trans', 'Special craft');
navaid = new Array('Default Navaid',
'Reference point',
'RACON',
'Off Shore Structure',
'Spare',
'Light, without sectors',
'Light, with sectors',
'Leading Light Front',
'Leading Light Rear',
'Beacon, Cardinal N',
'Beacon, Cardinal E',
'Beacon, Cardinal S',
'Beacon, Cardinal W',
'Beacon, Port hand',
'Beacon, Starboard hand',
'Beacon, Preferred Channel port hand',
'Beacon, Preferred Channel starboard hand',
'Beacon, Isolated danger',
'Beacon, Safe water',
'Beacon, Special mark',
'Cardinal Mark N',
'Cardinal Mark E',
'Cardinal Mark S',
'Cardinal Mark W',
'Port hand Mark',
'Starboard hand Mark',
'Preferred Channel Port hand',
'Preferred Channel Starboard hand',
'Isolated danger',
'Safe Water',
'Manned VTS', // Special Mark
'Light Vessel / LANBY');
type = Math.floor(id / 10);
rem = id % 10;
result = '';
if (type == 3)
result = type3[rem];
else if (type == 5)
result = type5[rem];
else if (id >= 100) {
result = navaid[id-100];
} else {
result = type1[type];
if (id < 100 && type2[rem] != '')
result = result +' '+type2[rem];
}
return result;
}
function getstatus(status) {
switch (parseInt(status)) {
case 0: return 'Underway';
break;
case 1: return 'At Anchor';
break;
case 2: return 'Not Under Command';
break;
case 3: return 'Restricted Manoeuvrability';
break;
case 4: return 'Constrained by Her Draught';
break;
case 5: return 'Moored';
break;
case 6: return 'Aground';
break;
case 7: return 'Engaged in Fishing';
break;
case 8: return 'Underway by Sail';
break;
case 15: return 'Default (15)';
break;
default: return status;
break;
}
}
function makeinfo(name, type, aisstr) {
var ais = aisstr.split('!');
var mmsi = ais[0];
var imo = ais[1];
var call = ais[2];
var dest = ais[3];
var eta = ais[4];
var speed = ais[5];
var course= ais[6];
var status= getstatus(ais[7]);
var length= ais[8];
var width = ais[9];
var draft = ais[10];
var mtime = ais[11];
if (type < 100) {
callstr = '<tr><td>Callsign:</td><td>'+call+'</td></tr>\n';
deststr = '<tr><td>Dest:</td><td><i>'+dest+'</i></td></tr>\n';
etastr = '<tr><td>ETA:</td><td>'+eta+'</td></tr>\n';
spdstr = '<tr><td>Speed/Dir:</td><td>'+speed+' kts / '+course+'</td></tr>\n';
sizestr = '<tr><td>Size:</td><td>'+length+'m x '+width+'m x '+draft+'m</td></tr>\n';
} else {
callstr = '';
deststr = '';
etastr = '';
spdstr = '';
sizestr = '';
}
if (imo > 0) {
imostr = '<tr><td>IMO:</td><td>'+imo+'</td></tr>\n';
} else {
imostr = '';
}
if (mtime != '') {
recstr = '<tr><td>Received:</td><td>'+mtime+'</td></tr>\n';
} else {
recstr = '';
}
return '<div class="gpopup"><table cellpadding="0" cellspacing="0">\n'+
'<tr><td>Name: </td><td>'+name+'</a></td></tr>\n'+
callstr+
'<tr><td>MMSI:</td><td>'+mmsi+'</td></tr>\n'+
imostr+
'<tr><td>Status:</td><td>'+status+'</td></tr>\n'+
deststr+
etastr+
'<tr><td>Type:</td><td>'+ais_type(type)+'</td></tr>\n'+
spdstr+
sizestr+
recstr+
'</table></div>\n';
}
// From http://www.acme.com/javascript/#Clusterer
Clusterer=function(map)
{this.map=map;this.markers=[];this.clusters=[];this.timeout=null;this.currentZoomLevel=map.getZoom();this.maxVisibleMarkers=Clusterer.defaultMaxVisibleMarkers;this.gridSize=Clusterer.defaultGridSize;this.minMarkersPerCluster=Clusterer.defaultMinMarkersPerCluster;this.maxLinesPerInfoBox=Clusterer.defaultMaxLinesPerInfoBox;this.icon=Clusterer.defaultIcon;GEvent.addListener(map,'zoomend',Clusterer.MakeCaller(Clusterer.Display,this));GEvent.addListener(map,'moveend',Clusterer.MakeCaller(Clusterer.Display,this));GEvent.addListener(map,'infowindowclose',Clusterer.MakeCaller(Clusterer.PopDown,this));};Clusterer.defaultMaxVisibleMarkers=150;Clusterer.defaultGridSize=5;Clusterer.defaultMinMarkersPerCluster=5;Clusterer.defaultMaxLinesPerInfoBox=10;Clusterer.defaultIcon=new GIcon();Clusterer.defaultIcon.image='http://www.acme.com/resources/images/markers/blue_large.PNG';Clusterer.defaultIcon.shadow='http://www.acme.com/resources/images/markers/shadow_large.PNG';Clusterer.defaultIcon.iconSize=new GSize(30,51);Clusterer.defaultIcon.shadowSize=new GSize(56,51);Clusterer.defaultIcon.iconAnchor=new GPoint(13,34);Clusterer.defaultIcon.infoWindowAnchor=new GPoint(13,3);Clusterer.defaultIcon.infoShadowAnchor=new GPoint(27,37);Clusterer.prototype.SetIcon=function(icon)
{this.icon=icon;};Clusterer.prototype.AddMarker=function(marker,title)
{if(marker.setMap!=null)
marker.setMap(this.map);marker.title=title;marker.onMap=false;this.markers.push(marker);this.DisplayLater();};Clusterer.prototype.RemoveMarker=function(marker)
{for(var i=0;i<this.markers.length;++i)
if(this.markers==marker)
{if(marker.onMap)
this.map.removeOverlay(marker);for(var j=0;j<this.clusters.length;++j)
{var cluster=this.clusters[j];if(cluster!=null)
{for(var k=0;k<cluster.markers.length;++k)
if(cluster.markers[k]==marker)
{cluster.markers[k]=null;--cluster.markerCount;break;}
if(cluster.markerCount==0)
{this.ClearCluster(cluster);this.clusters[j]=null;}
else if(cluster==this.poppedUpCluster)
Clusterer.RePop(this);}}
this.markers=null;break;}
this.DisplayLater();};Clusterer.prototype.DisplayLater=function()
{if(this.timeout!=null)
clearTimeout(this.timeout);this.timeout=setTimeout(Clusterer.MakeCaller(Clusterer.Display,this),50);};Clusterer.Display=function(clusterer)
{var i,j,marker,cluster;clearTimeout(clusterer.timeout);var newZoomLevel=clusterer.map.getZoom();if(newZoomLevel!=clusterer.currentZoomLevel)
{for(i=0;i<clusterer.clusters.length;++i)
if(clusterer.clusters!=null)
{clusterer.ClearCluster(clusterer.clusters);clusterer.clusters=null;}
clusterer.clusters.length=0;clusterer.currentZoomLevel=newZoomLevel;}
var bounds=clusterer.map.getBounds();var sw=bounds.getSouthWest();var ne=bounds.getNorthEast();var dx=ne.lng()-sw.lng();var dy=ne.lat()-sw.lat();dx*=0.10;dy*=0.10;bounds=new GLatLngBounds(new GLatLng(sw.lat()-dy,sw.lng()-dx),new GLatLng(ne.lat()+dy,ne.lng()+dx));var visibleMarkers=[];var nonvisibleMarkers=[];for(i=0;i<clusterer.markers.length;++i)
{marker=clusterer.markers;if(marker!=null)
if(bounds.contains(marker.getPoint()))
visibleMarkers.push(marker);else
nonvisibleMarkers.push(marker);}
for(i=0;i<nonvisibleMarkers.length;++i)
{marker=nonvisibleMarkers;if(marker.onMap)
{clusterer.map.removeOverlay(marker);marker.onMap=false;}}
for(i=0;i<clusterer.clusters.length;++i)
{cluster=clusterer.clusters;if(cluster!=null&&!bounds.contains(cluster.marker.getPoint())&&cluster.onMap)
{clusterer.map.removeOverlay(cluster.marker);cluster.onMap=false;}}
if(visibleMarkers.length>clusterer.maxVisibleMarkers)
{var latRange=bounds.getNorthEast().lat()-bounds.getSouthWest().lat();var latInc=latRange/clusterer.gridSize;var lngInc=latInc/Math.cos((bounds.getNorthEast().lat()+bounds.getSouthWest().lat())/2.0*Math.PI/180.0);for(var lat=bounds.getSouthWest().lat();lat<=bounds.getNorthEast().lat();lat+=latInc)
for(var lng=bounds.getSouthWest().lng();lng<=bounds.getNorthEast().lng();lng+=lngInc)
{cluster=new Object();cluster.clusterer=clusterer;cluster.bounds=new GLatLngBounds(new GLatLng(lat,lng),new GLatLng(lat+latInc,lng+lngInc));cluster.markers=[];cluster.markerCount=0;cluster.onMap=false;cluster.marker=null;clusterer.clusters.push(cluster);}
for(i=0;i<visibleMarkers.length;++i)
{marker=visibleMarkers;if(marker!=null&&!marker.inCluster)
{for(j=0;j<clusterer.clusters.length;++j)
{cluster=clusterer.clusters[j];if(cluster!=null&&cluster.bounds.contains(marker.getPoint()))
{cluster.markers.push(marker);++cluster.markerCount;marker.inCluster=true;}}}}
for(i=0;i<clusterer.clusters.length;++i)
if(clusterer.clusters!=null&&clusterer.clusters.markerCount<clusterer.minMarkersPerCluster)
{clusterer.ClearCluster(clusterer.clusters);clusterer.clusters=null;}
for(i=clusterer.clusters.length-1;i>=0;--i)
if(clusterer.clusters!=null)
break;else
--clusterer.clusters.length;for(i=0;i<clusterer.clusters.length;++i)
{cluster=clusterer.clusters;if(cluster!=null)
{for(j=0;j<cluster.markers.length;++j)
{marker=cluster.markers[j];if(marker!=null&&marker.onMap)
{clusterer.map.removeOverlay(marker);marker.onMap=false;}}}}
for(i=0;i<clusterer.clusters.length;++i)
{cluster=clusterer.clusters;if(cluster!=null&&cluster.marker==null)
{var xTotal=0.0,yTotal=0.0;for(j=0;j<cluster.markers.length;++j)
{marker=cluster.markers[j];if(marker!=null)
{xTotal+=(+marker.getPoint().lng());yTotal+=(+marker.getPoint().lat());}}
var location=new GLatLng(yTotal/cluster.markerCount,xTotal/cluster.markerCount);marker=new GMarker(location,{icon:clusterer.icon});cluster.marker=marker;GEvent.addListener(marker,'click',Clusterer.MakeCaller(Clusterer.PopUp,cluster));}}}
for(i=0;i<visibleMarkers.length;++i)
{marker=visibleMarkers;if(marker!=null&&!marker.onMap&&!marker.inCluster)
{clusterer.map.addOverlay(marker);if(marker.addedToMap!=null)
marker.addedToMap();marker.onMap=true;}}
for(i=0;i<clusterer.clusters.length;++i)
{cluster=clusterer.clusters;if(cluster!=null&&!cluster.onMap&&bounds.contains(cluster.marker.getPoint()))
{clusterer.map.addOverlay(cluster.marker);cluster.onMap=true;}}
Clusterer.RePop(clusterer);};Clusterer.PopUp=function(cluster)
{var clusterer=cluster.clusterer;var html='<table width="300">';var n=0;for(var i=0;i<cluster.markers.length;++i)
{var marker=cluster.markers;if(marker!=null)
{++n;html+='<tr><td>';if(marker.getIcon().smallImage!=null)
html+='<img src="'+marker.getIcon().smallImage+'">';else
html+='<img src="'+marker.getIcon().image+'" width="'+(marker.getIcon().iconSize.width/2)+'" height="'+(marker.getIcon().iconSize.height/2)+'">';html+='</td><td>'+marker.title+'</td></tr>';if(n==clusterer.maxLinesPerInfoBox-1&&cluster.markerCount>clusterer.maxLinesPerInfoBox)
{html+='<tr><td colspan="2">...and '+(cluster.markerCount-n)+' more</td></tr>';break;}}}
html+='</table>';clusterer.map.closeInfoWindow();cluster.marker.openInfoWindowHtml(html);clusterer.poppedUpCluster=cluster;};Clusterer.RePop=function(clusterer)
{if(clusterer.poppedUpCluster!=null)
Clusterer.PopUp(poppedUpCluster);};Clusterer.PopDown=function(clusterer)
{clusterer.poppedUpCluster=null;};Clusterer.prototype.ClearCluster=function(cluster)
{var i,marker;for(i=0;i<cluster.markers.length;++i)
if(cluster.markers!=null)
{cluster.markers.inCluster=false;cluster.markers=null;}
cluster.markers.length=0;cluster.markerCount=0;if(cluster==this.poppedUpCluster)
this.map.closeInfoWindow();if(cluster.onMap)
{this.map.removeOverlay(cluster.marker);cluster.onMap=false;}};Clusterer.MakeCaller=function(func,arg)
{return function(){func(arg);};};GMarker.prototype.setMap=function(map)
{this.map=map;};GMarker.prototype.addedToMap=function()
{this.map=null;};GMarker.prototype.origOpenInfoWindow=GMarker.prototype.openInfoWindow;GMarker.prototype.openInfoWindow=function(node,opts)
{if(this.map!=null)
return this.map.openInfoWindow(this.getPoint(),node,opts);else
return this.origOpenInfoWindow(node,opts);};GMarker.prototype.origOpenInfoWindowHtml=GMarker.prototype.openInfoWindowHtml;GMarker.prototype.openInfoWindowHtml=function(html,opts)
{if(this.map!=null)
return this.map.openInfoWindowHtml(this.getPoint(),html,opts);else
return this.origOpenInfoWindowHtml(html,opts);};GMarker.prototype.origOpenInfoWindowTabs=GMarker.prototype.openInfoWindowTabs;GMarker.prototype.openInfoWindowTabs=function(tabNodes,opts)
{if(this.map!=null)
return this.map.openInfoWindowTabs(this.getPoint(),tabNodes,opts);else
return this.origOpenInfoWindowTabs(tabNodes,opts);};GMarker.prototype.origOpenInfoWindowTabsHtml=GMarker.prototype.openInfoWindowTabsHtml;GMarker.prototype.openInfoWindowTabsHtml=function(tabHtmls,opts)
{if(this.map!=null)
return this.map.openInfoWindowTabsHtml(this.getPoint(),tabHtmls,opts);else
return this.origOpenInfoWindowTabsHtml(tabHtmls,opts);};GMarker.prototype.origShowMapBlowup=GMarker.prototype.showMapBlowup;GMarker.prototype.showMapBlowup=function(opts)
{if(this.map!=null)
return this.map.showMapBlowup(this.getPoint(),opts);else
return this.origShowMapBlowup(opts);};
function myicon(image) {
icon = new GIcon();
icon.iconSize = new GSize(20, 23);
icon.iconAnchor = new GPoint(10, 25);
icon.infoWindowAnchor = new GPoint(5, 1);
icon.image = image;
return icon;
}
function addVector(from, deltax, deltay) {
if (deltax == 0 && deltay == 0) return null;
var to = new GLatLng(from.lat() + deltay, from.lng() + deltax)
var polyline = new GPolyline([from, to], "#ffffff", 2);
return polyline;
}
function get_colour(type) {
if (type == 52)
return icon_k; // "black"
if (type > 99)
return icon_a; //"gray"
var itype = Math.floor(type/10);
switch (itype) {
case 7:
ball = icon_g; // "green";
break;
case 8:
ball = icon_r; // "red";
break;
case 4:
ball = icon_w; // "white";
break;
case 6:
ball = icon_b; // "blue";
break;
default:
ball = icon_y; // "yellow";
break;
}
return ball;
}
function createMarker(point, name, html, iconz) {
var marker = new GMarker(point, iconz);
marker.tooltip = '<div id="tooltip"><span>'+name+'</span></div>';
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
clusterer.AddMarker(marker, name)
// map.addOverlay(marker);
GEvent.addListener(marker,"mouseover", function() {
showTooltip(marker);
});
GEvent.addListener(marker,"mouseout", function() {
tooltip.style.visibility="hidden"
});
return marker;
}
function autoUpdate() {
GDownloadUrl("/forum/data.xml"+Math.random(), function(data, responseCode) {
var xmlDoc = GXml.parse(data);
if (!xmlDoc.documentElement) return;
var xmlmarker = xmlDoc.documentElement.getElementsByTagName("marker");
var movehtml = '';
var dockhtml = '';
var sepmove = '';
var sepdock = '';
if (!gmarkers)
gmarkers = new Array();
if (!htmls)
htmls = new Array();
if (!vectors)
vectors = new Array();
var Lat, Lon, name, deltax, deltay, type, ais, html, ball, icon;
for (var i = 0; i < xmlmarker.length; i++) {
Lat = parseFloat(xmlmarker.getAttribute("lat"));
Lon = parseFloat(xmlmarker.getAttribute("lon"));
name = xmlmarker.getAttribute("name");
deltax = parseFloat(xmlmarker.getAttribute("dx"));
deltay = parseFloat(xmlmarker.getAttribute("dy"));
type = parseInt(xmlmarker.getAttribute("type"));
htmls = makeinfo(name, type, xmlmarker.getAttribute("ais"));
icon = get_colour(type);
if (gmarkers) {
GEvent.clearListeners(gmarkers, "click");
GEvent.clearListeners(gmarkers, "mouseover");
GEvent.clearListeners(gmarkers, "mouseout");
clusterer.RemoveMarker(gmarkers);
// map.removeOverlay(gmarkers);
}
var point = new GLatLng(Lat, Lon);
gmarkers = createMarker(point, name, htmls, icon);
if (vectors) map.removeOverlay(vectors);
vectors = addVector(point, deltax, deltay);
if (vectors) map.addOverlay(vectors);
html = "<a href='javascript:findship("+i+")' onmouseover='mymouseover("+i+")' onmouseout='mymouseout()'>"+name+"</a>";
if (Math.abs(deltax) > 0 || Math.abs(deltay) > 0) {
movehtml += sepmove + html;
sepmove = ", ";
} else {
dockhtml += sepdock + html;
sepdock = ", ";
}
}
var shipmove = document.getElementById("shipmove");
if (shipmove)
shipmove.innerHTML = movehtml + '.';
var shipdock = document.getElementById("shipdocked");
if (shipdock)
shipdock.innerHTML = dockhtml + '.';
});
// time out after 1hr.
if (refreshcounter++ < numrefresh)
window.setTimeout('countDown()', 1000);
else {
if (document.getElementById("countDownText"))
document.getElementById("countDownText").innerHTML = "Press REFRESH to continue updates.";
}
}
// ====== This function displays the tooltip ======
// it can be called from an icon mousover or a sidebar mouseover
function showTooltip(marker) {
tooltip.innerHTML = marker.tooltip;
var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
var anchor=marker.getIcon().iconAnchor;
var width=marker.getIcon().iconSize.width;
var height=tooltip.clientHeight;
var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y -height));
pos.apply(tooltip);
tooltip.style.visibility="visible";
}
// ===== This function is invoked when the mouse goes over an entry in the sidebar =====
// It launches the tooltip on the icon
function mymouseover(i) {
showTooltip(gmarkers)
}
// ===== This function is invoked when the mouse leaves an entry in the sidebar =====
// It hides the tooltip
function mymouseout() {
tooltip.style.visibility="hidden";
}
// Open the info box for the specified marker.
function findship(i){
gmarkers.openInfoWindowHtml(htmls);
}
// Refresh the data after 'refreshInterval' seconds.
// It should not be faster than ship.vbs
var refreshInterval = 60;
// numrefresh is the number of times to refresh this page before timing out.
var numrefresh = 120;
var tooltip;
var refreshcounter = 0;
var gmarkers;
var icon_k;
var icon_b;
var icon_a;
var icon_g;
var icon_r;
var icon_w;
var icon_y;
var htmls;
var vectors;
var map;
var clusterer;
var countDownTime=refreshInterval+1;
var counter;
function countDown(){
countDownTime--;
if (document.getElementById("countDownText"))
document.getElementById("countDownText").innerHTML= "Plotting last upload in " + countDownTime + " seconds.";
if (countDownTime<=0){
countDownTime=refreshInterval;
clearTimeout(counter)
autoUpdate()
return
}
counter=setTimeout("countDown()", 1000);
}
function onLoad() {
if (!GBrowserIsCompatible()) {
alert("Sorry, the Google Maps API is not compatible with this browser");
} else {
setTimeout(loadup, 250);
}
}
//]]>
</script>
</head>
<body bgcolor="#FFFFCC" onload="onLoad();" onunload="GUnload()">
<img src="http://www.google.com/mapfiles/marker.png" style="display:none" alt="precache"/>
<img src="http://www.google.com/mapfiles/shadow50.png" style="display:none" alt="precache"/>
<img src="http://www.google.com/mapfiles/markerTransparent.png" style="display:none" alt="precache"/>
<img src="http://www.google.com/mapfiles/markerie.gif" style="display:none" alt="precache"/>
<img src="http://www.google.com/mapfiles/dithshadow.gif" style="display:none" alt="precache"/>
<img src="http://labs.google.com/ridefinder/images/mm_20_shadow.png" style="display:none" alt="precache"/>
<img src="http://labs.google.com/ridefinder/images/mm_20_black.png" style="display:none" alt="precache"/>
<img src="http://labs.google.com/ridefinder/images/mm_20_blue.png" style="display:none" alt="precache"/>
<img src="http://labs.google.com/ridefinder/images/mm_20_gray.png" style="display:none" alt="precache"/>
<img src="http://labs.google.com/ridefinder/images/mm_20_green.png" style="display:none" alt="precache"/>
<img src="http://labs.google.com/ridefinder/images/mm_20_red.png" style="display:none" alt="precache"/>
<img src="http://labs.google.com/ridefinder/images/mm_20_white.png" style="display:none" alt="precache"/>
<img src="http://labs.google.com/ridefinder/images/mm_20_yellow.png" style="display:none" alt="precache"/>
<TABLE WIDTH="95%" HEIGHT="7" BORDER="7" ALIGN="CENTER" CELLSPACING="2" CELLPADDING="2"
BGCOLOR="#00ffff" BORDERCOLORLIGHT="#23238e" BORDERCOLORDARK="#23238e"><BR>
<TR>
<TD><A HREF="http://www.yachtmarine.com"><B><FONT FACE="Aerial" SIZE="1">HOME</B></A></TD>
<TD><A HREF="/CV-BRAZIL.html"><B><FONT FACE="Aerial" SIZE="1">OVERVIEW</TD>
<TD><A HREF="/CV-COSTAVERDE.html"><B><FONT FACE="Aerial" SIZE="1">COSTA VERDE</TD>
<TD><A HREF="/CV-RIOAPPROACHES.html"><B><FONT FACE="Aerial" SIZE="1">RIO APPROACH</TD>
<TD><A HREF="/CV-RIOPORT.html"><B><FONT FACE="Aerial" SIZE="1">RIO PORT</TD>
<TD><A HREF="/CV-ANGRA.html"><B><FONT FACE="Aerial" SIZE="1">ANGRA-SEPETIBA </TD></TR>
<TD><A HREF="/CV-SEBAST.html"><B><FONT FACE="Aerial" SIZE="1">SAO SEBASTIAO APPROACH</TD>
<TD><A HREF="/CV-SEBASTPORT.html"><B><FONT FACE="Aerial" SIZE="1">SAO SEBASTIAO PORT</TD>
<TD><A HREF="/CV-SANTOS.html"><B><FONT FACE="Aerial" SIZE="1">SANTOS APPROACH</TD>
<TD><A HREF="/CV-SANTOSPORT.html"><B><FONT FACE="Aerial" SIZE="1">SANTOS PORT</TD>
<TD><A HREF="/EXPERIMENTALPOS.html"><B><FONT FACE="Aerial" SIZE="1">EXPERIMENTAL</TD></FONT>
<TD><A HREF="http://ocean.am.gdynia.pl/ais/index9.html"><B><FONT FACE="Aerial" SIZE="1">MARINE CHART</TD></FONT><B>
</TR>
</TABLE><BR> <div id="map" style="margin-left: auto; margin-right: auto; width: 986px; height:680px; border: solid #000"></div>
<div style="text-align:left;" id="countDownText"></div>
<center>
<table style="width: 96%"><tr><td>
<center>
<table style="background-color: rgb(50, 50, 200); color: white;" border=1 cellpadding="5" cellspacing="1">
<tr><td colspan="10"><div style="text-align:center;" id="shiptime"></div>
<div style="text-align:center;" id="countDownText"></div></td></tr>
<tr style="text-align:center;"><td><big>Legend: </big></td>
<td><image src="http://labs.google.com/ridefinder/images/mm_20_blue.png"><br><small>Passenger<br> </small></td>
<td><image src="http://labs.google.com/ridefinder/images/mm_20_purple.png"><br><small>HSV<br> </small></td>
<td><image src="http://labs.google.com/ridefinder/images/mm_20_red.png"><br><small>Tanker<br> </small></td>
<td><image src="http://labs.google.com/ridefinder/images/mm_20_white.png"><br><small>Other<br> </small></td>
<td><image src="http://labs.google.com/ridefinder/images/mm_20_yellow.png"><br><small>Yacht<br> </small></td>
<td><image src="http://labs.google.com/ridefinder/images/mm_20_orange.png"><br><small>Pilot<br>Port</small></td>
<td><image src="http://labs.google.com/ridefinder/images/mm_20_green.png"><br><small>Cargo<br> </small></td>
<td><image src="http://labs.google.com/ridefinder/images/mm_20_black.png"><br><small>Tug<br>Port</small></td>
<td><image src="http://labs.google.com/ridefinder/images/mm_20_gray.png"><br><small>VTS<br> </small></td>
</tr></table>
</center>
<br>
<!--
<h2><font color="Black"><b>Underway:</b></font></h2>
<div id="shipmove"></div>
<h2><font color="Black"><b>Docked or Anchored:</b></font></h2>
<div id="shipdocked"></div>
<br><hr width="75%"><br>-->
<HEAD>
</body>
</html>
<HEAD>
</body>
</html>
|
|
|
|
|
|
|
// |
sinbad7
