Skip to content
Snippets Groups Projects
Commit 03f5085d authored by Richard's avatar Richard
Browse files

image overflays are now possible, its still buged right now

parent be7c95c3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
www/app.js
+ 3
− 3
View file @ 03f5085d
......@@ -7,15 +7,15 @@ Ext.Loader.setPath({
Ext.application({
controllers: ["Main"],
models: ["SimulationModel", "SimulationDetails"],
stores: ['SimulationStore', 'SimulationDetailsStore'],
stores: ['SimulationStore', 'SimulationDetailsStore', 'SimulationsSummary'],
name: 'app',
requires: [
'Ext.MessageBox'
'Ext.MessageBox', 'app.CustomProxy'
],
views: ['Main', "Home", "Simulation", "List", 'Map'],
views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay'],
icon: {
57: 'resources/icons/Icon.png',
......
www/app/controller/Main.js
+ 111
− 32
View file @ 03f5085d
......@@ -4,64 +4,143 @@ Ext.define('app.controller.Main', {
config: {
refs: {
map: '#mapa',
sidepanel: 'listpanel',
api: 'api',
mapView: 'SimulationMap',
overlay: '#overlay',
simulation: 'simulationpanel'
},
control: {
'listpanel list': {
'listpanel #cities': {
itemtap: 'showOverlay',
tap: 'closeoverlay'
},
'sliderfield': {
change: 'callNextImage'
},
'listpanel #summary': {
itemtap: 'simulation',
},
'#mapa': {
maprender: 'setMap'
},
'#closebutton': {
tap: 'closeoverlay'
}
}
},
callRemoveImages: function(){
},
callNextImage: function(){
this.getMapView().nextImage();
},
closeoverlay: function() {
console.log(this.getOverlay());
this.getOverlay().hide();
},
setMap: function(extmap, map){
this.globalMap = map;
this.getMapView().setGlobalMap(extmap, map);
// var traffic = new google.maps.TrafficLayer();
// traffic.setMap(map);
},
this.selectedIndex = [];
},
showOverlay: function(list, index, element, record) {
//var area_id = record.get('area_id');
simulation: function(list, index, element, record) {
var store = Ext.getStore('SimulationDetailsStore');
var area_id = record.get('area_id');
var test_id = record.get('test_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 bounds;
store.each(function(r){
bounds = r.get('visbounds');
});
var request = Ext.Ajax.request({
method: 'GET',
url: 'http://sangkil.science.uva.nl:8003/area/' + area_id + '/info.json',
url: 'http://sangkil.science.uva.nl:8003/drfsm/'+ test_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']);
if (result['timesteps'].length > 0)
map.createOverlayImage(bounds, test_id, result['timesteps']);
},
});
console.log(this.getOverlay());
this.getOverlay().showBy(element);
},
showOverlay: function(list, index, element, record) {
this.getMapView().removeImages();
var center = record.get('center');
var selected = false;
var area_id = record.get('area_id');
for (i in this.selectedIndex)
if (this.selectedIndex[i] == index)
selected = true;
var store = Ext.getStore('SimulationsSummary');
store.clearFilter();
store.filter("area_id", area_id);
this.getSidepanel().push({
showAnimation: {
type: 'slide',
direction: 'left',
duration: 200
},
id: 'summary',
xtype: 'list',
store: 'SimulationsSummary',
itemTpl: '<div>simulation {submitted} - {test_id}</div>',
});
//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);
if (selected == false)
{
this.selectedIndex.push(index);
var dikes = null;
var bounds = record.get('visbounds');
var corners = record.get('corners');
var store = Ext.getStore('SimulationDetailsStore');
store.setUrl(area_id);
store.load();
store.each(function(r) {
dikes = r.get('dikes');
});
if (dikes.length != 0)
this.getMapView().createOverlayPolygon(dikes);
this.getMapView().createMarker(center);
this.getMapView().createOverlayImage(bounds);
}
this.getMapView().setCenterMap(center);
},
});
callMapPolygon: function(polygon)
{
this.getMapView().createOverlayPolygon(polygon);
}
// this.getApi.getAreaInfo(area_id, map.createOverlayPolygon);
// 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']);
// },
// });
});
\ No newline at end of file
www/app/store/SimulationDetailsStore.js
+ 6
− 9
View file @ 03f5085d
Ext.define('app.store.SimulationDetailsStore', {
extend: 'Ext.data.Store',
requires: ['Ext.data.proxy.Rest'],
requires: ['app.CustomProxy'],
xtype: 'SimulationDetailsStore',
config: {
autoLoad: true,
model: 'app.model.SimulationDetails',
fields: ['name', 'center', 'corners', 'size', 'extents', 'visbounds', 'vissize', 'projection', 'dikes'],
proxy: {
type: 'rest',
url: 'http://sangkil.science.uva.nl:8003/area/',
url: 'http://sangkil.science.uva.nl:8003/area/1/info.json',
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('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
+ 9
− 17
View file @ 03f5085d
......@@ -4,37 +4,29 @@
*/
Ext.define("app.view.List",
{
extend: "Ext.Container",
extend: "Ext.navigation.View",
xtype: 'listpanel',
requires: [
'Ext.data.Store', 'Ext.dataview.List', 'Ext.Map'
],
//stores: ['SimulationStore'],
config: {
layout: "vbox",
layout: "card",
animation: {
type: 'slide',
direction: 'left',
duration: 1000
},
items: [
{
dock: 'top',
xtype: "toolbar",
items: [
{
text: "Button",
ui: "Square",
margin: 10
}
]
},
{
id: 'cities',
xtype: 'list',
ui: 'round',
itemTpl: '<div>{name}</div>',
store: 'SimulationStore',
flex: 1
}
},
],
},
});
\ No newline at end of file
www/app/view/Map.js
+ 58
− 11
View file @ 03f5085d
......@@ -12,6 +12,16 @@ Ext.define('app.view.Map', {
style: google.maps.NavigationControlStyle.DEFAULT
}
},
listeners: {
maprender: function()
{
this.overlayImages = [];
this.Images = [];
this.imageIndex = null;
this.imageBounds = null;
}
}
},
setGlobalMap: function(extmap, map){
......@@ -30,8 +40,16 @@ Ext.define('app.view.Map', {
this.globalExtMap.setMapOptions(options);
},
/*
* createMarker:
* sets marker at pos
* @params:
* pos = [latitude, longitude]
*
*/
createMarker: function(pos){
var pos = new google.maps.LatLng(52.3700, 4.89000);
console.log("setmarker");
var pos = new google.maps.LatLng(pos[0], pos[1]);
new google.maps.Marker({
position: pos,
icon: 'Google_Maps_Marker.png',
......@@ -41,21 +59,50 @@ Ext.define('app.view.Map', {
},
/*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});
// 'http://sangkil.science.uva.nl:8003/drfsm/199419691/visualization/level/map/600.png'
// 'http://sangkil.science.uva.nl:8003/drfsm/207/visualization/level/map/300.png' ;
createOverlayImage: function(bounds, area_id, timesteps) {
this.imageIndex = 0;
this.imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(bounds[2],bounds[3]),
new google.maps.LatLng(bounds[0],bounds[1]));
this.bounds = bounds;
// delete all other images
if (this.overlayImages.length > 0)
for (i in this.overlayImages)
this.overlayImages[i].setMap(null);
//var image = 'http://sangkil.science.uva.nl:8003/lsm/' + area_id +'/visualization/level/map/400.png';
for (i in timesteps)
{
//if (i > 0 && this.overlayImages.length > 0)
// this.overlayImages[i - 1].setMap(null);
var image = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/' + timesteps[i] + '.png';
//var overlay = new google.maps.GroundOverlay(image, imageBounds, {map: this.globalMap});
this.Images.push(image);
}
var overlay = new google.maps.GroundOverlay(this.Images[0], this.imageBounds, {map: this.globalMap});
this.overlayImages.push(overlay);
},
nextImage: function()
{
this.imageIndex += 1;
this.overlayImages[this.imageIndex - 1].setMap(null);
var overlay = new google.maps.GroundOverlay(this.Images[this.imageIndex], this.imageBounds, {map: this.globalMap});
this.overlayImages.push(overlay);
},
removeImages: function()
{
for (i in this.overlayImages)
this.overlayImages[i].setMap(null);
},
createOverlayPolygon: function(corners){
var cornerBounds = [];
console.log(corners);
console.log(corners[0].length);
for (var i = 0; i < corners[0].length - 1; i++) {
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);
......
www/app/view/Simulation.js
+ 34
− 15
View file @ 03f5085d
Ext.define('app.view.Simulation', {
extend: 'Ext.Container',
extend: 'Ext.navigation.View',
xtype: 'simulationpanel',
config: {
title: "Map",
layout: "vbox",
layout: "card",
items: [
{
dock: "top",
xtype: 'toolbar',
items : [
{
text: "button",
ui: "square"
}
],
},
{
xtype: 'SimulationMap',
flex: 2,
}
],
},
{
xtype: 'panel',
id: 'overlay',
floating: true,
hidden: true,
width: 300,
height: 80,
scroll: false,
items: [{
xtype: 'button',
id: 'closebutton',
iconCls: 'delete',
iconMask: true,
width: 45,
bottom: -30,
right: -20,
},
{
xtype: 'segmentedbutton',
items: [
{
text: 'back'
},
{
text: 'forward'
}
]
}],
}],
},
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment