add async map demo

2011-05-29 11:56:41 +02:00 · 2011-05-29 11:56:41 +02:00 · 3936f701cd
commit 3936f701cd
parent a280574033
4 changed files with 89722 additions and 0 deletions
--- a/demos/map2/index.html
+++ b/demos/map2/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>OxJS Map Demo (async)</title
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+        <script type="text/javascript" src="../../build/Ox.js"></script>
+        <script type="text/javascript" src="js/map.js"></script>
+    </head>
+    <body>
+    </body>
+</html>
--- a/demos/map2/js/map.js
+++ b/demos/map2/js/map.js
@ -0,0 +1,117 @@
+Ox.load('UI', {debug: true, theme: 'modern'}, function() {
+
+Ox.load('Geo', function() {
+
+    Ox.getJSON('json/cities100000.json', function(cities) {
+
+        var places = cities.map(function(city, i) {
+            var countryCode = city.country_code == 'XK' ? 'RS-KO' : city.country_code,
+                marker = city.population > 20000000 ? {size: 24, color: [255, 0, 0]} :
+                    city.population > 10000000 ? {size: 22, color: [255, 32, 0]} :
+                    city.population > 5000000 ? {size: 20, color: [255, 64, 0]} :
+                    city.population > 2000000 ? {size: 18, color: [255, 96, 0]} :
+                    city.population > 1000000 ? {size: 16, color: [255, 128, 0]} :
+                    city.population > 500000 ? {size: 14, color: [255, 160, 0]} :
+                    city.population > 200000 ? {size: 12, color: [255, 192, 0]} :
+                    city.population > 100000 ? {size: 10, color: [255, 224, 0]} :
+                    {size: 8, color: [255, 255, 0]},
+                area = Math.sqrt(city.population * 100),
+                latSize = area / Ox.EARTH_CIRCUMFERENCE * 360,
+                lngSize = area * Ox.getDegreesPerMeter(city.latitude);
+            return {
+                alternativeNames: [],
+                area: city.population * 100,
+                countryCode: countryCode,
+                editable: true,
+                flag: countryCode,
+                geoname: city.name + ', ' + Ox.getCountryByCode(countryCode).name,
+                id: Ox.encodeBase32(i),
+                markerColor: marker.color,
+                markerSize: marker.size,
+                name: city.name,
+                type: 'city',
+                lat: city.latitude,
+                lng: city.longitude,
+                south: city.latitude - latSize / 2,
+                west: city.longitude - lngSize / 2,
+                north: city.latitude + latSize / 2,
+                east: city.longitude + lngSize / 2
+            };
+        });
+
+        var $map = new Ox.Map({
+                height: window.innerHeight,
+                places: function(options, callback) {
+                    // this simulates a remote API
+                    Ox.print('OPTIONS', options)
+                    var data = {};
+                    // query, sort, range, area
+                    if (Ox.isEmpty(options)) {
+                        data = {
+                            items: places.length,
+                            south: 90,
+                            west: 180,
+                            north: -90,
+                            east: -180
+                        };
+                        places.forEach(function(place) {
+                            ['south', 'west', 'north', 'east'].forEach(function(v) {
+                                if (
+                                    ((v == 'south' || v == 'west') && place[v] < data[v])
+                                    || ((v == 'north' || v == 'east') && place[v] > data[v])
+                                ) {
+                                    data[v] = place[v];
+                                }
+                            });
+                        });
+                    } else {
+                        data.items = places;
+                        if (options.query) {
+
+                        }
+                        if (options.area) {
+                            data.items = data.items.filter(function(place) {
+                                // fixme: fails if crosses dateline
+                                return place.lat > options.area.south
+                                    && place.lat < options.area.north
+                                    && place.lng > options.area.west
+                                    && place.lng < options.area.east;
+                            });
+                        }
+                        if (options.sort[0].key == 'area') {
+                            data.items.sort(function(a, b) {
+                                return b.area - a.area;
+                            });
+                        }
+                        if (options.range) {
+                            data.items = data.items.filter(function(place, i) {
+                                return i >= options.range[0] && i < options.range[1];
+                            });
+                        }
+                    }
+                    Ox.print('DATA', data)
+                    callback({
+                        data: data,
+                        result: {code: 200, text: 'OK'}
+                    });
+                },
+                statusbar: true,
+                toolbar: true,
+                width: window.innerWidth
+            })
+            .appendTo(Ox.UI.$body);
+
+        $(window).resize(function() {
+            Ox.print('RESIZE', window.innerHeight)
+            $map.options({
+                height: window.innerHeight,
+                width: window.innerWidth
+            });
+        });
+
+        window.$map = $map;
+
+    });
+    
+});
+});
--- a/demos/map2/json/cities100000.json
+++ b/demos/map2/json/cities100000.json
--- a/demos/map2/json/cities1000000.json
+++ b/demos/map2/json/cities1000000.json