From 93408b0b4d1a56ac70ea51d3a9878b9ecd8e647f Mon Sep 17 00:00:00 2001 From: rolux Date: Sun, 29 May 2011 14:22:54 +0200 Subject: [PATCH] make map in async listmap async --- demos/listmap2/js/listmap.js | 56 ++++---- source/Ox.UI/js/Map/Ox.ListMap.js | 205 ++++++++++++++---------------- source/Ox.UI/js/Map/Ox.Map.js | 29 ++++- tools/geo/py/geo.py | 12 ++ 4 files changed, 167 insertions(+), 135 deletions(-) diff --git a/demos/listmap2/js/listmap.js b/demos/listmap2/js/listmap.js index 5a2e812a..c7e5b803 100644 --- a/demos/listmap2/js/listmap.js +++ b/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,30 +83,35 @@ 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; + bValue = b.geonameSort; + } else { + aValue = a[options.sort[0].key]; + bValue = b[options.sort[0].key]; + } + var ret = 0; + if ( + (options.sort[0].operator == '+' && aValue < bValue) + || (options.sort[0].operator == '-' && aValue > bValue) + ) { + ret = -1; + } else if ( + (options.sort[0].operator == '+' && aValue > bValue) + || (options.sort[0].operator == '-' && aValue < bValue) + ) { + ret = 1; + } + return ret; }); } - data.items.sort(function(a, b) { - if (options.sort[0].key == 'geoname') { - aValue = a.geonameSort; - bValue = b.geonameSort; - } else { - aValue = a[options.sort[0].key]; - bValue = b[options.sort[0].key]; - } - var ret = 0; - if ( - (options.sort[0].operator == '+' && aValue < bValue) - || (options.sort[0].operator == '-' && aValue > bValue) - ) { - ret = -1; - } else if ( - (options.sort[0].operator == '+' && aValue > bValue) - || (options.sort[0].operator == '-' && aValue < bValue) - ) { - ret = 1; - } - return ret; - }); if (options.ids) { data.positions = {}; data.items.forEach(function(place, i) { diff --git a/source/Ox.UI/js/Map/Ox.ListMap.js b/source/Ox.UI/js/Map/Ox.ListMap.js index cebdafcf..708dd6e3 100644 --- a/source/Ox.UI/js/Map/Ox.ListMap.js +++ b/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,117 +487,77 @@ 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.options.places({ - 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); - }); + self.placesLength = result.data.items; + setStatus(); }); } - 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: [ - { - element: Ox.SplitPanel({ - elements: [ - { - element: self.$listToolbar, - size: 24 - }, - { - element: self.$list - }, - { - element: self.$listStatusbar, - size: 16 - } - ], - orientation: 'vertical' - }), - resizable: true, - resize: [256, 384, 512], - size: 256 - }, - { - element: self.$map, - }, - { - collapsible: true, - element: Ox.SplitPanel({ - elements: [ - { - element: self.$placeTitlebar, - size: 24 - }, - { - element: self.$placeForm - }, - { - element: self.$placeStatusbar, - size: 24 - } - ], - orientation: 'vertical' - }) - .bindEvent({ - 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}); - }); + that.$element.replaceWith( + that.$element = Ox.SplitPanel({ + elements: [ + { + element: Ox.SplitPanel({ + elements: [ + { + element: self.$listToolbar, + size: 24 + }, + { + element: self.$list + }, + { + element: self.$listStatusbar, + size: 16 } - }), - resizable: true, - resize: [204, 256, 384], - size: 256 - } - ], - orientation: 'horizontal' - }).$element - ); - } + ], + orientation: 'vertical' + }), + resizable: true, + resize: [256, 384, 512], + size: 256 + }, + { + element: self.$map, + }, + { + collapsible: true, + element: Ox.SplitPanel({ + elements: [ + { + element: self.$placeTitlebar, + size: 24 + }, + { + element: self.$placeForm + }, + { + element: self.$placeStatusbar, + size: 24 + } + ], + orientation: 'vertical' + }) + .bindEvent({ + 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}); + }); + } + }), + resizable: true, + resize: [204, 256, 384], + size: 256 + } + ], + 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.places.length == 1 ? '' : 's' + self.options.placesLength + ' Place' + ( + self.options.placesLength == 1 ? '' : 's' ) ); } diff --git a/source/Ox.UI/js/Map/Ox.Map.js b/source/Ox.UI/js/Map/Ox.Map.js index 769f4f98..07aa3c42 100644 --- a/source/Ox.UI/js/Map/Ox.Map.js +++ b/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(); - place = getPlaceById(id); - place && place.select(); + if (id !== null) { + place = getPlaceById(id); + 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); diff --git a/tools/geo/py/geo.py b/tools/geo/py/geo.py index bd6cf2d1..8e9f7ab6 100644 --- a/tools/geo/py/geo.py +++ b/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()