worked on flood browser, dikes polygons are showing

www/app.js

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

www/app/controller/Main.js

@@ -20,21 +20,48 @@ Ext.define('app.controller.Main', {
     setMap: function(extmap, map){
         this.globalMap = map;
         this.getMapView().setGlobalMap(extmap, map);
-        var traffic = new google.maps.TrafficLayer();
-        traffic.setMap(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 area_id = record.get('area_id');
+        var store = Ext.getStore('SimulationDetailsStore');
+        var area_id = record.get('area_id');
+        var map = this.getMapView();
+        var dikes = null;
+        //store.setUrl(record.get('area_id'));
+        //console.log(store.getData().getCount());
+        //console.log(store.getData().getAt(0).get('dikes'));
+        //var dikes = store.getData().getAt(0).get('dikes');
         var bounds = record.get('visbounds');
         var center = record.get('center');
         var corners = record.get('corners');
 
+        var request = Ext.Ajax.request({
+            method: 'GET',
+            url: 'http://sangkil.science.uva.nl:8003/area/' + area_id + '/info.json',
+            
+            success: function(response, opts){
+                console.log(response);
+                var result = Ext.decode(response.responseText);
+                console.log(this);
+                if (result['dikes'].length  > 0)
+                    map.createOverlayPolygon(result['dikes']);
+            },
+        });
+        //var result = Ext.decode(request.responseText);
+        //  console.log(result);
+        //if (result['dikes'].length > 0)
+        //  this.getMapView().createOverlayPolygon(result['dikes']);
+        this.getMapView().createMarker();
+        //this.getMapView().createOverlayImage(bounds);
         this.getMapView().setCenterMap(center);
-        this.getMapView().createOverlayImage(bounds);
-        this.getMapView().createOverlayPolygon(corners);
     },
+
+    callMapPolygon: function(polygon)
+    {
+        this.getMapView().createOverlayPolygon(polygon);
+    }
+
 });
\ No newline at end of file

www/app/store/ImagesStore.js → www/app/store/SimulationDetailsStore.js

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

www/app/view/List.js

@@ -11,7 +11,7 @@ Ext.define("app.view.List",
 		'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
 	],
 
-	stores: ['SimulationStore'],
+	//stores: ['SimulationStore'],
 
 	config: {
 		layout: "vbox",

www/app/view/Map.js

@@ -30,8 +30,8 @@ Ext.define('app.view.Map', {
 		this.globalExtMap.setMapOptions(options);
 	},
 
-	createMarker: function(position){
-        var pos = new google.maps.LatLng(52.3700,4.89000);
+	createMarker: function(pos){
+        var pos = new google.maps.LatLng(52.3700, 4.89000);
         new google.maps.Marker({
             position: pos,
             icon: 'Google_Maps_Marker.png',
@@ -51,14 +51,14 @@ Ext.define('app.view.Map', {
 
 	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]));
-		}
+		console.log(corners);
+		console.log(corners[0].length);
+		for (var i = 0; i < corners[0].length - 1; i++) {
 
-		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])
+			console.log("i: " + i + corners[0][i][0] + "-" + corners[0][i][1]);
+			cornerBounds.push(new google.maps.LatLng(corners[0][i][0], corners[0][i][1]));
+		}
+		console.log(cornerBounds);
 
 		var rectangle = new google.maps.Polygon({
 		    paths: cornerBounds,