some fixes for map, range and videopreview

source/Ox.UI/js/Map/Ox.Map.js

@@ -36,6 +36,7 @@ Ox.Map <function> Basic map object
         showTypes       <b|false> If true, color markers according to place type
         statusbar       <b|false> If true, the map has a statusbar
         toolbar         <b|false> If true, the map has a toolbar
+        zoombar         <b|false> If true, the map has a zoombar
     self <o|{}> Shared private variable
     # EVENTS -------------------------------------------------------------------
     addplace <!> Fires when a place has been added
@@ -73,6 +74,8 @@ Ox.Map <function> Basic map object
                         lat <n> Latitude
                         lng <n> Longitude
             types <[s]> Types (like "country" or "political")
+    selectplace <!> Fires when a place has been selected or deselected
+        place <o> Place object
     # EXAMPLES -----------------------------------------------------------------
     <script>
         // simple
@@ -104,6 +107,7 @@ Ox.Map = function(options, self) {
             statusbar: false,
             toolbar: false,
             zoombar: false
+            // fixme: width, height
         })
         .options(options || {})
         .addClass('OxMap')
@@ -355,7 +359,7 @@ Ox.Map = function(options, self) {
 
     self.$scaleLabel = Ox.Label({
             textAlign: 'center',
-            title: '...'
+            title: '...' // fixme ???
         })
         .addClass('OxMapLabel')
         .css({right: '4px', top: '4px'});
@@ -545,10 +549,10 @@ Ox.Map = function(options, self) {
     }
 
     function getMapHeight() {
-        return self.options.height -
-            self.options.statusbar * 24 -
-            self.options.toolbar * 24 -
-            self.options.zoombar * 16;
+        return self.options.height
+            - self.options.statusbar * 24
+            - self.options.toolbar * 24
+            - self.options.zoombar * 16;
     }
 
     function getMapType() {
@@ -560,27 +564,34 @@ Ox.Map = function(options, self) {
             callback = point;
             point = self.map.getCenter();
         }
-        //Ox.print('CALLING ZOOM SERVICE', point.lat(), point.lng())
         self.maxZoomService.getMaxZoomAtLatLng(point, function(data) {
-            //Ox.print('ZOOM SERVICE', data.status, data.zoom)
             callback(data.status == 'OK' ? data.zoom : null);
         });
     }
 
     function getMetersPerPixel() {
+        // fixme: this is wrong when resizing the map horizontally
         var mapWidth = self.$map.width(),
             span = self.map.getBounds().toSpan().lng();
+        /*
         if (span >= 360) {
             span = 360 * mapWidth / Ox.MAP_TILE_SIZE;
         }
-        return span * Ox.getMetersPerDegree(self.map.getCenter().lat()) / mapWidth;
+        */
+        return Ox.getMetersPerDegree(self.map.getCenter().lat()) * span / mapWidth;
     }
 
     function getMinZoom() {
-        return 0;
+        return self.mapHeight > 1024 ? 3
+            : self.mapHeight > 512 ? 2
+            : self.mapHeight > 256 ? 1
+            : 0;
+        // fixme: there must be a function for this...
+        /*
         return Math.ceil(
             Ox.log(self.mapHeight / Ox.MAP_TILE_SIZE, 2)
         );
+        */
     }
 
     function getPlaceById(id) {
@@ -714,7 +725,11 @@ Ox.Map = function(options, self) {
             google.maps.event.addListener(self.map, 'idle', mapChanged);
             google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
             google.maps.event.addListenerOnce(self.map, 'tilesloaded', tilesLoaded);
+
             mapBounds && self.map.fitBounds(mapBounds);
+            if (self.map.getZoom() < self.minZoom) {
+                self.map.setZoom(self.minZoom);
+            }
 
             self.places = [];
             if (!self.isAsync) {
@@ -1040,6 +1055,7 @@ Ox.Map = function(options, self) {
             self.options.selected = id;
             setStatus();
             that.triggerEvent('selectplace', place);
+            // FIXME: all these events should rather pass {place: place}
         }
     };
 
@@ -1300,6 +1316,19 @@ Ox.Map = function(options, self) {
             size: self.options.width
         });
         */
+
+        self.options.height = that.$element.height();
+        self.options.width = that.$element.width();
+        self.mapHeight = getMapHeight();
+        self.minZoom = getMinZoom();
+        Ox.print('map w/h', self.options.width, self.options.height)
+        self.$map.css({
+            height: self.mapHeight + 'px',
+            width: self.options.width + 'px'
+        });
+        self.options.zoombar && self.$zoomInput.options({
+            size: self.options.width
+        });
         updateFormElements();
         google.maps.event.trigger(self.map, 'resize');
 		return that;