110 lines
No EOL
4 KiB
JavaScript
110 lines
No EOL
4 KiB
JavaScript
$(function() {
|
|
|
|
$.getJSON('json/countries.json', function(data) {
|
|
|
|
var width = window.innerWidth - 256,
|
|
height = window.innerHeight,
|
|
map = new Ox.Map({
|
|
clickable: true,
|
|
editable: true,
|
|
height: height,
|
|
places: data.map(function(place) {
|
|
return Ox.extend({
|
|
editable: true,
|
|
geoname: place.name,
|
|
name: place.name,
|
|
south: place.south,
|
|
west: place.west,
|
|
north: place.north,
|
|
east: place.east
|
|
});
|
|
}),
|
|
/*
|
|
[
|
|
{
|
|
editable: true,
|
|
flag: 'UK',
|
|
geoname: 'Westminster, London, UK',
|
|
name: 'London',
|
|
//lat: 51.5001524,
|
|
lat: 51.52670875,
|
|
lng: -0.1262362,
|
|
south: 51.3493528,
|
|
west: -0.378358,
|
|
north: 51.7040647,
|
|
east: 0.1502295
|
|
},
|
|
{
|
|
editable: false,
|
|
flag: 'FR',
|
|
geoname: 'Paris, France',
|
|
name: 'Paris',
|
|
lat: 48.8566667,
|
|
lng: 2.3509871,
|
|
south: 48.8155414,
|
|
west: 2.2241006,
|
|
north: 48.9021461,
|
|
east: 2.4699099,
|
|
}
|
|
],
|
|
*/
|
|
statusbar: true,
|
|
toolbar: true,
|
|
width: width,
|
|
zoombar: true
|
|
})
|
|
.bindEvent({
|
|
selectplace: function(event, data) {
|
|
Ox.print('DATA', data)
|
|
panel.replaceElement(1, list = new Ox.TreeList({
|
|
data: Ox.isEmpty(data) ? [] : {
|
|
components: data.components,
|
|
countryCode: data.countryCode,
|
|
crossesDateline: data.crossesDateline(),
|
|
east: data.east,
|
|
fullGeoname: data.fullGeoname,
|
|
geoname: data.geoname,
|
|
lat: data.lat,
|
|
lng: data.lng,
|
|
name: data.name,
|
|
north: data.north,
|
|
size: data.size,
|
|
sizeEastWest: data.sizeEastWest,
|
|
sizeNorthSouth: data.sizeNorthSouth,
|
|
south: data.south,
|
|
west: data.west,
|
|
types: data.types
|
|
}
|
|
}));
|
|
}
|
|
}),
|
|
list = new Ox.TreeList({
|
|
data: [],
|
|
width: 256
|
|
})
|
|
panel = new Ox.SplitPanel({
|
|
elements: [
|
|
{
|
|
element: map
|
|
},
|
|
{
|
|
element: list,
|
|
size: 256
|
|
}
|
|
],
|
|
orientation: 'horizontal'
|
|
})
|
|
.appendTo($('body'));
|
|
|
|
map.gainFocus();
|
|
|
|
$(window).resize(function() {
|
|
map.options({
|
|
height: window.innerHeight,
|
|
width: window.innerWidth - 256
|
|
});
|
|
});
|
|
|
|
});
|
|
|
|
}); |