Worked on floodsimulation

.gitignore

+www/sdk/*
+www/sencha-touch-2.0.0-commercial/*
+

www/app.js

@@ -6,8 +6,8 @@ Ext.Loader.setPath({
 
 Ext.application({
     controllers: ["Main"],
-    models: ["SimulationModel"],
-    stores: ['SimulationStore'],
+    models: ["SimulationModel", 'SimulationDetails'],
+    stores: ['SimulationStore', 'ImagesStore'],
 
     name: 'app',
 

www/app/controller/Main.js

 Ext.define('app.controller.Main', {
     extend: 'Ext.app.Controller',
     
-    
     config: {
         refs: {
             map: '#mapa',
@@ -13,61 +12,29 @@ Ext.define('app.controller.Main', {
             },
 
             '#mapa': {
-                maprender: 'overlay'
+                maprender: 'setMap'
             }
         }
     },
 
-    overlay: function(extmap, map){
-        console.log("allo");
+    setMap: function(extmap, map){
         this.globalMap = map;
-        var pos = new google.maps.LatLng(52.3700,4.89000);
-        console.log(map);
-        new google.maps.Marker({
-            position: pos,
-            icon: 'Google_Maps_Marker.png',
-            map: map,
-            title: 'YOO'
-        });
+        this.getMapView().setGlobalMap(extmap, map);
+        var traffic = new google.maps.TrafficLayer();
+        traffic.setMap(map);
     },
 
     showOverlay: function(list, index, element, record) {
+        var store = Ext.getStore('ImagesStore');
+        store.setUrl(record.get('area_id'));
+        store.load();
 
         var bounds = record.get('visbounds');
         var center = record.get('center');
         var corners = record.get('corners');
 
-
-        var imageBounds = new google.maps.LatLngBounds(
-            new google.maps.LatLng(bounds[2],bounds[3]),
-            new google.maps.LatLng(bounds[0],bounds[1]));
-        
-        var cornerBounds = [
-            new google.maps.LatLng(corners[0][0],corners[0][1]),
-            new google.maps.LatLng(corners[1][0],corners[1][1]),
-            new google.maps.LatLng(corners[2][0],corners[2][1]),
-            new google.maps.LatLng(corners[3][0],corners[3][1])
-        ];
-
-        new google.maps.GroundOverlay('floodmap1.jpg', imageBounds, {map: this.globalMap});
-
-        var rectangle = new google.maps.Polygon({
-                        paths: cornerBounds,
-                        strokeColor: "#FF0000",
-                        strokeOpacity: 0.8,
-                        strokeWeight: 2,
-                        fillColor: "#FF0000",
-                        fillOpacity: 0.35
-                    });
-
-        rectangle.setMap(this.globalMap);
-        this.getMap().setMapCenter(
-            {latitude: center[0], longitude: center[1]}
-        );
-
-        this.getMap().setMapOptions({
-                zoom: 12,
-        });
-                
+        this.getMapView().setCenterMap(center);
+        this.getMapView().createOverlayImage(bounds);
+        this.getMapView().createOverlayPolygon(corners);
     },
 });
\ No newline at end of file

www/app/model/SimulationDetails.js

+Ext.define('app.model.SimulationDetails', {
+	extend: 'Ext.data.Model',
+	
+	config: {
+		fields: ['name', 'center', 'corners', 'size', 'extents', 'visbounds', 'vissize', 'projection', 'dikes'],
+	},
+});
\ No newline at end of file

www/app/store/ImagesStore.js

+Ext.define('app.store.ImagesStore', {
+	extend: 'Ext.data.Store',
+	requires: ['Ext.data.proxy.Rest'],
+	xtype: 'ImagesStore',
+
+	config : {
+		model: 'app.model.SimulationDetails',
+		fields: ['name', 'corners', 'visbounds', 'area_id', 'center'],
+		proxy : {
+			type: 'rest',
+			url: 'http://sangkil.science.uva.nl:8003/area/',
+			reader: {
+				type: 'json',
+			},
+		}
+	},
+	setUrl: function(area_id) {
+		var store = Ext.getStore('ImagesStore').getProxy();
+		store._url = 'http://sangkil.science.uva.nl:8003/area/' + area_id + '/info.json';
+	}
+});
\ No newline at end of file

www/app/store/SimulationStore.js

-var simstore = Ext.define('app.store.SimulationStore', {
+Ext.define('app.store.SimulationStore', {
 	extend: 'Ext.data.Store',
 	requires: ['Ext.data.proxy.Rest'],
 	id: 'simulationList',

www/app/view/List.js

@@ -30,6 +30,7 @@ Ext.define("app.view.List",
 			},
 			{
 				xtype: 'list',
+				ui: 'round',
 				itemTpl: '<div>{name}</div>',
 				store: 'SimulationStore',
 				flex: 1

www/app/view/Map.js

@@ -5,16 +5,70 @@ Ext.define('app.view.Map', {
 
 	config: {
 		mapOptions : {
-			zoom : 10,
+			zoom : 12,
 			mapTypeId : google.maps.MapTypeId.ROADMAP,
 			navigationControl: true,
 			navigationControlOptions: {
 				style: google.maps.NavigationControlStyle.DEFAULT
 			}
-		}
 		},
+	},
+
+	setGlobalMap: function(extmap, map){
+		this.globalMap = map;
+		this.globalExtMap = extmap;
+	},
+	
+	setCenterMap: function(center){
+		this.globalExtMap.setMapCenter({latitude: center[0], longitude: center[1]});
+	},
+
+	/* 
+	 * options  - list of options, see doc google api
+	 */
+	alterMapOptions: function(options){
+		this.globalExtMap.setMapOptions(options);
+	},
+
+	createMarker: function(position){
+        var pos = new google.maps.LatLng(52.3700,4.89000);
+        new google.maps.Marker({
+            position: pos,
+            icon: 'Google_Maps_Marker.png',
+            map: this.globalMap,
+            title: 'you'
+		});
+	},
+
+	/*create overlay*/
+	createOverlayImage: function(bounds) {
+		var image = 'floodmap1.jpg';
+		var imageBounds = new google.maps.LatLngBounds(
+			new google.maps.LatLng(bounds[2],bounds[3]),
+			new google.maps.LatLng(bounds[0],bounds[1]));
+		new google.maps.GroundOverlay(image, imageBounds, {map: this.globalMap});
+	},
+
+	createOverlayPolygon: function(corners){
+		var cornerBounds = [];
+		for (i in corners) {
+			console.log(corners[i][0], corners[i][1]);
+			cornerBounds.push(new google.maps.LatLng(corners[i][0], corners[i][1]));
+		}
+
+		new google.maps.LatLng(corners[1][0],corners[1][1]),
+				new google.maps.LatLng(corners[2][0],corners[2][1]),
+				new google.maps.LatLng(corners[3][0],corners[3][1])
+
+		var rectangle = new google.maps.Polygon({
+		    paths: cornerBounds,
+		    strokeColor: "#FF0000",
+		    strokeOpacity: 0.8,
+		    strokeWeight: 2,
+		    fillColor: "#FF0000",
+		    fillOpacity: 0.35
+		});
 
-	example: function() {
-		console.log("example function");
+		rectangle.setMap(this.globalMap);
 	}
 });
