add place controls to map

source/Ox.UI/css/Ox.UI.css

@@ -1276,40 +1276,69 @@ Maps
     border-radius: 0;
 }
 
-.OxMap .OxButton.OxMapControl {
+.OxMap .OxMapControl,
+.OxMap .OxPlaceControl {
     position: absolute;
+    border-width: 2px;
+}
+.OxMap .OxMapControl.OxButton,
+.OxMap .OxPlaceControl.OxButton {
     width: 10px;
     height: 10px;
     padding: 1px;
-    border-width: 2px;
 }
-.OxMap .OxButton.OxMapControl.OxMapButtonCenter {
+.OxMap .OxMapControl.OxLabel,
+.OxMap .OxPlaceControl.OxLabel {
+    height: 12px;
+    font-size: 10px;
+}
+.OxMap .OxMapControl.OxMapButtonCenter {
     left: 24px;
     top: 24px;
 }
-.OxMap .OxButton.OxMapControl.OxMapButtonEast {
+.OxMap .OxMapControl.OxMapButtonEast {
     left: 44px;
     top: 24px;
 }
-.OxMap .OxButton.OxMapControl.OxMapButtonNorth {
+.OxMap .OxMapControl.OxMapButtonNorth {
     left: 24px;
     top: 4px;
 }
-.OxMap .OxButton.OxMapControl.OxMapButtonSouth {
+.OxMap .OxMapControl.OxMapButtonSouth {
     left: 24px;
     top: 44px;
 }
-.OxMap .OxButton.OxMapControl.OxMapButtonWest {
+.OxMap .OxMapControl.OxMapButtonWest {
     left: 4px;
     top: 24px;
 }
-.OxMap .OxLabel.OxMapControl {
+.OxMap .OxLabel.OxMapControl.OxMapScale {
-    position: absolute;
     right: 4px;
+    bottom: 16px;
+}
+
+.OxMap .OxPlaceControl.OxPlaceFlag {
     top: 4px;
+    right: 180px;
+    width: 12px;
     height: 12px;
-    font-size: 10px;
+    border: 2px solid rgb(192, 192, 192);
-    border-width: 2px;
+    border-radius: 8px;
+}
+.OxMap .OxPlaceControl.OxPlaceFlag > img {
+    width: 12px;
+    height: 12px;
+    border-radius: 6px;
+}
+.OxMap .OxPlaceControl.OxPlaceName {
+    top: 4px;
+    right: 24px;
+    width: 136px;
+    text-overflow: ellipsis;
+}
+.OxMap .OxPlaceControl.OxPlaceDeselectButton {
+    top: 4px;
+    right: 4px;
 }
 
 .OxFlag {

source/Ox.UI/js/Form/Ox.Select.js

@@ -148,15 +148,18 @@ Ox.Select = function(options, self) {
 
     function changeMenu(data) {
         //Ox.print('clickMenu: ', self.options.id, data)
-        self.checked = self.optionGroup.checked();
+        if (self.options.selectable) {
-        self.options.value = data.checked[0].id;
+            self.checked = self.optionGroup.checked();
-        self.$title && self.$title.html(
+            self.options.value = data.checked[0].id;
-            self.options.title ? self.options.title :
+            self.$title && self.$title.html(
-                    data.checked[0].title
+                self.options.title ? self.options.title : data.checked[0].title
-        );
+            );
-        that.triggerEvent('change', {
+            that.triggerEvent('change', {
-            selected: data.checked
+                selected: data.checked
-        });
+            });
+        } else {
+            that.triggerEvent('click', data);
+        }
     }
 
     function hideMenu() {

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

@@ -331,7 +331,7 @@ Ox.Map = function(options, self) {
     }
 
     self.$controls = {
-        'center': Ox.Button({
+        center: Ox.Button({
                 title: 'center',
                 type: 'image'
             })
@@ -344,7 +344,7 @@ Ox.Map = function(options, self) {
                     zoomToPlace();
                 }
             }),
-        'east': Ox.Button({
+        east: Ox.Button({
                 title: 'right',
                 type: 'image'
             })
@@ -357,7 +357,7 @@ Ox.Map = function(options, self) {
                     pan(2, 0);
                 }
             }),
-        'north': Ox.Button({
+        north: Ox.Button({
                 title: 'up',
                 type: 'image'
             })
@@ -370,7 +370,7 @@ Ox.Map = function(options, self) {
                     pan(0, -2);
                 }
             }),
-        'south': Ox.Button({
+        south: Ox.Button({
                 title: 'down',
                 type: 'image'
             })
@@ -383,7 +383,7 @@ Ox.Map = function(options, self) {
                     pan(0, 2);
                 }
             }),
-        'west': Ox.Button({
+        west: Ox.Button({
                 title: 'left',
                 type: 'image'
             })
@@ -396,16 +396,45 @@ Ox.Map = function(options, self) {
                     pan(-2, 0);
                 }
             }),
-        'scale': Ox.Label({
+        scale: Ox.Label({
-                textAlign: 'center',
+                textAlign: 'center'
-                title: '...' // fixme ???
             })
-            .addClass('OxMapControl')
+            .addClass('OxMapControl OxMapScale')
     };
     !self.options.showControls && Ox.forEach(self.$controls, function($control) {
         $control.css({opacity: 0}).hide();
     });
 
+    self.$placeControls = {
+        flag: Ox.Element()
+            .addClass('OxPlaceControl OxPlaceFlag'),
+        name: Ox.Label({
+                textAlign: 'center'
+            })
+            .addClass('OxPlaceControl OxPlaceName')
+            .bindEvent({
+                singleclick: function() {
+                    panToPlace();
+                },
+                doubleclick: function() {
+                    zoomToPlace();
+                }
+            }),
+        deselectButton: Ox.Button({
+                title: 'close',
+                type: 'image',
+            })
+            .addClass('OxPlaceControl OxPlaceDeselectButton')
+            .bindEvent({
+                click: function() {
+                    selectPlace(null);
+                }
+            })
+    }
+    Ox.forEach(self.$placeControls, function($placeControl) {
+        $placeControl.css({opacity: 0}).hide();
+    });
+
     if (!self.isAsync) {
         self.options.places.forEach(function(place) {
             if (Ox.isUndefined(place.id)) {
@@ -808,6 +837,9 @@ Ox.Map = function(options, self) {
 		    // fixme: can add earlier, use don't replace map contents option
             Ox.forEach(self.$controls, function($control) {
                 $control.appendTo(self.$map);
+            });
+            Ox.forEach(self.$placeControls, function($placeControl) {
+                $placeControl.appendTo(self.$map);
             });
 		}
     }
@@ -1117,12 +1149,32 @@ Ox.Map = function(options, self) {
         function select() {
             place && place.select();
             self.options.selected = id;
+            setPlaceControls(place);
             setStatus();
             that.triggerEvent('selectplace', place);
             // FIXME: all these events should rather pass {place: place}
         }
     };
 
+    function setPlaceControls(place) {
+        var $placeControls = that.$element.find('.OxPlaceControl'),
+            isVisible = self.$placeControls.name.is(':visible');
+        if (place) {
+            self.$placeControls.flag.empty().append(
+                $('<img>')
+                    .attr({
+                        src: Ox.getImageByGeoname('icon', 16, place.geoname)
+                    })
+            ).show();
+            self.$placeControls.name.options({title: place.name})
+            !isVisible && $placeControls.show().animate({opacity: 1}, 250);
+        } else {
+            isVisible && $placeControls.animate({opacity: 0}, 250, function() {
+                $placeControls.hide();
+            });
+        }
+    }
+
     function setScale() {
         var metersPerPixel = getMetersPerPixel();
         Ox.forEach(self.scaleMeters, function(meters) {

source/Ox.UI/themes/classic/css/classic.css

@@ -465,7 +465,8 @@ Maps
 ================================================================================
 */
 
-.OxThemeClassic .OxMapControl {
+.OxThemeClassic .OxMapControl,
+.OxThemeClassic .OxPlaceControl {
     border-color: rgb(64, 64, 64);
     background: rgba(255, 255, 255, 0.75);
     color: rgb(64, 64, 64);

source/Ox.UI/themes/modern/css/modern.css

@@ -462,7 +462,8 @@ Maps
 ================================================================================
 */
 
-.OxThemeModern .OxMapControl {
+.OxThemeModern .OxMapControl,
+.OxThemeModern .OxPlaceControl {
     border-color: rgb(192, 192, 192);
     background: rgba(0, 0, 0, 0.5);
     color: rgb(192, 192, 192);