0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add geo/map example

Browse source
This commit is contained in:
rolux 2012-10-19 13:36:35 +02:00
parent 28d60f9576
commit 971d94019b
3 changed files with 60 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
examples/lists/countries/js/example.js
View file

@ -571,4 +571,9 @@ Ox.load(['UI', 'Geo'], function() {
renderItem(); renderItem();
} }
}); });
/*
For an example that displays the countries on a map, see
<a href="#examples/world&#95;map&#95;with&#95;countries">here</a>.
*/

13
examples/maps/world_map_with_countries/index.html Normal file
View 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
View 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>.
*/