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);
|
lngSize = area * Ox.getDegreesPerMeter(city.latitude);
|
||||||
return {
|
return {
|
||||||
alternativeNames: [],
|
alternativeNames: [],
|
||||||
area: city.population * 100,
|
area: area,
|
||||||
countryCode: countryCode,
|
countryCode: countryCode,
|
||||||
editable: true,
|
editable: true,
|
||||||
flag: countryCode,
|
flag: countryCode,
|
||||||
|
|
@ -71,7 +71,10 @@ Ox.load('Geo', function() {
|
||||||
} else {
|
} else {
|
||||||
data.items = places;
|
data.items = places;
|
||||||
if (options.query) {
|
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) {
|
if (options.area) {
|
||||||
data.items = data.items.filter(function(place) {
|
data.items = data.items.filter(function(place) {
|
||||||
|
|
@ -80,30 +83,35 @@ Ox.load('Geo', function() {
|
||||||
&& place.lat < options.area.north
|
&& place.lat < options.area.north
|
||||||
&& place.lng > options.area.west
|
&& place.lng > options.area.west
|
||||||
&& place.lng < options.area.east;
|
&& 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) {
|
if (options.ids) {
|
||||||
data.positions = {};
|
data.positions = {};
|
||||||
data.items.forEach(function(place, i) {
|
data.items.forEach(function(place, i) {
|
||||||
|
|
|
||||||
|
|
@ -281,7 +281,36 @@ Ox.ListMap = function(options, self) {
|
||||||
self.$status = Ox.Element()
|
self.$status = Ox.Element()
|
||||||
.css({paddingTop: '2px', margin: 'auto', fontSize: '9px', textAlign: 'center'})
|
.css({paddingTop: '2px', margin: 'auto', fontSize: '9px', textAlign: 'center'})
|
||||||
.appendTo(self.$listStatusbar);
|
.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({
|
self.$placeTitlebar = Ox.Bar({
|
||||||
size: 24
|
size: 24
|
||||||
|
|
@ -458,117 +487,77 @@ Ox.ListMap = function(options, self) {
|
||||||
*/
|
*/
|
||||||
|
|
||||||
if (!self.isAsync) {
|
if (!self.isAsync) {
|
||||||
init(self.options.places)
|
self.placesLength = self.options.places.length;
|
||||||
|
setStatus();
|
||||||
} else {
|
} else {
|
||||||
self.options.places({}, function(result) {
|
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) {
|
that.$element.replaceWith(
|
||||||
//Ox.print('PLACES', places)
|
that.$element = Ox.SplitPanel({
|
||||||
self.$map = Ox.Map({
|
elements: [
|
||||||
clickable: true,
|
{
|
||||||
editable: true,
|
element: Ox.SplitPanel({
|
||||||
findPlaceholder: 'Find on Map',
|
elements: [
|
||||||
height: self.options.height,
|
{
|
||||||
places: places,
|
element: self.$listToolbar,
|
||||||
//statusbar: true,
|
size: 24
|
||||||
toolbar: true,
|
},
|
||||||
width: self.options.width - 514,//self.mapResize[1],
|
{
|
||||||
zoombar: true
|
element: self.$list
|
||||||
})
|
},
|
||||||
.bindEvent({
|
{
|
||||||
addplace: function(event, data) {
|
element: self.$listStatusbar,
|
||||||
that.triggerEvent('addplace', data);
|
size: 16
|
||||||
},
|
|
||||||
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});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}),
|
],
|
||||||
resizable: true,
|
orientation: 'vertical'
|
||||||
resize: [204, 256, 384],
|
}),
|
||||||
size: 256
|
resizable: true,
|
||||||
}
|
resize: [256, 384, 512],
|
||||||
],
|
size: 256
|
||||||
orientation: 'horizontal'
|
},
|
||||||
}).$element
|
{
|
||||||
);
|
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) {
|
function initList(event, data) {
|
||||||
self.$status.html(data.items + ' place' + (data.items == 1 ? '' : 's'))
|
self.$status.html(data.items + ' place' + (data.items == 1 ? '' : 's'))
|
||||||
|
|
@ -621,8 +610,8 @@ Ox.ListMap = function(options, self) {
|
||||||
|
|
||||||
function setStatus() {
|
function setStatus() {
|
||||||
self.$status.html(
|
self.$status.html(
|
||||||
self.options.places.length + ' Place' + (
|
self.options.placesLength + ' Place' + (
|
||||||
self.options.places.length == 1 ? '' : 's'
|
self.options.placesLength == 1 ? '' : 's'
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -922,14 +922,37 @@ Ox.Map = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectPlace(id) {
|
function selectPlace(id) {
|
||||||
|
// id can be null (deselect)
|
||||||
var place,
|
var place,
|
||||||
selected = getSelectedMarker();
|
selected = getSelectedMarker();
|
||||||
//Ox.print('Ox.Map selectPlace()', id, selected);
|
Ox.print('Ox.Map selectPlace()', id, selected);
|
||||||
if (id != selected) {
|
if (id != selected) {
|
||||||
place = getPlaceById(selected);
|
place = getPlaceById(selected);
|
||||||
place && place.deselect();
|
place && place.deselect();
|
||||||
place = getPlaceById(id);
|
if (id !== null) {
|
||||||
place && place.select();
|
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;
|
self.options.selected = id;
|
||||||
setStatus();
|
setStatus();
|
||||||
that.triggerEvent('selectplace', place);
|
that.triggerEvent('selectplace', place);
|
||||||
|
|
|
||||||
|
|
@ -1127,6 +1127,18 @@ import wikipedia
|
||||||
|
|
||||||
if __name__ == '__main__':
|
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)
|
write_json('../json/geo.json', geo)
|
||||||
|
|
||||||
countries = get_countries()
|
countries = get_countries()
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue