rework UI due to GMaps API UI changes

Author: rossengeorgiev

cache.manifest-dev

@@ -2,7 +2,7 @@ CACHE MANIFEST
 # version {VERSION}
 
 # gogole maps files
-http://maps.gstatic.com/cat_js/maps-api-v3/api/js/18/22/%7Bmain,common,controls,ga,geometry,infowindow,kml,map,marker,onion,overlay,poly,stats,util,weather,weather_impl%7D.js
+http://maps.google.com/maps/api/js?v=3.22&sensor=false&libraries=map,common,controls,util,marker,onion,kml,ga,infowindow,stats,poly,overlay,weather,weather_impl,geometry&language=en_us&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg
 http://fonts.googleapis.com/css?family=Roboto:300,400,500,700
 http://maps.gstatic.com/mapfiles/undo_poly.png
 http://maps.gstatic.com/mapfiles/mv/imgs8.png

css/main.css

@@ -98,12 +98,12 @@ body {
 
 #timebox {
     top: 7px;
-    left: 30px;
+    right: 5px;
 }
 
 #lookanglesbox {
     top: 40px;
-    left: 30px;
+    right: 5px;
 }
 
 #timebox.past svg path {

index.html

@@ -309,7 +309,7 @@ <h2>Chase car mode</h2>
             </div>
         </div>
     </div>
-    <script src="http://maps.google.com/maps/api/js?v=3.16&sensor=false&libraries=map,common,controls,util,marker,onion,kml,ga,infowindow,stats,poly,overlay,weather,weather_impl,geometry&language=en_us&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>
+    <script src="http://maps.google.com/maps/api/js?v=3.22&sensor=false&libraries=map,common,controls,util,marker,onion,kml,ga,infowindow,stats,poly,overlay,weather,weather_impl,geometry&language=en_us&key=AIzaSyCOqkcNey4CCyG4X0X5qxHAhCgD8g5DwXg" type="text/javascript"></script>
     <script type="text/javascript" language="javascript" src="js/mobile.js"></script>
 <!--
     <script type="text/javascript" language="javascript" src="js/gmaps_extentions.js"></script>

js/gmaps_extentions.js

@@ -94,10 +94,10 @@ google.maps.DropDownControl = function(options) {
     this.div_ = document.createElement('div');
     this.div_.className = "gmnoprint";
     this.div_.draggable = false;
-    this.div_.style.cssText = "margin: 5px; margin-top: 0;z-index: 0; position: absolute; cursor: pointer; text-align: left; width: 100px; right: 0px; top: 0px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none";
+    this.div_.style.cssText = "margin: 10px; margin-top: 0;z-index: 0; position: absolute; cursor: pointer; text-align: left; width: 85px; right: 0px; top: 0px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select:none";
 
     this.div_head = document.createElement('div');
-    this.div_head.style.cssText = "direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(0, 0, 0); font-family: Roboto,Arial,sans-serif; -moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 1px 6px; border-radius: 2px; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.3); font-weight: 500;";
+    this.div_head.style.cssText = "direction: ltr; overflow: hidden; text-align: left; position: relative; color: rgb(0, 0, 0); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; padding: 8px; border-radius: 2px; -webkit-background-clip: padding-box; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; font-weight: 500; background-color: rgb(255, 255, 255); background-clip: padding-box;";
     this.div_head.title = options.title;
 
     google.maps.event.addDomListener(this.div_head, 'mouseover', function(){
@@ -119,13 +119,13 @@ google.maps.DropDownControl = function(options) {
 
     // generate list of dropdown entries
     this.div_list = document.createElement('div');
-    this.div_list.style.cssText = "background-color: white; z-index: -1; padding-top: 2px; background-clip: padding-box; border-width: 0px 1px 1px; border-style: none solid solid; border-color: use-text-color rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15); border-top-colors: none; border-right-colors: none; border-bottom-colors: none; border-left-colors: none; border-image: none; box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.3); position: relative; text-align: left; display: none;";
+    this.div_list.style.cssText = "z-index: -1; padding: 2px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; position: absolute; top: 100%; left: 0px; right: 0px; text-align: left; display: none; background-color: white;";
 
     var div_list = this.div_list;
 
     options.list.forEach(function(name) {
         var row = document.createElement('div');
-        row.style.cssText = "color: rgb(86, 86, 86); font-family: Roboto,Arial,sans-serif; -moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;-khtml-user-select: none; font-size: 11px; background-color: rgb(255, 255, 255); padding: 3px; padding-top: 2px; padding-bottom: 2px; line-height: 11px; font-weight: 500;";
+        row.style.cssText = "color: rgb(86, 86, 86); font-family: Roboto, Arial, sans-serif; -webkit-user-select: none; font-size: 11px; padding: 6px; background-color: rgb(255, 255, 255);";
         row.innerHTML = name;
 
         google.maps.event.addDomListener(row, 'click', function(){

js/tracker.js

@@ -253,7 +253,7 @@ function wrapTiles(x, zoom) {
 // format: [ name, attr, minZoom, maxZoom, getTileUrl function ]
 var maptypes = {
     bing_os: [
-        'Ordnance Survey (UK)',
+        'Ord. Survey',
         'Bing.com & Ordnance Survey',
          10,
          17,
@@ -274,14 +274,14 @@ var maptypes = {
          function(xy,z) { var n = Math.pow(2,z); return (xy.y<0 || xy.y>=n) ? null : 'http://'+['a','b','c'][Math.abs(xy.x+xy.y)%3]+'.basemaps.cartocdn.com/dark_all/'+z+'/'+wrapTiles(xy.x,z)+'/'+xy.y+'.png'; }
     ],
     osm_toner: [
-        'OSM Toner',
+        'Toner',
         'Stamen.org Toner',
          1,
          18,
          function(xy,z) { var n = Math.pow(2,z); return (xy.y<0 || xy.y>=n) ? null : 'http://'+['a','b','c','d'][Math.abs(xy.x+xy.y)%4]+'.tile.stamen.com/toner/'+z+'/'+wrapTiles(xy.x,z)+'/'+xy.y+'.png'; }
     ],
     osm_watercolor: [
-        'OSM Watercolor',
+        'Watercolor',
         'Stamen.org Watercolor',
          1,
          18,
@@ -462,7 +462,7 @@ function load() {
             map: map,
             title: "Show activity for given period",
             //position: google.maps.ControlPosition.TOP_RIGHT,
-            position: google.maps.ControlPosition.RIGHT_TOP,
+            position: google.maps.ControlPosition.LEFT_TOP,
             headerPrefix: "Last: ",
             list: modeList,
             listDefault: modeList.indexOf(wvar.mode),
@@ -483,7 +483,7 @@ function load() {
     setTimeout(function() {
         var elm = $("#timebox");
 
-        if(is_mobile) $(".slickbox").css({left:'5px'});
+        //if(is_mobile) $(".slickbox").css({left:'5px'});
         var origW = elm.width();
         var iconW = elm.find("svg").width();