improving listmap

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

@@ -15,7 +15,6 @@ Ox.Map <function> Basic map object
         clickable       <b|false> If true, clicking on the map finds a place
         editable        <b|false> If true, places are editable
         findPlaceholder <s|"Find"> Placeholder text for the find input element
-        labels          <b|false> If true, show labels on the map
         markers         <n|100> Maximum number of markers to be displayed
         places          <[o]|[]> Array of place objects
             countryCode     <s> ISO 3166 country code
@@ -32,6 +31,8 @@ Ox.Map <function> Basic map object
             type            <s> Type (like "city" or "country")
             west            <n> Longitude of the western boundary in degrees
         selected        <s|""> Id of the selected place
+        showControls    <b|false> If true, show controls
+        showLabels      <b|false> If true, show labels on the map
         statusbar       <b|false> If true, the map has a statusbar
         toolbar         <b|false> If true, the map has a toolbar
     self <o|{}> Shared private variable
@@ -93,10 +94,11 @@ Ox.Map = function(options, self) {
             clickable: false,
 			editable: false,
 			findPlaceholder: 'Find',
-            labels: false,
             markers: 100,
             places: [],
             selected: null,
+            showControls: false,
+            showLabels: false,
             statusbar: false,
             toolbar: false,
             zoombar: false
@@ -194,6 +196,21 @@ Ox.Map = function(options, self) {
                 size: 24
             })
             .appendTo(that);
+        self.$select = Ox.Select({
+                items: [
+                    {id: 'new Place', title: 'New Place...', keyboard: 'n'},
+                    {},
+                    {id: 'toggleLabels', title: 'Show Labels', keyboard: 'l', checked: self.options.showLabels},
+                    {id: 'toggleControls', title: 'Show Controls', keyboard: 'c', checked: self.options.showControls},
+                ],
+                min: 0,
+                max: 2,
+                title: 'Options...',
+                width: 96
+            })
+            .css({float: 'left', margin: '4px'})
+            .appendTo(self.$toolbar);
+        /*
         self.$labelsButton = new Ox.Checkbox({
                 title: 'Labels',
                 width: 64
@@ -203,6 +220,7 @@ Ox.Map = function(options, self) {
                 change: toggleLabels
             })
             .appendTo(self.$toolbar)
+        */
         self.$findInput = new Ox.Input({
                 clear: true,
                 placeholder: self.options.findPlaceholder,
@@ -314,16 +332,18 @@ Ox.Map = function(options, self) {
                 top: '24px',
             })
     };
+    Ox.forEach(self.$navigationButtons, function($button) {
+        $button.attr({
+            src: $button.attr('src').replace('/classic/', '/modern/')
+        });
+    });
 
     self.$scaleLabel = new Ox.Label({
             textAlign: 'center',
             title: '...'
         })
         .addClass('OxMapLabel')
-        .css({
-            right: '4px',
-            top: '4px'
-        });
+        .css({right: '4px', top: '4px'});
 
     if (!window.googleCallback) {
         window.googleCallback = function() {
@@ -490,7 +510,7 @@ Ox.Map = function(options, self) {
     }
 
     function getMapType() {
-        return self.options.labels ? 'HYBRID' : 'SATELLITE'
+        return self.options.showLabels ? 'HYBRID' : 'SATELLITE'
     }
 
     function getMaxZoom(point, callback) {
@@ -892,7 +912,7 @@ Ox.Map = function(options, self) {
     }
 
     function toggleLabels() {
-        self.options.labels = !self.options.labels
+        self.options.showLabels = !self.options.showLabels
         Ox.print('toggle', getMapType())
         self.map.setMapTypeId(google.maps.MapTypeId[getMapType()]);
         /*