68 lines
No EOL
2.9 KiB
JavaScript
68 lines
No EOL
2.9 KiB
JavaScript
Ox.load('UI', {
|
|
debug: true,
|
|
theme: 'modern'
|
|
}, function() {
|
|
|
|
Ox.load('Geo', function() {
|
|
|
|
Ox.getJSON('json/cities100000.json', function(cities) {
|
|
|
|
var listmap = new Ox.ListMap({
|
|
height: window.innerHeight,
|
|
places: Ox.map(cities, function(city, id) {
|
|
var countryCode = city.country_code == 'XK' ? 'RS-KO' : city.country_code,
|
|
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]},
|
|
area = Math.sqrt(city.population * 100),
|
|
latSize = area / Ox.EARTH_CIRCUMFERENCE * 360,
|
|
lngSize = area * Ox.getDegreesPerMeter(city.latitude);
|
|
return city.population > 400000/*400000*/ ? {
|
|
area: city.population * 100,
|
|
countryCode: countryCode,
|
|
editable: true,
|
|
flag: countryCode,
|
|
geoname: city.name + ', ' + Ox.getCountryByCode(countryCode).name,
|
|
id: Ox.encodeBase32(id),
|
|
markerColor: marker.color,
|
|
markerSize: marker.size,
|
|
name: city.name,
|
|
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
|
|
} : null;
|
|
}),
|
|
width: window.innerWidth
|
|
})
|
|
.bindEvent({
|
|
geocode: function(event, data) {
|
|
Ox.print(event)
|
|
Ox.print(JSON.stringify(data))
|
|
}
|
|
})
|
|
.appendTo(Ox.UI.$body);
|
|
|
|
$(window).resize(function() {
|
|
Ox.print('RESIZE', window.innerHeight)
|
|
listmap.options({
|
|
height: window.innerHeight,
|
|
width: window.innerWidth
|
|
});
|
|
});
|
|
|
|
window.listmap = listmap;
|
|
|
|
});
|
|
|
|
});
|
|
}); |