oxjs/demos/listmap2/js/listmap.js

56 lines
No EOL
2.5 KiB
JavaScript

Ox.load('UI', {
debug: true,
hideScreen: true,
showScreen: true,
theme: 'modern'
}, function() {
Ox.loadJSON('json/cities100000.json', function(data) {
var listmap = new Ox.ListMap({
height: window.innerHeight,
places: data.map(function(city) {
var marker = city.population > 20000000 ? {size: 24, color: [255, 0, 0]} :
city.population > 10000000 ? {size: 22, color: [255, 32, 0]} :
city.population > 5000000 ? {size: 20, color: [255, 64, 0]} :
city.population > 2000000 ? {size: 18, color: [255, 96, 0]} :
city.population > 1000000 ? {size: 16, color: [255, 128, 0]} :
city.population > 500000 ? {size: 14, color: [255, 160, 0]} :
city.population > 200000 ? {size: 12, color: [255, 192, 0]} :
city.population > 100000 ? {size: 10, color: [255, 224, 0]} :
{size: 8, color: [255, 255, 0]},
size = Math.sqrt(city.population * 100),
latSize = size / Ox.EARTH_CIRCUMFERENCE * 360,
lngSize = size * Ox.getDegreesPerMeter(city.latitude);
return Ox.extend({
countryCode: city.country_code == 'XK' ? 'RS-KO' : city.country_code,
editable: true,
flag: city.country_code,
geoname: city.name,
markerColor: marker.color,
markerSize: marker.size,
name: city.name,
size: city.population * 100,
type: 'city',
lat: city.latitude,
lng: city.longitude,
south: city.latitude - latSize / 2,
west: city.longitude - lngSize / 2,
north: city.latitude + latSize / 2,
east: city.longitude + lngSize / 2
});
}),
width: window.innerWidth
})
.appendTo(Ox.UI.$body);
$(window).resize(function() {
Ox.print('RESIZE', window.innerHeight)
listmap.options({
height: window.innerHeight,
width: window.innerWidth
});
});
window.listmap = listmap;
});
});