92 lines
3 KiB
JavaScript
92 lines
3 KiB
JavaScript
|
$(function() {
|
||
|
|
|
||
|
|
var width = window.innerWidth - 256,
|
||
|
|
height = window.innerHeight,
|
||
|
|
map = new Ox.Map({
|
||
|
|
clickable: true,
|
||
|
|
height: height,
|
||
|
|
/*
|
||
|
|
places: Ox.COUNTRIES.map(function(country) {
|
||
|
|
return country.name;
|
||
|
|
}),
|
||
|
|
*/
|
||
|
|
places: [
|
||
|
|
{
|
||
|
|
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
|
||
|
|
},
|
||
|
|
{
|
||
|
|
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) {
|
||
|
|
panel.replaceElement(1, list = new Ox.TreeList({
|
||
|
|
data: {
|
||
|
|
components: data.components,
|
||
|
|
countryCode: data.countryCode,
|
||
|
|
crossesDateline: data.crossesDateline,
|
||
|
|
east: data.east,
|
||
|
|
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: []
|
||
|
|
})
|
||
|
|
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
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|