more map

demos/map/js/map.js

@@ -1,95 +1,110 @@
 $(function() {
 
-    var width = window.innerWidth - 256,
-        height = window.innerHeight,
-        map = new Ox.Map({
-                clickable: true,
-                height: height,
-                /*
-                places: Ox.COUNTRIES.map(function(country) {
-                    return country.name;
-                }),
-                */
-                places: [
-                    {
-                        flag: 'UK',
-                        geoname: 'Westminster, London, UK',
-                        name: 'London',
-                        //lat: 51.5001524,
-                        lat: 51.52670875,
-                        lng: -0.1262362,
-                        south: 51.3493528,
-                        west: -0.378358,
-                        north: 51.7040647,
-                        east: 0.1502295
-                    },
-                    {
-                        flag: 'FR',
-                        geoname: 'Paris, France',
-                        name: 'Paris',
-                        lat: 48.8566667,
-                        lng: 2.3509871,
-                        south: 48.8155414,
-                        west: 2.2241006,
-                        north: 48.9021461,
-                        east: 2.4699099,
-                    }
-                ],
-                statusbar: true,
-                toolbar: true,
-                width: width,
-                zoombar: true
-            })
-            .bindEvent({
-                selectplace: function(event, data) {
-                    Ox.print('DATA', data)
-                    panel.replaceElement(1, list = new Ox.TreeList({
-                        data: Ox.isEmpty(data) ? [] : {
-                            components: data.components,
-                            countryCode: data.countryCode,
-                            crossesDateline: data.crossesDateline(),
-                            east: data.east,
-                            fullGeoname: data.fullGeoname,
-                            geoname: data.geoname,
-                            lat: data.lat,
-                            lng: data.lng,
-                            name: data.name,
-                            north: data.north,
-                            size: data.size,
-                            sizeEastWest: data.sizeEastWest,
-                            sizeNorthSouth: data.sizeNorthSouth,
-                            south: data.south,
-                            west: data.west,
-                            types: data.types
+    $.getJSON('json/countries.json', function(data) {
+        
+        var width = window.innerWidth - 256,
+            height = window.innerHeight,
+            map = new Ox.Map({
+                    clickable: true,
+                    editable: true,
+                    height: height,
+                    places: data.map(function(place) {
+                        return Ox.extend({
+                            editable: true,
+                            geoname: place.name,
+                            name: place.name,
+                            south: place.south,
+                            west: place.west,
+                            north: place.north,
+                            east: place.east
+                        });
+                    }),
+                    /*
+                    [
+                        {
+                            editable: true,
+                            flag: 'UK',
+                            geoname: 'Westminster, London, UK',
+                            name: 'London',
+                            //lat: 51.5001524,
+                            lat: 51.52670875,
+                            lng: -0.1262362,
+                            south: 51.3493528,
+                            west: -0.378358,
+                            north: 51.7040647,
+                            east: 0.1502295
+                        },
+                        {
+                            editable: false,
+                            flag: 'FR',
+                            geoname: 'Paris, France',
+                            name: 'Paris',
+                            lat: 48.8566667,
+                            lng: 2.3509871,
+                            south: 48.8155414,
+                            west: 2.2241006,
+                            north: 48.9021461,
+                            east: 2.4699099,
                         }
-                    }));
-                }
-            }),
-        list = new Ox.TreeList({
-                data: [],
-                width: 256
-            })
-        panel = new Ox.SplitPanel({
-                elements: [
-                    {
-                        element: map
-                    },
-                    {
-                        element: list,
-                        size: 256
+                    ],
+                    */
+                    statusbar: true,
+                    toolbar: true,
+                    width: width,
+                    zoombar: true
+                })
+                .bindEvent({
+                    selectplace: function(event, data) {
+                        Ox.print('DATA', data)
+                        panel.replaceElement(1, list = new Ox.TreeList({
+                            data: Ox.isEmpty(data) ? [] : {
+                                components: data.components,
+                                countryCode: data.countryCode,
+                                crossesDateline: data.crossesDateline(),
+                                east: data.east,
+                                fullGeoname: data.fullGeoname,
+                                geoname: data.geoname,
+                                lat: data.lat,
+                                lng: data.lng,
+                                name: data.name,
+                                north: data.north,
+                                size: data.size,
+                                sizeEastWest: data.sizeEastWest,
+                                sizeNorthSouth: data.sizeNorthSouth,
+                                south: data.south,
+                                west: data.west,
+                                types: data.types
+                            }
+                        }));
                     }
-                ],
-                orientation: 'horizontal'
-            })
-            .appendTo($('body'));
-            
-    map.gainFocus();
+                }),
+            list = new Ox.TreeList({
+                    data: [],
+                    width: 256
+                })
+            panel = new Ox.SplitPanel({
+                    elements: [
+                        {
+                            element: map
+                        },
+                        {
+                            element: list,
+                            size: 256
+                        }
+                    ],
+                    orientation: 'horizontal'
+                })
+                .appendTo($('body'));
 
-    $(window).resize(function() {
-        map.options({
-            height: window.innerHeight,
-            width: window.innerWidth - 256
+        map.gainFocus();
+
+        $(window).resize(function() {
+            map.options({
+                height: window.innerHeight,
+                width: window.innerWidth - 256
+            });
         });
+
     });
 
 });