add geo/map example
This commit is contained in:
parent
28d60f9576
commit
971d94019b
3 changed files with 60 additions and 1 deletions
|
@ -571,4 +571,9 @@ Ox.load(['UI', 'Geo'], function() {
|
|||
renderItem();
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
/*
|
||||
For an example that displays the countries on a map, see
|
||||
<a href="#examples/world_map_with_countries">here</a>.
|
||||
*/
|
13
examples/maps/world_map_with_countries/index.html
Normal file
13
examples/maps/world_map_with_countries/index.html
Normal file
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>World Map with Countries</title>
|
||||
<meta http-equiv="Keywords" content="Lists"/>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<script type="text/javascript" src="../../../build/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { e.origin == window.location.origin && eval(e.data); });</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
41
examples/maps/world_map_with_countries/js/example.js
Normal file
41
examples/maps/world_map_with_countries/js/example.js
Normal file
|
@ -0,0 +1,41 @@
|
|||
/*
|
||||
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() {
|
||||
|
||||
var $map = Ox.Map({
|
||||
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>.
|
||||
*/
|
Loading…
Reference in a new issue