|
Server : Apache/2.4.62 System : FreeBSD fbsdweb2.web.rcn.net 14.1-RELEASE FreeBSD 14.1-RELEASE releng/14.1-n267679-10e31f0946d8 GENERIC amd64 User : www ( 80) PHP Version : 8.3.8 Disable Function : NONE Directory : /domains/gwsolutions/londontrains/ |
Upload File : |
<html>
<head>
<title>London Trains - Commuter Connectivity Map</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<link rel="shortcut icon" href="http://www.gwsolutions.com/favicon.ico">
<link type="text/css" rel="Stylesheet" href="uktrains_styles.css" />
<link type="text/css" rel="Stylesheet" href="bubble.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
#symbol_legend {
display: inline-block;
}
#show_legend {
display: none;
}
#mobile_train_legend {
display: none;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#symbol_legend {
display:none;
}
#show_legend {
display: inline-block;
}
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
#symbol_legend {
display:none;
}
#show_legend {
display: inline-block;
}
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-device-width : 320px) {
#symbol_legend {
display:none;
}
#show_legend {
display: inline-block;
}
}
/* Make sure full legend displays for any screen larger than 600 --------------- */
@media only screen and (min-width: 600px) {
#symbol_legend {
display: inline-block;
}
#show_legend {
display: none;
}
}
/* For smaller embedded versions --------------------- */
@media only screen and (max-width: 599px) {
#symbol_legend {
display:none;
}
#show_legend {
display: inline-block;
}
}
/* Check to make sure height not too small ----------- */
@media only screen
and (max-height : 640px)
{
#symbol_legend {
display:none;
}
#show_legend {
display: inline-block;
}
}
/* Check to make sure height not too small ----------- */
/*@media only screen
and (min-height : 650px) and (max-height: 768) {
#symbol_legend {
display:none;
}
#show_legend {
display: inline-block;
}
#mobile_legend {
display: inline-block;
}
}*/
</style>
</head>
<body onload="initialize()">
<div style="background-color: #003D66 ; text-align:center;"><a href="http://www.gwsolutions.com" target="_blank"><img id="header" src="images/commuter-connectivity-banner.png" width="100%" alt="" border="0" style="max-width: 940px;" /></a></div>
<div style="position: relative;">
<!--div style="position: absolute; z-index:2003; background-color: green; left: 45px; top: 0; width: 100px; height: 50px;"></div-->
<div id="show_legend" onclick="showMobileLegend();">
Show Legend ▶
</div>
<div id="mobile_legend">
<div class="legend_tabs"><ul><li id="li-tab-failures" class="selected"><a class="tab-failures" href="#tabs-1" onclick="javascript:switchFailureLegend(); return false;">Failures:</a></li>
<li id="li-tab-trains"><a class="tab-trains" href="#tabs-1" onclick="javascript:switchTrainLegend(); return false;">Trains:</a></li>
</ul></div>
<div id="mobile_failure_legend" class="inner_legend">
<div class="block50x"><input type="radio" name="whichPinsMobile" id="rdoNoneMobile" onclick="hideAll(this)" >None</div><br />
<div class="block50x"><input type="radio" name="whichPinsMobile" id="rdoVoiceMobile" onclick="showVoiceFailures(this)" checked>Voice</div><br />
<div class="block50x"><input type="radio" name="whichPinsMobile" id="rdo3GMobile" onclick="showPacketFailures(this)">3G Data</div><br />
<div class="block50x"><input type="radio" name="whichPinsMobile" id="rdo4GMobile" onclick="showPacket4GFailures(this)">4G Data</div><br />
<div id="divByCarrier" style="display:inline-block;">
<input type="checkbox" class="mobile_checkbox" onchange="carrierCheckbox(this,'chkThree','3');" id="chkThreeMobile" checked> <img src="pins/pin-Three.png" width="13" height="18" alt="three"> <div class="legend_caption_mobile">3</div><br>
<input type="checkbox" class="mobile_checkbox" onchange="carrierCheckbox(this,'chkEE','EE');" id="chkEEMobile" checked> <img src="pins/pin-EE.png" width="13" height="18" alt="three"> <div class="legend_caption_mobile">EE</div><br>
<input type="checkbox" class="mobile_checkbox" onchange="carrierCheckbox(this,'chkO2','O2');" id="chkO2Mobile" checked> <img src="pins/pin-o2.png" width="13" height="18" alt="three"> <div class="legend_caption_mobile">O2</div><br>
<input type="checkbox" class="mobile_checkbox" onchange="carrierCheckbox(this,'chkVodafone','Vodafone');" id="chkVodafoneMobile" checked> <img src="pins/pin-vodafone.png" width="13" height="18" alt="three"> <div class="legend_caption_mobile">Vodafone</div><br>
</div>
<div id="divByType" style="display:none;">
<input type="checkbox" id="chkVoice" checked> <img src="pins/pin-blue.png" width="13" height="18" alt="three"> <div class="legend_caption">Voice</div><br>
<input type="checkbox" id="chkPacket" checked> <img src="pins/pin-green.png" width="13" height="18" alt="three"> <div class="legend_caption">Packet</div><br>
</div>
<hr />
<input type="checkbox" onchange="stationCheckbox(this);" id="chkStations" checked> <img src="pins/pin-orange.png" width="13" height="18" alt="three"> <div class="legend_caption" id="station_caption">Stations</div>
</div>
<div id="mobile_train_legend" class="inner_legend">
<div class="train_label" onclick="displayTrainLine('ccs');"><div style="background-color:#EE7600" class="train_icon"></div> Charing Cross <span class="arrow">→</span><br /><span class="indent">Sevenoaks</span></div>
<div class="train_label" onclick="displayTrainLine('ccd');"><div style="background-color:#33CC33" class="train_icon"></div> Charing Cross <span class="arrow">→</span><br /><span class="indent">Dartford</span></div>
<div class="train_label" onclick="displayTrainLine('euw');"> <div style="background-color:Red" class="train_icon"></div> Euston <span class="arrow">→</span><br /><span class="indent">Watford Junction</span></div>
<div class="train_label" onclick="displayTrainLine('fco');"><div style="background-color:#ee006c" class="train_icon"></div> Fenchurch Street <span class="arrow">→</span><br /><span class="indent">Ockendon</span></div>
<div class="train_label" onclick="displayTrainLine('lsb');"><div style="background-color:Orange" class="train_icon"></div> Liverpool Street <span class="arrow">→</span><br /><span class="indent">Broxbourne</span></div>
<div class="train_label" onclick="displayTrainLine('lsm');"><div style="background-color:Navy" class="train_icon"></div> Liverpool Street <span class="arrow">→</span><br /><span class="indent">Manor Park</span></div>
<div class="train_label" onclick="displayTrainLine('spa');"><div style="background-color:#FE2EF7" class="train_icon"></div> St Pancras <span class="arrow">→</span><br /><span class="indent">St Albans City</span></div>
<div class="train_label" onclick="displayTrainLine('spe');"><div style="background-color:Purple" class="train_icon"></div> St Pancras <span class="arrow">→</span><br /><span class="indent">Elstree/Borehamwood</span></div>
<div class="train_label" onclick="displayTrainLine('vio');"><div style="background-color:Blue" class="train_icon"></div> Victoria <span class="arrow">→</span><br /><span class="indent">Oxted</span></div>
<div class="train_label" onclick="displayTrainLine('wae');"><div style="background-color:Green" class="train_icon"></div> Waterloo <span class="arrow">→</span><br /><span class="indent">Epsom</span></div>
</div>
<div id="hide_legend" onclick="hideMobileLegend();">Hide Legend ▲</div>
</div>
<div id="symbol_legend">
<div class="legend_title" id="legend_caption">Show Operator Failures:</div>
<div id="legend_contents">
<div class="block50"><input type="radio" name="whichPins" id="rdoNone" onclick="hideAll(this)" >None</div>
<div class="block50"><input type="radio" name="whichPins" id="rdoVoice" onclick="showVoiceFailures(this)" checked>Voice</div><br />
<div class="block50"><input type="radio" name="whichPins" id="rdo3G" onclick="showPacketFailures(this)">3G Data</div>
<div class="block50"><input type="radio" name="whichPins" id="rdo4G" onclick="showPacket4GFailures(this)">4G Data</div><br />
<div id="divByCarrier" style="display:inline-block;">
<input type="checkbox" onchange="carrierCheckbox(this,'chkThreeMobile','3');" id="chkThree" checked> <img src="pins/pin-Three.png" width="13" height="18" alt="three"> <div class="legend_caption">3</div><br>
<input type="checkbox" onchange="carrierCheckbox(this,'chkEEMobile','EE');" id="chkEE" checked> <img src="pins/pin-EE.png" width="13" height="18" alt="three"> <div class="legend_caption">EE</div><br>
<input type="checkbox" onchange="carrierCheckbox(this,'chkO2Mobile','O2');" id="chkO2" checked> <img src="pins/pin-o2.png" width="13" height="18" alt="three"> <div class="legend_caption">O2</div><br>
<input type="checkbox" onchange="carrierCheckbox(this,'chkVodafoneMobile','Vodafone');" id="chkVodafone" checked> <img src="pins/pin-vodafone.png" width="13" height="18" alt="three"> <div class="legend_caption">Vodafone</div><br>
</div>
<div id="divByType" style="display:none;">
<input type="checkbox" id="chkVoice" checked> <img src="pins/pin-blue.png" width="13" height="18" alt="three"> <div class="legend_caption">Voice</div><br>
<input type="checkbox" id="chkPacket" checked> <img src="pins/pin-green.png" width="13" height="18" alt="three"> <div class="legend_caption">Packet</div><br>
</div>
<hr />
<input type="checkbox" onchange="stationCheckbox(this);" id="chkStations" checked> <img src="pins/pin-orange.png" width="13" height="18" alt="three"> <div class="legend_caption" id="station_caption">Station Failures</div><br>
<div id="train_legend">
<hr />
<div class="train_label" onclick="displayTrainLine('ccs');"><div style="background-color:#EE7600" class="train_icon"></div> Charing Cross <span class="arrow">→</span><br /><span class="indent">Sevenoaks</span></div>
<div class="train_label" onclick="displayTrainLine('ccd');"><div style="background-color:#33CC33" class="train_icon"></div> Charing Cross <span class="arrow">→</span><br /><span class="indent">Dartford</span></div>
<div class="train_label" onclick="displayTrainLine('euw');"> <div style="background-color:Red" class="train_icon"></div> Euston <span class="arrow">→</span><br /><span class="indent">Watford Junction</span></div>
<div class="train_label" onclick="displayTrainLine('fco');"><div style="background-color:#ee006c" class="train_icon"></div> Fenchurch Street <span class="arrow">→</span><br /><span class="indent">Ockendon</span></div>
<div class="train_label" onclick="displayTrainLine('lsb');"><div style="background-color:Orange" class="train_icon"></div> Liverpool Street <span class="arrow">→</span><br /><span class="indent">Broxbourne</span></div>
<div class="train_label" onclick="displayTrainLine('lsm');"><div style="background-color:Navy" class="train_icon"></div> Liverpool Street <span class="arrow">→</span><br /><span class="indent">Manor Park</span></div>
<div class="train_label" onclick="displayTrainLine('spa');"><div style="background-color:#FE2EF7" class="train_icon"></div> St Pancras <span class="arrow">→</span><br /><span class="indent">St Albans City</span></div>
<div class="train_label" onclick="displayTrainLine('spe');"><div style="background-color:Purple" class="train_icon"></div> St Pancras <span class="arrow">→</span><br /><span class="indent">Elstree & Borehamwood</span></div>
<div class="train_label" onclick="displayTrainLine('vio');"><div style="background-color:Blue" class="train_icon"></div> Victoria <span class="arrow">→</span><br /><span class="indent">Oxted</span></div>
<div class="train_label" onclick="displayTrainLine('wae');"><div style="background-color:Green" class="train_icon"></div> Waterloo <span class="arrow">→</span><br /><span class="indent">Epsom</span></div>
</div>
</div>
<!--hr />
<a href="http://www.maphook.com" target="_blank"><div style="margin: 0 auto; background-image: url(images/poweredbymaphook2.png); width: 113px; height: 40px;"></div></a-->
</div>
<div id="recenter" ><a href="#" title="Recenter Map" onclick="javascript:recenter(); return false;"><img alt="Recenter Map" src="http://b59605efc3e2883ecdb3-449a8475b2ad35fb7f79a5acd883cfc2.r54.cf2.rackcdn.com/images/spacer.png" border="0" width="38" height="38" /></a></div>
<div id="info"></div>
</div> <!-- end relative -->
<div id="map_canvas" style="width:100%; height:100%"></div>
<div id="powered-by1" ><a href="http://www.maphook.com" target="_blank"><img src="http://b59605efc3e2883ecdb3-449a8475b2ad35fb7f79a5acd883cfc2.r54.cf2.rackcdn.com/images/spacer.png" border="0" width="100" height="41" /></a></div>
</body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC7sQFRHMVhIH9fErxX8yn4bvDrYPlgT6g&libraries=drawing&sensor=true"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://b43be75d9da2bcede307-fe0d0a85cf8322c1eb93c10ee9412de9.r25.cf5.rackcdn.com/CDR_packet.js"></script>
<script type="text/javascript" src="http://b43be75d9da2bcede307-fe0d0a85cf8322c1eb93c10ee9412de9.r25.cf5.rackcdn.com/CDR_voice.js"></script>
<script type="text/javascript" src="http://b43be75d9da2bcede307-fe0d0a85cf8322c1eb93c10ee9412de9.r25.cf5.rackcdn.com/uktrains_data.js"></script>
<script type="text/javascript"> var RESIZE = true; </script>
<script type="text/javascript" src="uktrains_scripts_mobile.js"></script>
<script type="text/javascript" src="infobubble.js"></script>
<script type="text/javascript" src="markerclusterer.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6288338-5']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</html>