From 971d94019b49ae4eab0ed1e6a76ae3f75cefcc93 Mon Sep 17 00:00:00 2001 From: rolux Date: Fri, 19 Oct 2012 13:36:35 +0200 Subject: [PATCH] add geo/map example --- examples/lists/countries/js/example.js | 7 +++- .../maps/world_map_with_countries/index.html | 13 ++++++ .../world_map_with_countries/js/example.js | 41 +++++++++++++++++++ 3 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 examples/maps/world_map_with_countries/index.html create mode 100644 examples/maps/world_map_with_countries/js/example.js diff --git a/examples/lists/countries/js/example.js b/examples/lists/countries/js/example.js index 141f0b0c..2e386fb1 100644 --- a/examples/lists/countries/js/example.js +++ b/examples/lists/countries/js/example.js @@ -571,4 +571,9 @@ Ox.load(['UI', 'Geo'], function() { renderItem(); } -}); \ No newline at end of file +}); + +/* +For an example that displays the countries on a map, see +here. +*/ \ No newline at end of file diff --git a/examples/maps/world_map_with_countries/index.html b/examples/maps/world_map_with_countries/index.html new file mode 100644 index 00000000..4a2f3571 --- /dev/null +++ b/examples/maps/world_map_with_countries/index.html @@ -0,0 +1,13 @@ + + + + World Map with Countries + + + + + + + + + \ No newline at end of file diff --git a/examples/maps/world_map_with_countries/js/example.js b/examples/maps/world_map_with_countries/js/example.js new file mode 100644 index 00000000..e93b3295 --- /dev/null +++ b/examples/maps/world_map_with_countries/js/example.js @@ -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 +here. +*/ \ No newline at end of file