\ No newline at end of file

www/packager.temp.json

-{"applicationName":"My Application","applicationId":"com.mycompany.myAppID","versionString":"1.0","iconName":"resources/icons/Icon~ipad.png","inputPath":"/Users/Richard/Documents/UvA/floodsimulation/senchapp/www/build/package","outputPath":"/Users/Richard/Documents/UvA/floodsimulation/senchapp/www/build/native","configuration":"Debug","platform":"iOSSimulator","deviceType":"iPad","certificatePath":"/path/to/certificate.file","certificateAlias":"","sdkPath":"/path/to/android-sdk","androidAPILevel":"15","orientations":["portrait","landscapeLeft","landscapeRight","portraitUpsideDown"]}
\ No newline at end of file
+{"applicationName":"My Application","applicationId":"com.mycompany.myAppID","versionString":"1.0","iconName":"resources/icons/Icon~ipad.png","inputPath":"/Users/Richard/Documents/UvA/floodsimulation/FloodSimulation-Browser/www/build/package","outputPath":"/Users/Richard/Documents/UvA/floodsimulation/FloodSimulation-Browser/www/build/native","configuration":"Debug","platform":"iOSSimulator","deviceType":"iPad","certificatePath":"/path/to/certificate.file","certificateAlias":"","sdkPath":"/path/to/android-sdk","androidAPILevel":"15","orientations":["portrait","landscapeLeft","landscapeRight","portraitUpsideDown"]}
\ No newline at end of file