/* ... */ '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}); }); });