make map in async listmap async
This commit is contained in:
rolux
parent
14174136d8
commit
93408b0b4d
4 changed files with 167 additions and 135 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
Loading…
Reference in a new issue