some more work on map/listmap

demos/listmap2/js/listmap.js

@@ -5,11 +5,11 @@ Ox.load('UI', {
 
 Ox.load('Geo', function() {
 
-    Ox.getJSON('json/cities1000000.json', function(data) {
+    Ox.getJSON('json/cities100000.json', function(cities) {
 
         var listmap = new Ox.ListMap({
                 height: window.innerHeight,
-                places: data.map(function(city, id) {
+                places: Ox.map(cities, function(city, id) {
                     var countryCode = city.country_code == 'XK' ? 'RS-KO' : city.country_code,
                         marker = city.population > 20000000 ? {size: 24, color: [255, 0, 0]} :
                             city.population > 10000000 ? {size: 22, color: [255, 32, 0]} :
@@ -23,12 +23,12 @@ Ox.load('Geo', function() {
                         size = Math.sqrt(city.population * 100),
                         latSize = size / Ox.EARTH_CIRCUMFERENCE * 360,
                         lngSize = size * Ox.getDegreesPerMeter(city.latitude);
-                    return {
+                    return city.population > 400000 ? {
                         countryCode: countryCode,
                         editable: true,
                         flag: countryCode,
                         geoname: city.name + ', ' + Ox.getCountryByCode(countryCode).name,
-                        id: id,
+                        id: Ox.encodeBase32(id),
                         markerColor: marker.color,
                         markerSize: marker.size,
                         name: city.name,
@@ -40,7 +40,7 @@ Ox.load('Geo', function() {
                         west: city.longitude - lngSize / 2,
                         north: city.latitude + latSize / 2,
                         east: city.longitude + lngSize / 2
-                    };
+                    } : null;
                 }),
                 width: window.innerWidth
             })

demos/map/js/map.js

@@ -1,4 +1,5 @@
 Ox.load('UI', {debug: true}, function() {
+Ox.load('Geo', function() {
 
     $.getJSON('json/countries.json', function(data) {
         
@@ -127,3 +128,4 @@ Ox.load('UI', {debug: true}, function() {
     });
 
 });
+});

source/Ox.Geo/Ox.Geo.js

@@ -93,6 +93,23 @@ Ox.load.Geo = function(options, callback) {
             return country;
         };
 
+        /*@
+        Ox.getCountryByGeoname <f> Returns a country object for a given geoname
+            (name) -> <o> Country object
+            name <s> Geoname
+            > Ox.getCountryByGeoname('Los Angeles, California, United States').code
+            'US'
+            > Ox.getCountryByGeoname('The Bottom, Saba, Bonaire, Saint Eustatius and Saba').code
+            'BQ'
+        @*/
+
+        Ox.getCountryByGeoname = function(geoname) {
+            return Ox.getCountryByName(
+                geoname.split(', ').pop()
+                .replace('Saint Eustatius', 'Bonaire, Saint Eustatius')
+            );
+        }
+
         /*@
         Ox.getCountryByName <f> Returns a country object for a given country name
             (name) -> <o> Country object

source/Ox.Geo/json/Ox.Geo.json

@@ -5085,7 +5085,7 @@
         "west": 12.4035885
     },
     {
-        "code": "NT",
+        "code": "NTHH",
         "dependencies": [],
         "dependency": [
             "Iraq",

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

@@ -1121,6 +1121,12 @@ input[type=image].OxMapButton {
     border-width: 2px;
 }
 
+.OxFlag {
+    width: 16px;
+    height: 16px;
+    border-radius: 8px;
+}
+
 /*
 ================================================================================
 Menus

source/Ox.UI/js/List/Ox.TextList.js

@@ -10,11 +10,13 @@ Ox.TextList <f:Ox.Element> TextList Object
             Fixme: There's probably more...
             addable <b>
             editable <b>
+            format <f>
             id <s>
             removable <b>
             operator <s> default sort operator
             sort <f> function that maps values to sort values
             title <s>
+            unique <b> If true, this column acts as unique id
             visible <b>
             width <n>
         columnsMovable <b|false>
@@ -274,10 +276,18 @@ Ox.TextList = function(options, self) {
                     textAlign: v.align
                 })
                 .html(v.title)
-                .bindEvent({
+                .appendTo(that.$head.$content.$element);
+            // if sort operator is set, bind click event
+            if (v.operator) {
+                that.$titles[i].bindEvent({
                     anyclick: function(event, e) {
                         clickColumn(v.id);
-                    },
+                    }
+                });
+            }
+            // if columns are movable, bind drag events
+            if (self.options.columnsMovable) {
+                that.$titles[i].bindEvent({
                     dragstart: function(event, e) {
                         dragstartColumn(v.id, e);
                     },
@@ -288,7 +298,7 @@ Ox.TextList = function(options, self) {
                         dragendColumn(v.id, e);
                     }
                 })
-                .appendTo(that.$head.$content.$element);
+            }
             $order = $('<div>')
                 .addClass('OxOrder')
                 .html(Ox.UI.symbols['triangle_' + (
@@ -301,6 +311,7 @@ Ox.TextList = function(options, self) {
             $resize = new Ox.Element()
                 .addClass('OxResize')
                 .appendTo(that.$head.$content.$element);
+            // if columns are resizable, bind click and drag events
             if (self.options.columnsResizable) {
                 $resize.addClass('OxResizable')
                     .bindEvent({
@@ -325,8 +336,6 @@ Ox.TextList = function(options, self) {
         that.$head.$content.css({
             width: (Ox.sum(self.columnWidths) + 2) + 'px'
         });
-        //Ox.print('s.sC', self.selectedColumn)
-        //Ox.print('s.cO', self.columnOffsets)
         if (getColumnPositionById(self.options.columns[self.selectedColumn].id) > -1) { // fixme: save in var
             toggleSelected(self.options.columns[self.selectedColumn].id);
             that.$titles[getColumnPositionById(self.options.columns[self.selectedColumn].id)].css({
@@ -721,11 +730,15 @@ Ox.TextList = function(options, self) {
                 toggleSelected(self.options.columns[self.selectedColumn].id);
             }
         }
-        that.$body.sortList(
+        // fixme: strangely, sorting the list blocks toggling the selection,
-            self.options.sort[0].key,
+        // so we use a timeout for now
-            self.options.sort[0].operator,
+        setTimeout(function() {
-            self.options.columns[self.selectedColumn].sort
+            that.$body.sortList(
-        );
+                self.options.sort[0].key,
+                self.options.sort[0].operator,
+                self.options.columns[self.selectedColumn].sort
+            );
+        }, 10);
         return that;
     };
 

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

@@ -41,6 +41,42 @@ Ox.ListMap = function(options, self) {
             unique: true,
             visible: false
         },
+        {
+            format: function(value) {
+                return $('<img>')
+                    .attr({
+                        // fixme: not the right place to do this
+                        src: Ox.PATH + 'Ox.Geo/png/icons/16/' + (value || 'NTHH') + '.png'
+                    })
+                    .css({
+                        width: '14px',
+                        height: '14px',
+                        marginLeft: '-3px',
+                        marginTop: 0
+                    });
+                    /*
+                    .css({
+                        width: '21px',
+                        height: '14px'
+                    })
+                    .load(function() {
+                        var $this = $(this);
+                        Ox.print($this.width() / $this.height())
+                        $this.css({
+                            width: Math.round(14 * $this.width() / $this.height()) + 'px',
+                            height: '14px',
+                            padding: '1px 0 0 1px'
+                        });
+                    });
+                    */
+            },
+            id: 'countryCode',
+            resizable: false, // fixme: implement
+            title: '<img src="' + Ox.UI.getImagePath('symbolFlag.svg') +
+                '" style="width: 10px; height: 10px; padding: 3px 1px 1px 3px"/>',
+            visible: true,
+            width: 16
+        },
         {
             editable: true,
             id: 'name',
@@ -62,39 +98,6 @@ Ox.ListMap = function(options, self) {
             visible: true,
             width: 192
         },
-        {
-            format: function(value) {
-                return $('<img>')
-                    .attr({
-                        // fixme: not the right place to do this
-                        src: Ox.PATH + 'Ox.Geo/png/icons/16/' + (value || 'NTHH') + '.png'
-                    })
-                    .css({
-                        width: '14px',
-                        height: '14px'
-                    });
-                    /*
-                    .css({
-                        width: '21px',
-                        height: '14px'
-                    })
-                    .load(function() {
-                        var $this = $(this);
-                        Ox.print($this.width() / $this.height())
-                        $this.css({
-                            width: Math.round(14 * $this.width() / $this.height()) + 'px',
-                            height: '14px',
-                            padding: '1px 0 0 1px'
-                        });
-                    });
-                    */
-            },
-            id: 'countryCode',
-            operator: '+',
-            title: 'Flag',
-            visible: true,
-            width: 48
-        },
         {
             align: 'right',
             format: {type: 'area', args: [0]},
@@ -245,17 +248,22 @@ Ox.ListMap = function(options, self) {
         .html(self.options.places.length + ' Place' + (self.options.places.length == 1 ? '' : 's'))
         .appendTo(self.$listStatusbar);
 
-    self.$placeToolbar = Ox.Bar({
+    self.$placeTitlebar = Ox.Bar({
         size: 24
     });
-
+    self.$placeTitleFlag = $('<img>')
-    self.$newPlaceButton = Ox.Button({
+        .addClass('OxFlag')
-            id: 'newPlace',
+        .attr({
-            title: 'New Place',
+            src: Ox.PATH + 'Ox.Geo/png/icons/16/NTHH.png'
-            width: 80
+        })
+        .css({float: 'left', margin: '4px 0 0 4px'})
+        .appendTo(self.$placeTitlebar.$element);
+    self.$placeTitleName = Ox.Label({
+            title: '',
+            width: 228
         })
         .css({float: 'left', margin: '4px'})
-        .appendTo(self.$placeToolbar);
+        .appendTo(self.$placeTitlebar);
 
     self.$placeFormItems = Ox.merge([
         Ox.Input({
@@ -361,7 +369,6 @@ Ox.ListMap = function(options, self) {
                 findPlaceholder: 'Find on Map',
                 height: self.options.height,
                 places: places,
-                statusbar: true,
                 toolbar: true,
                 width: self.options.width - 514,//self.mapResize[1],
                 zoombar: true
@@ -415,7 +422,7 @@ Ox.ListMap = function(options, self) {
                         element: Ox.SplitPanel({
                             elements: [
                                 {
-                                    element: self.$placeToolbar,
+                                    element: self.$placeTitlebar,
                                     size: 24
                                 },
                                 {
@@ -429,8 +436,9 @@ Ox.ListMap = function(options, self) {
                             orientation: 'vertical'
                         })
                         .bindEvent({
-                            // fixme: pass width through form
                             resize: function(foo, size) {
+                                self.$placeTitleName.options({width: size - 28});
+                                // fixme: pass width through form
                                 self.$placeFormItems.forEach(function($item) {
                                     $item.options({width: size - 16});
                                 });
@@ -468,12 +476,17 @@ Ox.ListMap = function(options, self) {
         id && self.$map.panToPlace();
     }
 
-    function selectPlace(event, data) {
+    function selectPlace(place) {
-        Ox.print('selectPlace', data, data.id)
+        var country = place.id ? Ox.getCountryByGeoname(place.geoname) : '',
-        data.id && data.id[0] != '_' && self.$list.options({
+            code = country ? country.code : 'NTHH';
-            selected: data.id ? [data.id] : []
+        place.id && place.id[0] != '_' && self.$list.options({
+            selected: place.id ? [place.id] : []
         });
-        self.$placeForm.values(Ox.map(data, function(val, key) {
+        self.$placeTitleFlag.attr({
+            src: Ox.PATH + 'Ox.Geo/png/icons/16/' + code + '.png'
+        });
+        self.$placeTitleName.options({title: place.geoname || ''});
+        self.$placeForm.values(Ox.map(place, function(val, key) {
             return key == 'size' ? Ox.formatArea(val) : val;
         }));
     }

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

@@ -260,19 +260,26 @@ Ox.Map = function(options, self) {
                 bottom: 0
             })
             .appendTo(that);
+        self.$placeFlag = $('<img>')
+            .addClass('OxFlag')
+            .attr({
+                src: Ox.PATH + 'Ox.Geo/png/icons/16/NTHH.png'
+            })
+            .css({float: 'left', margin: '4px 2px 4px 4px'})
+            .appendTo(self.$statusbar.$element);
         self.$placeNameInput = new Ox.Input({
                 placeholder: 'Name',
                 width: 96
             })
             //.css({position: 'absolute', left: 4, top: 4})
-            .css({float: 'left', margin: '4px 1px 4px 4px'})
+            .css({float: 'left', margin: '4px 2px 4px 2px'})
             .appendTo(self.$statusbar);
         self.$placeGeonameInput = new Ox.Input({
                 placeholder: 'Geoname',
                 width: 96
             })
             //.css({position: 'absolute', left: 104, top: 4})
-            .css({float: 'left', margin: '4px 1px 4px 4px'})
+            .css({float: 'left', margin: '4px 2px 4px 2px'})
             .appendTo(self.$statusbar);
         self.$placeButton = new Ox.Button({
                 title: 'New Place',
@@ -407,7 +414,7 @@ Ox.Map = function(options, self) {
         place.id = place.id.substr(1); // fixme: NOT SAFE!
         place.name = self.$placeNameInput.value();
         place.geoname = self.$placeGeonameInput.value();
-        place.countryCode = Ox.getCountryCode(place.geoname);
+        place.countryCode = Ox.getCountryByGeoname(place.geoname).code;
         place.marker.update();
         self.places.push(place);
         self.resultPlace = null;
@@ -880,15 +887,20 @@ Ox.Map = function(options, self) {
 
     function setStatus() {
         Ox.print('setStatus()', self.options.selected)
-        var disabled, place, title;
+        var code, country, disabled, place, title;
         if (self.options.statusbar) {
             place = getSelectedPlace();
+            country = place ? Ox.getCountryByGeoname(place.geoname) : '';
+            code = country ? country.code : 'NTHH';
+            disabled = place && !place.editable;
             if (place) {
                 title = place.id[0] == '_' ? 'Add Place' : 'Remove Place';
             } else {
                 title = 'New Place';
             }
-            disabled = place && !place.editable;
+            self.$placeFlag.attr({
+                src: Ox.PATH + 'Ox.Geo/png/icons/16/' + code + '.png'
+            });
             self.$placeNameInput.options({
                 disabled: disabled,
                 value: place ? place.name : ''
@@ -967,12 +979,14 @@ Ox.Map = function(options, self) {
     function updateFormElements() {
         var width = that.width();
         self.$zoomInput && constructZoomInput();
-        self.$placeNameInput && self.$placeNameInput.options({
+        if (self.options.statusbar) {
-            width: Math.floor((width - 112) / 2)
+            self.$placeNameInput.options({
-        });
+                width: Math.floor((width - 132) / 2)
-        self.$placeGeonameInput && self.$placeGeonameInput.options({
+            });
-            width: Math.ceil((width - 112) / 2)
+            self.$placeGeonameInput.options({
-        });
+                width: Math.ceil((width - 132) / 2)
+            });
+        }
     }
 
 	function zoom(z) {

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

@@ -27,8 +27,6 @@ Ox.MapMarkerImage = (function() {
             options.type, options.mode, options.size, options.color.join(',')
         ].join(';');
 
-        Ox.print('HELLO??')
-
         if (!cache[index]) {
             var color = options.type == 'place' ?
                     Ox.merge(Ox.clone(options.color), [0.5]) :