oxjs/examples/cities/js/example.js

509 lines
No EOL
22 KiB
JavaScript

/*
...
*/
'use strict';
/*
Since we will be doing some mapping, we have to load the Geo module.
*/
Ox.load({UI: {showScreen: true}, Geo: {}}, function() {
Ox.getJSON('json/cities.json', function(cities) {
/*
The JSON data originally comes from geonames.org. It's an array of
10,000 city objects, each of which has the following properties:
<pre>
{
"country_code": "CN",
"elevation": 0,
"feature_code": "PPLA",
"latitude": 31.22222,
"longitude": 121.45806,
"name": "Shanghai",
"population": 14608512
}
</pre>
*/
cities = cities.map(function(data, id) {
/*
First of all, we have to patch this data, so that it becomes more useful
both for the list and the map. Ox.getCountryByCode gives us the names of
the country, region and continent. For the map, we need a geoname, and
the cities have to be rectangular areas, not just points. So we set the
area to 100 square meters per inhabitant, which will turn out to be
relatively realistic. Then we calculate how large the resulting square
will be, in degrees. (The number of degrees from west to east depends on
the city's proximity to the equator. OxJS has some utility functions
built in that make this easy to compute.) Finally, we can set the values
for south, north, west and east. A nice side effect of deriving the size
of the city from its population is that the map, which will always show
the largest places in the visible area, will now show the most populated
cities.
*/
var area = Math.max(data.population, 1) * 100,
country = Ox.getCountryByCode(data.country_code),
latSize = Math.sqrt(area) / Ox.EARTH_CIRCUMFERENCE * 360,
lngSize = Math.sqrt(area) * Ox.getDegreesPerMeter(data.latitude);
/*
Our city object will look like this:<pre>
{
"area": 1460851200,
"capital": false,
"country": "China",
"east": 121.65880869475835,
"elevation": 0,
"geoname": "Shanghai, China",
"id": "0",
"lat": 31.22222,
"lng": 121.45806,
"name": "Shanghai",
"north": 31.393892916013158,
"population": 14608512,
"region": "Asia, Eastern Asia, China",
"south": 31.050547083986842,
"west": 121.25731130524166
}</pre>
Obviously, in a real-world scenario, you would make sure that the
data already comes in this form.
*/
return {
area: area,
capital: data.feature_code == 'PPLC',
country: country.name,
east: data.longitude + lngSize / 2,
elevation: data.elevation,
geoname: [data.name, country.name].join(', '),
id: id.toString(),
lat: data.latitude,
lng: data.longitude,
name: data.name,
north: data.latitude + latSize / 2,
population: data.population,
region: [country.continent, country.region, country.name].join(', '),
south: data.latitude - latSize / 2,
west: data.longitude - lngSize / 2
};
/**/
});
var listAPI = Ox.api(cities, {
cache: true,
sort: ['-population', '+name'],
sums: ['population']
}),
$preview = Ox.Button({
disabled: true,
selectable: true,
title: 'view',
type: 'image'
})
.bindEvent({
change: function(data) {
$list[(data.value ? 'open' : 'close') + 'Preview']();
}
}),
/*
As we want the list to be searchable, we add an input element.
*/
$find = Ox.Input({
clear: true,
placeholder: 'Find',
width: 192
})
.bindEvent({
submit: function(data) {
listAPI({
keys: [],
query: {
conditions: data.value ? [
{
key: 'name',
operator: '=',
value: data.value
},
{
key: 'region',
operator: '=',
value: data.value
}
] : [],
operator: '|'
}
}, function(result) {
$list.options({items: result.data.items});
});
}
}),
$toolbar = Ox.Bar({size: 24})
.attr({id: 'toolbar'})
.append($preview)
.append($find),
$list = Ox.TextList({
columns: [
{
/*
We don't want to display the id, so we omit the
visible attribute, which defaults to false. We still
have to include the id here, since is the unique key
of our table. In consequence, whenever the list
fires a select event, it will reference this value
as the item's id.
*/
id: 'id',
operator: '+',
title: 'Id',
unique: true
},
{
/*
We use the format function to display the region as
a colored icon with a tooltip. The OxTypeIcon class
makes the icon themed (its border color will depend
on the current theme), the region class is added to
apply our own custom CSS, and Ox.getGeoColor returns
a color for the region. Note that the actual value
is 'Continent, Region, Country', which results in a
nicer sort order than just 'Region'.
*/
format: function(value) {
var region = value.split(', ')[1];
return Ox.Element({
tooltip: region
})
.addClass('OxTypeIcon region')
.css({
background: 'rgb('
+ Ox.getGeoColor(region).join(', ')
+ ')'
});
},
id: 'region',
/*
The operator indicates that we want the default sort
order for this column to be ascending.
*/
operator: '+',
/*
We want the column title to be a symbol, so we pass
the 'icon' symbol at a titleImage. We can pick
anything from the collection of symbols that comes
with Ox.UI. The column still needs a textual title,
to be displayed in the menu that allows to show or
hide specific columns.
*/
title: 'Region',
titleImage: 'icon',
/**/
visible: true,
width: 16
},
{
/*
Ox.getFlagByGeoname and Ox.getFlagByCountryCode
return pretty flag icons.
*/
format: function(value) {
return Ox.Element({
element: '<img>',
tooltip: value
})
.addClass('flag')
.attr({
src: Ox.getFlagByGeoname(value)
})
},
id: 'country',
operator: '+',
title: 'Country',
titleImage: 'flag',
visible: true,
width: 16
},
{
format: function(value) {
return value
? $('<img>')
.addClass('capital')
.attr({
src: Ox.UI.getImageURL('symbolStar')
})
: '';
},
id: 'capital',
operator: '-',
title: 'Capital',
titleImage: 'star',
visible: true,
width: 16
},
{
/*
The format function has a second argument that
contains the values of all columns. This allows us
to format a value dependent on other values. In this
case, we want to display the name in bold if the
value for capital is true.
*/
format: function(value, data) {
return data.capital
? '<b>' + value + '</b>'
: value;
},
id: 'name',
operator: '+',
/*
As it wouldn't make much sense to display the list
without the name column, we make it non-removable.
*/
removable: false,
title: 'Name',
visible: true,
width: 128
},
{
/*
Since the following values are numbers, they should
be right-aligned. Also, we use some of the built-in
format functions.
*/
align: 'right',
format: function(value) {
return Ox.formatNumber(value);
},
id: 'population',
operator: '-',
title: 'Population',
visible: true,
width: 80
},
{
format: function(value) {
return Ox.formatDegrees(value, 'lat');
},
align: 'right',
id: 'lat',
operator: '-',
title: 'Latitude',
visible: true,
width: 80
},
{
format: function(value) {
return Ox.formatDegrees(value, 'lng');
},
align: 'right',
id: 'lng',
operator: '+',
title: 'Longitude',
visible: true,
width: 80
},
{
format: function(value) {
return Ox.formatNumber(value) + ' m';
},
align: 'right',
id: 'elevation',
operator: '-',
title: 'Elevation',
width: 80
}
],
/*
This allows the user to move the columns around
*/
columnsMovable: true,
/*
This enables the UI to show or hide specific columns
*/
columnsRemovable: true,
/*
This makes sure the column titles get displayed
*/
columnsVisible: true,
items: cities,
/*
FIXME: Actually, 'keys' doesn't make so much sense when the
API is local, since the list has been passed all data anyway
*/
keys: ['capital'],
max: 1,
scrollbarVisible: true,
/*
We have to specify the default sort order.
*/
sort: ['-population', '+name'],
sums: ['population']
})
.bindEvent({
closepreview: function() {
$preview.options({value: false});
$dialog.close();
},
init: function(data) {
$status.html(
(data.items ? Ox.formatNumber(data.items) : 'No')
+ ' Cit' + (data.items == 1 ? 'y' : 'ies')
+ ', Populaion: ' + (
data.population
? Ox.formatNumber(data.population)
: 'None'
)
);
},
open: function(data) {
$map.zoomToPlace();
},
openpreview: function(data) {
var item = Ox.getObjectById(cities, data.ids[0]);
$flagImage = $('<img>')
.attr({
src: Ox.getFlagByGeoname(item.country, 256)
});
$mapImage = Ox.MapImage({
height: 256,
markers: [item],
place: Ox.getCountryByGeoname(item.country),
width: 256
});
setImageSizes();
$preview.options({value: true});
$dialog.options({
content: $content = Ox.Element()
.attr({id: 'content'})
.append($flagImage)
.append($mapImage),
title: [item.name, item.country].join(', ')
}).open();
},
select: function(data) {
$preview.options({disabled: data.ids.length == 0});
$map.options({selected: data.ids[0]}).panToPlace();
}
}),
$flagImage,
$mapImage,
$content = Ox.Element(),
$dialog = Ox.Dialog({
closeButton: true,
content: $content,
fixedRatio: true,
focus: false,
height: 288,
maximizeButton: true,
maxHeight: 432,
maxWidth: 864,
minHeight: 144,
minWidth: 384,
width: 576
})
.bindEvent({
close: function() {
$list.closePreview();
},
resize: function(data) {
$content.css({height: data.height - 16 + 'px'})
setImageSizes();
}
}),
$status = $('<div>').css({
margin: '3px',
fontSize: '9px',
textAlign: 'center'
}),
$statusbar = Ox.Bar({size: 16}).append($status),
$map = Ox.Map({
clickable: true,
keys: ['population'],
markerColor: function(place) {
return place.population === void 0 ? [128, 128, 128]
: place.population > 10000000 ? [255, 0, 0]
: place.population > 5000000 ? [255, 32, 0]
: place.population > 2000000 ? [255, 64, 0]
: place.population > 1000000 ? [255, 96, 0]
: place.population > 500000 ? [255, 128, 0]
: place.population > 200000 ? [255, 160, 0]
: place.population > 100000 ? [255, 192, 0]
: place.population > 50000 ? [255, 224, 0]
: [255, 255, 0];
},
markerSize: function(place) {
return place.population === void 0 ? 16
: place.population > 10000000 ? 24
: place.population > 5000000 ? 22
: place.population > 2000000 ? 20
: place.population > 1000000 ? 18
: place.population > 500000 ? 16
: place.population > 200000 ? 14
: place.population > 100000 ? 12
: place.population > 50000 ? 10
: 8;
},
places: cities,
showControls: true,
showToolbar: true,
showZoombar: true
})
.bindEvent({
select: function(data) {
$list.options({
selected: data.place ? [data.place.id] : []
});
}
}),
$listPanel = Ox.SplitPanel({
elements: [
{element: $toolbar, size: 24},
{element: $list},
{element: $statusbar, size: 16}
],
orientation: 'vertical'
}),
$mainPanel = Ox.SplitPanel({
elements: [
{
element: $listPanel.bindEvent({
resize: function(data) {
$find.options({
width: data.size < 220
? data.size - 28
: 192
});
}
}),
resizable: true,
resize: [176, 256, 336, 416, 496].map(function(size) {
return size + Ox.UI.SCROLLBAR_SIZE;
}),
size: 416 + Ox.UI.SCROLLBAR_SIZE
},
{
element: $map.bindEvent({
resizeend: function(data) {
$map.resizeMap();
}
})
}
],
orientation: 'horizontal'
})
.appendTo(Ox.$body);
function setImageSizes() {
var size = Math.floor(($dialog.options('width') - 64) / 2);
[$flagImage, $mapImage].forEach(function($image) {
$image.css({width: size + 'px', height: size + 'px'});
});
}
Ox.$window.bind({
resize: function() {
$map.resizeMap();
}
});
});
});