make map in async listmap async

demos/listmap2/js/listmap.js

@@ -23,7 +23,7 @@ Ox.load('Geo', function() {
                 lngSize = area * Ox.getDegreesPerMeter(city.latitude);
             return {
                 alternativeNames: [],
-                area: city.population * 100,
+                area: area,
                 countryCode: countryCode,
                 editable: true,
                 flag: countryCode,
@@ -71,7 +71,10 @@ Ox.load('Geo', function() {
                     } else {
                         data.items = places;
                         if (options.query) {
-
+                            // only case is key: 'id', value: ..., operator: '='
+                            data.items = data.items.filter(function(place) {
+                                return place[options.query.key] == options.query.value;
+                            });
                         }
                         if (options.area) {
                             data.items = data.items.filter(function(place) {
@@ -80,8 +83,12 @@ Ox.load('Geo', function() {
                                     && place.lat < options.area.north
                                     && place.lng > options.area.west
                                     && place.lng < options.area.east;
+                            }).sort(function(a, b) {
+                                return b.area - a.area;
+                            }).filter(function(place, i) {
+                                return i < 100;
                             });
-                        }
+                        } else {
                             data.items.sort(function(a, b) {
                                 if (options.sort[0].key == 'geoname') {
                                     aValue = a.geonameSort;
@@ -104,6 +111,7 @@ Ox.load('Geo', function() {
                                 }
                                 return ret;
                             });
+                        }
                         if (options.ids) {
                             data.positions = {};
                             data.items.forEach(function(place, i) {

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

@@ -281,7 +281,36 @@ Ox.ListMap = function(options, self) {
     self.$status = Ox.Element()
         .css({paddingTop: '2px', margin: 'auto', fontSize: '9px', textAlign: 'center'})
         .appendTo(self.$listStatusbar);
-    setStatus();
+
+    self.$map = Ox.Map({
+        clickable: true,
+        editable: true,
+        findPlaceholder: 'Find on Map',
+        height: self.options.height,
+        places: self.options.places,
+        //statusbar: true,
+        toolbar: true,
+        width: self.options.width - 514,//self.mapResize[1],
+        zoombar: true
+    })
+    .bindEvent({
+        addplace: function(event, data) {
+            that.triggerEvent('addplace', data);
+        },
+        changeplace: function(event, data) {
+            self.$placeForm.values(Ox.map(data, function(val, key) {
+                // fixme: no size key anymore
+                return key == 'size' ? Ox.formatArea(val) : val;
+            })).show();
+        },
+        geocode: function(event, data) {
+            that.triggerEvent('geocode', data);
+        },
+        resize: function() {
+            self.$map.resizeMap(); // fixme: don't need event
+        },
+        selectplace: selectPlace
+    });
 
     self.$placeTitlebar = Ox.Bar({
         size: 24
@@ -458,54 +487,15 @@ Ox.ListMap = function(options, self) {
     */
 
     if (!self.isAsync) {
-        init(self.options.places)
+        self.placesLength = self.options.places.length;
+        setStatus();
     } else {
         self.options.places({}, function(result) {
-            Ox.print('$$$$', result.data.items)
+            self.placesLength = result.data.items;
-            self.options.places({
+            setStatus();
-                keys: self.columns.map(function(column) {
-                    return column.id
-                }),
-                range: [0, result.data.items],
-                sort: self.options.sort,
-            }, function(result) {
-                Ox.print('DATA', result)
-                init(result.data.items);
-            });
         });
     }
 
-    function init(places) {
-        //Ox.print('PLACES', places)
-        self.$map = Ox.Map({
-                clickable: true,
-                editable: true,
-                findPlaceholder: 'Find on Map',
-                height: self.options.height,
-                places: places,
-                //statusbar: true,
-                toolbar: true,
-                width: self.options.width - 514,//self.mapResize[1],
-                zoombar: true
-            })
-            .bindEvent({
-                addplace: function(event, data) {
-                    that.triggerEvent('addplace', data);
-                },
-                changeplace: function(event, data) {
-                    self.$placeForm.values(Ox.map(data, function(val, key) {
-                        // fixme: no size key anymore
-                        return key == 'size' ? Ox.formatArea(val) : val;
-                    })).show();
-                },
-                geocode: function(event, data) {
-                    that.triggerEvent('geocode', data);
-                },
-                resize: function() {
-                    self.$map.resizeMap(); // fixme: don't need event
-                },
-                selectplace: selectPlace
-            });
     that.$element.replaceWith(
         that.$element = Ox.SplitPanel({
             elements: [
@@ -568,7 +558,6 @@ Ox.ListMap = function(options, self) {
             orientation: 'horizontal'
         }).$element
     );
-    }
 
     function initList(event, data) {
         self.$status.html(data.items + ' place' + (data.items == 1 ? '' : 's'))
@@ -621,8 +610,8 @@ Ox.ListMap = function(options, self) {
 
     function setStatus() {
         self.$status.html(
-            self.options.places.length + ' Place' + (
+            self.options.placesLength + ' Place' + (
-                self.options.places.length == 1 ? '' : 's'
+                self.options.placesLength == 1 ? '' : 's'
             )
         );
     }

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

@@ -922,14 +922,37 @@ Ox.Map = function(options, self) {
     }
 
     function selectPlace(id) {
+        // id can be null (deselect)
         var place,
             selected = getSelectedMarker();
-        //Ox.print('Ox.Map selectPlace()', id, selected);
+        Ox.print('Ox.Map selectPlace()', id, selected);
         if (id != selected) {
             place = getPlaceById(selected);
             place && place.deselect();
+            if (id !== null) {
                 place = getPlaceById(id);
-            place && place.select();
+                if (place) {
+                    select();
+                } else {
+                    // async && place doesn't exist yet
+                    self.options.places({
+                        query: {
+                            key: 'id',
+                            value: id,
+                            operator: '='
+                        }
+                    }, function(results) {
+                        place = new Ox.MapPlace(Ox.extend({
+                            map: that
+                        }, results.data.items[0])).add();
+                        self.places.push(place);
+                        select();
+                    });
+                }
+            }
+        }
+        function select() {
+            place.select();
             self.options.selected = id;
             setStatus();
             that.triggerEvent('selectplace', place);

tools/geo/py/geo.py

@@ -1127,6 +1127,18 @@ import wikipedia
 
 if __name__ == '__main__':
 
+    file = '../txt/geonames.org/cities1000.txt'
+    geo['keys'] = read_json('../json/oxjs.org/geonames.keys.json')
+    keys = geo['keys']['place']['geonames.org']
+    drop = ['alternatenames']
+    # filter = lambda x: x['feature_code'] != 'PPLX' and x['population'] >= 100000
+    filter = lambda x: x['feature_code'] == 'PPLC' or x['population'] >= 10000
+    sort = lambda x: -x['population']
+    data = read_table(file, keys, drop=drop, filter=filter, sort=sort)
+    write_json('../json/geonames.org/cities10000.json', data, False)
+    print len(data)
+    sys.exit()
+
     write_json('../json/geo.json', geo)
 
     countries = get_countries()