/*
...
*/
'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:
{
"country_code": "CN",
"elevation": 0,
"feature_code": "PPLA",
"latitude": 31.22222,
"longitude": 121.45806,
"name": "Shanghai",
"population": 14608512
}
*/
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:
{
"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
}
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 $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) {
$list.options({
query: {
conditions: data.value ? [
{
key: 'name',
operator: '=',
value: data.value
},
{
key: 'region',
operator: '=',
value: data.value
},
{
key: 'continent',
operator: '=',
value: data.value
}
] : [],
operator: '|'
}
});
}
}),
$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,
width: 80
},
{
/*
We use the format function to display the region as
a colored icon with a tooltip. 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('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: '![]()
',
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
? Ox.Element({
element: '![]()
',
tooltip: 'Capital'
})
.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
? '' + value + ''
: 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 = $('![]()
')
.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 = $('').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: $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: $map.resizeMap});
});
});