diff --git a/public_html/gmap.html b/public_html/gmap.html index 80afe02..1898e06 100644 --- a/public_html/gmap.html +++ b/public_html/gmap.html @@ -3,7 +3,7 @@ <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> - <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> + <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript" src="planeObject.js"></script> @@ -18,40 +18,36 @@ <div id="dialog-modal" title="Basic modal dialog" style="display:none;"> <p>The settings feature is coming soon. Keep checking GitHub.</p> </div> - <div id="map_container"> - <div id="map_canvas"></div> - </div> - <div id="sidebar_container"> - <div id="sidebar_canvas"> - <div id="timestamps" style="align: center"> - <table width="100%"><tr> - <td>Local Time</td> - <td> - <canvas id="localclock" class="CoolClock:classic:40"></canvas> - </td> - <td>UTC Time</td> - <td> - <canvas id="gmtclock" class="CoolClock:classic:40::0"></canvas> - </td> - </tr></table> - </div> - <div id="sudo_buttons"> - <table width="100%"><tr> - <td width="150" style="text-align: center;" class="pointer"> - [ <span onclick="resetMap();">Reset Map</span> ] - </td> - <td> </td> - <td width="150" style="text-align: center;" id="setings_button" class="pointer"> - [ <span onclick="optionsModal();">Settings</span> ] - </td> - </tr></table> - </div> - - <div id="plane_detail"></div> - <div id="options"></div> - <div id="planes_table"></div> - <div id="plane_extension"></div> + <div id="map_canvas"></div> + <div id="sidebar_canvas"> + <div id="timestamps" style="align: center"> + <table width="100%"><tr> + <td>Local Time</td> + <td> + <canvas id="localclock" class="CoolClock:classic:40"></canvas> + </td> + <td>UTC Time</td> + <td> + <canvas id="gmtclock" class="CoolClock:classic:40::0"></canvas> + </td> + </tr></table> </div> + <div id="sudo_buttons"> + <table width="100%"><tr> + <td width="150" style="text-align: center;" class="pointer"> + [ <span onclick="resetMap();">Reset Map</span> ] + </td> + <td> </td> + <td width="150" style="text-align: center;" id="setings_button" class="pointer"> + [ <span onclick="optionsModal();">Settings</span> ] + </td> + </tr></table> + </div> + + <div id="plane_detail"></div> + <div id="options"></div> + <div id="planes_table"></div> + <div id="plane_extension"></div> </div> <div id="SpecialSquawkWarning"> <b>Squak 7x00 is reported and shown.</b><br> diff --git a/public_html/script.js b/public_html/script.js index 05d29b7..1fc8748 100644 --- a/public_html/script.js +++ b/public_html/script.js @@ -135,8 +135,12 @@ function initialize() { center: new google.maps.LatLng(CenterLat, CenterLon), zoom: ZoomLvl, mapTypeId: google.maps.MapTypeId.ROADMAP, + mapTypeControl: true, + streetViewControl: false, mapTypeControlOptions: { - mapTypeIds: mapTypeIds + mapTypeIds: mapTypeIds, + position: google.maps.ControlPosition.TOP_LEFT, + style: google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; diff --git a/public_html/style.css b/public_html/style.css index 63d0a45..aaa933f 100644 --- a/public_html/style.css +++ b/public_html/style.css @@ -1,21 +1,23 @@ html, body { margin: 0; padding: 0; background-color: #ffffff; font-family: Tahoma, Sans-Serif; - font-size: 10pt; overflow: auto; + font-size: 12pt; overflow: auto; } -div#map_container { float: left; width: 100%; height: 100%; } -div#map_canvas { height: 100%; margin-right: 420px; } -div#sidebar_container { float: left; width: 410px; margin-left: -410px; height: 100%; overflow: auto; } +div#map_canvas { width: 100%; height: 100%; } -div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 430px; border: 2px solid red; +div#sidebar_canvas { position: absolute; top: 0px; right: 0px; + box-sizing: border-box; overflow: auto; + background: #FFFFFF; padding: 0px 2px 2px 2px; + border-bottom-left-radius: 5px; z-index: 99; } + +div#SpecialSquawkWarning { position: absolute; bottom: 25px; right: 0px; border: 2px solid red; background-color: #FFFFA3; opacity: 0.75; filter:alpha(opacity=75); padding: 5px; display: none; text-align: center; } table#optionsTabs { width: 100%; font-size: small; font-family: monospace; background-color: #ddd; border: 1px; border-color: #000000;} -#tableinfo { font-size: x-small; font-family: monospace; } -#sudo_buttons { font-size: x-small; font-family: monospace; } +#tableinfo, #sudo_buttons { font-family: monospace; } .vPosition { font-weight: bold; background-color: #f5fff5; } .squawk7500 { font-weight: bold; background-color: #ff5555; }