2012-10-19 11:36:35 +00:00
|
|
|
/*
|
|
|
|
|
In this example, we use Ox.Map to display the countries provided by Ox.COUNTRIES
|
|
|
|
|
on a world map.
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
|
|
Ox.load(['UI', 'Geo'], function() {
|
|
|
|
|
|
2023-07-15 15:13:03 +00:00
|
|
|
var $map = Ox.LeafletMap({
|
2012-10-19 11:36:35 +00:00
|
|
|
keys: ['region'],
|
|
|
|
|
markerColor: function(place) {
|
|
|
|
|
return Ox.getGeoColor(place.region);
|
|
|
|
|
},
|
|
|
|
|
markerSize: function(place) {
|
|
|
|
|
return place.area >= 1e13 ? 24
|
|
|
|
|
: place.area >= 1e12 ? 22
|
|
|
|
|
: place.area >= 1e11 ? 20
|
|
|
|
|
: place.area >= 1e10 ? 18
|
|
|
|
|
: place.area >= 1e9 ? 16
|
|
|
|
|
: place.area >= 1e8 ? 14
|
|
|
|
|
: place.area >= 1e7 ? 12
|
|
|
|
|
: place.area >= 1e6 ? 10
|
|
|
|
|
: 8;
|
|
|
|
|
},
|
|
|
|
|
maxMarkers: Ox.COUNTRIES.length,
|
|
|
|
|
places: Ox.COUNTRIES.map(function(country) {
|
|
|
|
|
return Ox.extend(country, {geoname: country.name});
|
|
|
|
|
}),
|
|
|
|
|
showZoombar: true
|
|
|
|
|
})
|
|
|
|
|
.appendTo(Ox.$body);
|
|
|
|
|
|
|
|
|
|
Ox.$window.bind({resize: $map.resizeMap});
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
For an example that shows more properties of Ox.COUNTRIES, see
|
|
|
|
|
<a href="#examples/countries">here</a>.
|
|
|
|
|
*/
|
