make the flag icon an actual control

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

@@ -425,7 +425,15 @@ Ox.Map = function(options, self) {
 
     self.$placeControls = {
         flag: Ox.Element()
-            .addClass('OxPlaceControl OxPlaceFlag'),
+            .addClass('OxPlaceControl OxPlaceFlag')
+            .bindEvent({
+                anyclick: function() {
+                    var country = this.data('country');
+                    country && getPlaceByName(country, function(place) {
+                        place && self.map.fitBounds(place.bounds);
+                    });
+                }
+            }),
         name: Ox.Label({
                 textAlign: 'center',
                 tooltip: 'Click to pan, doubleclick to zoom'
@@ -1180,13 +1188,23 @@ Ox.Map = function(options, self) {
 
     function setPlaceControls(place) {
         var $placeControls = that.$element.find('.OxPlaceControl'),
+            country,
             isVisible = self.$placeControls.name.is(':visible');
         if (place) {
-            self.$placeControls.flag.empty().append(
+            country = place.geoname.indexOf(', ') > -1
+                ? place.geoname.split(', ').pop()
+                : '';
+            self.$placeControls.flag.options({
+                    tooltip: country ? 'Zoom to ' + country : ''
+                })
+                .data({country: country})
+                .empty()
+                .append(
                     $('<img>').attr({
                         src: Ox.getFlagByGeoname(place.geoname, 16)
                     })
-            ).show();
+                )
+                .show();
             self.$placeControls.name.options({
                 title: place.name ||'<span class="OxLight">Unnamed</span>'
             });