diff --git a/demos/map/index.html b/demos/map/index.html
new file mode 100644
index 00000000..fecc26ac
--- /dev/null
+++ b/demos/map/index.html
@@ -0,0 +1,14 @@
+
+
+
+ ox.js map demo
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/demos/map/js/map.js b/demos/map/js/map.js
new file mode 100644
index 00000000..7623cb25
--- /dev/null
+++ b/demos/map/js/map.js
@@ -0,0 +1,92 @@
+$(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) {
+ panel.replaceElement(1, list = new Ox.TreeList({
+ data: {
+ components: data.components,
+ countryCode: data.countryCode,
+ crossesDateline: data.crossesDateline,
+ east: data.east,
+ 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
+ }
+ }));
+ }
+ }),
+ list = new Ox.TreeList({
+ data: []
+ })
+ panel = new Ox.SplitPanel({
+ elements: [
+ {
+ element: map
+ },
+ {
+ element: list,
+ size: 256
+ }
+ ],
+ orientation: 'horizontal'
+ })
+ .appendTo($('body'));
+
+ map.gainFocus();
+
+ $(window).resize(function() {
+ map.options({
+ height: window.innerHeight,
+ width: window.innerWidth - 256
+ });
+ });
+
+});
\ No newline at end of file