diff --git a/webapp/app/util/Layer.js b/webapp/app/util/Layer.js index 5dfa352..4ef6bc0 100644 --- a/webapp/app/util/Layer.js +++ b/webapp/app/util/Layer.js @@ -21,5 +21,5 @@ Ext.define("MalawiAtlas.util.Layer", { }); return flatLayers; - }, + } }); diff --git a/webapp/app/util/Map.js b/webapp/app/util/Map.js index 5412050..e551697 100644 --- a/webapp/app/util/Map.js +++ b/webapp/app/util/Map.js @@ -4,18 +4,18 @@ var olMap = new ol.Map({ controls: ol.control.defaults({ attributionOptions: { collapsible: false, - collapsed: false, - }, + collapsed: false + } }), view: new ol.View({ center: ol.proj.fromLonLat([34.3, -13.2]), - zoom: 7, - }), + zoom: 7 + }) }); olMap.addControl( new ol.control.ScaleLine({ - minWidth: 120, + minWidth: 120 }) ); @@ -23,15 +23,15 @@ olMap.addControl( new ol.control.OverviewMap({ layers: [ new ol.layer.Tile({ - source: new ol.source.OSM(), - }), - ], + source: new ol.source.OSM() + }) + ] }) ); var measurePopup = Ext.create("GeoExt.component.Popup", { map: olMap, - width: 140, + width: 140 }); var measureVectorSource = new ol.source.Vector(); @@ -41,20 +41,20 @@ var measureLayer = new ol.layer.Vector({ source: measureVectorSource, style: new ol.style.Style({ fill: new ol.style.Fill({ - color: "rgba(255, 20, 20, 0.2)", + color: "rgba(255, 20, 20, 0.2)" }), stroke: new ol.style.Stroke({ color: "#ff0033", width: 2, - lineDash: [10, 10], + lineDash: [10, 10] }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ - color: "#ff0033", - }), - }), - }), + color: "#ff0033" + }) + }) + }) }); olMap.addLayer(measureLayer); @@ -74,7 +74,7 @@ Ext.define("MalawiAtlas.util.Map", { var view = me.map.getView(); view.fit(extent, { duration: 2000, - nearest: true, + nearest: true }); }, @@ -84,5 +84,5 @@ Ext.define("MalawiAtlas.util.Map", { getOlMap: function () { var me = this; return me.map; - }, + } }); diff --git a/webapp/app/view/layer/LayerTree.js b/webapp/app/view/layer/LayerTree.js index df15fc6..e507e46 100644 --- a/webapp/app/view/layer/LayerTree.js +++ b/webapp/app/view/layer/LayerTree.js @@ -19,6 +19,9 @@ Ext.define("MalawiAtlas.view.layer.LayerTree", { } }, + // empty store will be filled later + store: {}, + columns: [ { xtype: "treecolumn", @@ -57,33 +60,5 @@ Ext.define("MalawiAtlas.view.layer.LayerTree", { isDisabled: "isGroup", handler: "showOpacitySlider" } - ], - - initComponent: function () { - var me = this; - - // TODO: start loading layer tree once the config JSON has been loaded - - var olMap = MalawiAtlas.util.Map.getOlMap(); - - // TODO: use top level GeoExt function like in legend - var layerArray = []; - olMap.getLayers().forEach(function (layer) { - if (layer.get("basemap") != true && layer.get("measurementLayer") != true) - layerArray.push(layer); - }); - - var treeStore = Ext.create("GeoExt.data.store.LayersTree", { - layerGroup: new ol.layer.Group({ - layers: layerArray - }) - }); - - me.store = treeStore; - - // uncomment, if layer tree shall be expanded - // me.expandAll(); - - me.callParent(); - } + ] }); diff --git a/webapp/app/view/main/Main.js b/webapp/app/view/main/Main.js index 1c522ef..8e931ef 100644 --- a/webapp/app/view/main/Main.js +++ b/webapp/app/view/main/Main.js @@ -9,7 +9,7 @@ Ext.define("MalawiAtlas.view.main.Main", { "MalawiAtlas.view.map.BasemapButton", "MalawiAtlas.view.map.ZoomToExtent", "MalawiAtlas.store.Districts", - "MalawiAtlas.store.TraditionalAuthorities", + "MalawiAtlas.store.TraditionalAuthorities" ], controller: "main", @@ -19,13 +19,12 @@ Ext.define("MalawiAtlas.view.main.Main", { initComponent: function () { var me = this; + // read properties from config file Ext.Ajax.request({ url: "resources/config_simple.json", success: function (response) { var layerJson = Ext.decode(response.responseText); - console.log("Success"); - // var parentGroups = layerJSON.MalawiAtlasLayers.parentGroups; var parentGroups = layerJson.MalawiAtlasLayers.parentGroups; function createWMSLayerFromJSON(layerJSON) { @@ -48,11 +47,11 @@ Ext.define("MalawiAtlas.view.main.Main", { source: new ol.source.ImageWMS({ url: "https://www.gis-malawi.com/geoserver/malawi_atlas/wms", params: { - LAYERS: layerJSON.name, + LAYERS: layerJSON.name }, serverType: "geoserver", - crossOrigin: "", - }), + crossOrigin: "" + }) }); } else { resultLayer = new ol.layer.Tile({ @@ -60,11 +59,11 @@ Ext.define("MalawiAtlas.view.main.Main", { url: "https://www.gis-malawi.com/geoserver/malawi_atlas/wms", params: { LAYERS: layerJSON.name, - TILED: true, + TILED: true }, serverType: "geoserver", - crossOrigin: "", - }), + crossOrigin: "" + }) }); } @@ -121,14 +120,14 @@ Ext.define("MalawiAtlas.view.main.Main", { var groupLayer = new ol.layer.Group({ name: group.groupName, - layers: wmsLayers, + layers: wmsLayers }); groupLayers.push(groupLayer); }); // end - group var parentGroupLayer = new ol.layer.Group({ name: parentGroup.parentGroupName, - layers: groupLayers, + layers: groupLayers }); parentGroupLayers.push(parentGroupLayer); }); // end - parent group @@ -143,15 +142,15 @@ Ext.define("MalawiAtlas.view.main.Main", { url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", attributions: - "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community", - }), + "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community" + }) }), new ol.layer.Tile({ lid: "basemapStreet", visible: true, basemap: true, - source: new ol.source.OSM(), - }), + source: new ol.source.OSM() + }) ]; layers = baseLayers.concat(parentGroupLayers); @@ -161,7 +160,28 @@ Ext.define("MalawiAtlas.view.main.Main", { me.olMap.addLayer(layer); } }); - }, + + // set Layer Tree + + layerTree = Ext.ComponentQuery.query("ma-layertree")[0]; + + var layerArray = []; + me.olMap.getLayers().forEach(function (layer) { + if ( + layer.get("basemap") != true && + layer.get("measurementLayer") != true + ) + layerArray.push(layer); + }); + + var store = Ext.create("GeoExt.data.store.LayersTree", { + layerGroup: new ol.layer.Group({ + layers: layerArray + }) + }); + + layerTree.setStore(store); + } }); me.callParent(); @@ -175,7 +195,7 @@ Ext.define("MalawiAtlas.view.main.Main", { frame: false, tbar: { defaults: { - scale: "medium", + scale: "medium" }, items: [ { @@ -188,13 +208,13 @@ Ext.define("MalawiAtlas.view.main.Main", { el: { click: function () { location.reload(); - }, - }, - }, + } + } + } }, "->", { - xtype: "ma-thematic-group-combobox", + xtype: "ma-thematic-group-combobox" }, { xtype: "button", @@ -209,19 +229,19 @@ Ext.define("MalawiAtlas.view.main.Main", { text: "Area", measureType: "Polygon", listeners: { - click: "onMeasureClick", - }, + click: "onMeasureClick" + } }, { iconCls: "x-fa fa-arrows-h", text: "Distance", measureType: "LineString", listeners: { - click: "onMeasureClick", - }, - }, - ], - }), + click: "onMeasureClick" + } + } + ] + }) }, { xtype: "button", @@ -230,10 +250,10 @@ Ext.define("MalawiAtlas.view.main.Main", { menu: new Ext.menu.Menu({ items: [ { - xtype: "ma-print-form", - }, - ], - }), + xtype: "ma-print-form" + } + ] + }) }, { xtype: "button", @@ -252,10 +272,10 @@ Ext.define("MalawiAtlas.view.main.Main", { 3650738, -1945482, 4053741, - -1032934, + -1032934 ]); - }, - }, + } + } }, "-", { @@ -267,15 +287,15 @@ Ext.define("MalawiAtlas.view.main.Main", { publishes: "value", valueField: "districtName", store: { - type: "districts", + type: "districts" }, minChars: 0, queryMode: "remote", typeAhead: true, listeners: { - select: "comboZoomToExtent", + select: "comboZoomToExtent" }, - indent: false, + indent: false }, { xtype: "combobox", @@ -287,26 +307,26 @@ Ext.define("MalawiAtlas.view.main.Main", { bind: { filters: { property: "districtName", - value: "{districts.value}", - }, + value: "{districts.value}" + } }, store: { - type: "traditionalauthorities", + type: "traditionalauthorities" }, minChars: 0, queryMode: "remote", typeAhead: true, listeners: { - select: "comboZoomToExtent", + select: "comboZoomToExtent" }, - indent: false, - }, - ], - }), + indent: false + } + ] + }) }, "->", { - xtype: "ma-thematic-group-combobox", + xtype: "ma-thematic-group-combobox" }, { xtype: "button", @@ -321,19 +341,19 @@ Ext.define("MalawiAtlas.view.main.Main", { text: "Area", measureType: "Polygon", listeners: { - click: "onMeasureClick", - }, + click: "onMeasureClick" + } }, { iconCls: "x-fa fa-arrows-h", text: "Distance", measureType: "LineString", listeners: { - click: "onMeasureClick", - }, - }, - ], - }), + click: "onMeasureClick" + } + } + ] + }) }, { xtype: "button", @@ -342,10 +362,10 @@ Ext.define("MalawiAtlas.view.main.Main", { menu: new Ext.menu.Menu({ items: [ { - xtype: "ma-print-form", - }, - ], - }), + xtype: "ma-print-form" + } + ] + }) }, { xtype: "button", @@ -364,10 +384,10 @@ Ext.define("MalawiAtlas.view.main.Main", { 3650738, -1945482, 4053741, - -1032934, + -1032934 ]); - }, - }, + } + } }, "-", { @@ -379,15 +399,15 @@ Ext.define("MalawiAtlas.view.main.Main", { publishes: "value", valueField: "districtName", store: { - type: "districts", + type: "districts" }, minChars: 0, queryMode: "remote", typeAhead: true, listeners: { - select: "comboZoomToExtent", + select: "comboZoomToExtent" }, - indent: false, + indent: false }, { xtype: "combobox", @@ -399,22 +419,22 @@ Ext.define("MalawiAtlas.view.main.Main", { bind: { filters: { property: "districtName", - value: "{districts.value}", - }, + value: "{districts.value}" + } }, store: { - type: "traditionalauthorities", + type: "traditionalauthorities" }, minChars: 0, queryMode: "remote", typeAhead: true, listeners: { - select: "comboZoomToExtent", + select: "comboZoomToExtent" }, - indent: false, - }, - ], - }), + indent: false + } + ] + }) }, { text: "Reports", @@ -430,8 +450,8 @@ Ext.define("MalawiAtlas.view.main.Main", { "resources/pdf/Report_RA_Salima_20140327.pdf", "_blank" ); - }, - }, + } + } }, { text: "Vulnerability Assessment to floods - Salima", @@ -442,8 +462,8 @@ Ext.define("MalawiAtlas.view.main.Main", { "resources/pdf/Report_VA_Salima_20140327.pdf", "_blank" ); - }, - }, + } + } }, { text: "Guidelines UAV", @@ -454,8 +474,8 @@ Ext.define("MalawiAtlas.view.main.Main", { "resources/pdf/D_3_1_Guidelines_UAV.pdf", "_blank" ); - }, - }, + } + } }, { text: "Systematization UAV", @@ -466,8 +486,8 @@ Ext.define("MalawiAtlas.view.main.Main", { "resources/pdf/D_3_3_Systematization_UAV.pdf", "_blank" ); - }, - }, + } + } }, { text: "ECHO STRIM Baseline Consolidated Report", @@ -478,8 +498,8 @@ Ext.define("MalawiAtlas.view.main.Main", { "resources/pdf/ECHO STRIM Baseline Consolidated Report 101219.pdf", "_blank" ); - }, - }, + } + } }, { text: "ECHO STRIM EVCA Consolidated Report", @@ -490,8 +510,8 @@ Ext.define("MalawiAtlas.view.main.Main", { "resources/pdf/ECHO STRIM EVCA Consolidated Report 101219.pdf", "_blank" ); - }, - }, + } + } }, { text: "Karonga ECHO STRIM eVCA Report", @@ -502,8 +522,8 @@ Ext.define("MalawiAtlas.view.main.Main", { "resources/pdf/Karonga ECHO STRIM eVCA Report.pdf", "_blank" ); - }, - }, + } + } }, { text: "Lilongwe ECHO STRIM eVCA Report", @@ -514,8 +534,8 @@ Ext.define("MalawiAtlas.view.main.Main", { "resources/pdf/Lilongwe ECHO STRIM eVCA Report.pdf", "_blank" ); - }, - }, + } + } }, { text: "Mzuzu ECHO STRIM eVCA Report", @@ -526,11 +546,11 @@ Ext.define("MalawiAtlas.view.main.Main", { "resources/pdf/Mzuzu ECHO STRIM eVCA Report.pdf", "_blank" ); - }, - }, - }, - ], - }, + } + } + } + ] + } }, { xtype: "button", @@ -543,8 +563,8 @@ Ext.define("MalawiAtlas.view.main.Main", { listeners: { click: function () { window.open("https://www.gis-malawi.com/docs/", "_blank"); - }, - }, + } + } }, { text: "Source Code", @@ -555,44 +575,44 @@ Ext.define("MalawiAtlas.view.main.Main", { "https://github.com/zgis/malawi_atlas_public", "_blank" ); - }, - }, - }, - ], - }), + } + } + } + ] + }) }, { xtype: "image", src: "resources/images/logo_eu.png", width: (1.4 * 3345) / 81.65, - height: (1.4 * 3266) / 81.65, + height: (1.4 * 3266) / 81.65 }, { xtype: "image", src: "resources/images/logo_malawi_government.png", width: 40, - height: 40, + height: 40 }, { xtype: "image", src: "resources/images/logo_coopi.jpeg", width: 1320 / 13.55, - height: 542 / 13.55, + height: 542 / 13.55 }, { xtype: "image", src: "resources/images/logo_concern_worldwide.gif", width: (0.8 * 434) / 3.675, - height: (0.8 * 147) / 3.675, + height: (0.8 * 147) / 3.675 }, { xtype: "image", src: "resources/images/logo_zgis.jpg", width: (0.7 * 132) / 1.275, - height: (0.7 * 51) / 1.275, - }, - ], - }, + height: (0.7 * 51) / 1.275 + } + ] + } }, // map @@ -605,12 +625,12 @@ Ext.define("MalawiAtlas.view.main.Main", { items: [ { xtype: "ma-mappanel", - anchor: "100% 100%", + anchor: "100% 100%" }, { - xtype: "ma-basemap-button", - }, - ], + xtype: "ma-basemap-button" + } + ] }, // left side-bar @@ -621,7 +641,7 @@ Ext.define("MalawiAtlas.view.main.Main", { layout: { type: "vbox", pack: "start", - align: "stretch", + align: "stretch" }, scrollable: "y", collapsed: "y", @@ -630,12 +650,12 @@ Ext.define("MalawiAtlas.view.main.Main", { { title: "Layers", xtype: "ma-layertree", - bodyBorder: false, + bodyBorder: false }, { - xtype: "ma-feature-info-panel", - }, - ], + xtype: "ma-feature-info-panel" + } + ] }, // legend @@ -646,9 +666,9 @@ Ext.define("MalawiAtlas.view.main.Main", { scrollable: "y", items: [ { - xtype: "ma-legend", - }, - ], - }, - ], + xtype: "ma-legend" + } + ] + } + ] }); diff --git a/webapp/app/view/map/Map.js b/webapp/app/view/map/Map.js index 0078ba4..2b7a200 100644 --- a/webapp/app/view/map/Map.js +++ b/webapp/app/view/map/Map.js @@ -11,7 +11,7 @@ Ext.define("MalawiAtlas.view.map.Map", { me.map = MalawiAtlas.util.Map.getOlMap(); - // convert OL event to Ext event + // convert OL event to Ext event // (necessary for accessing controller functions) me.map.on("singleclick", function (evt) { me.fireEvent("mapSingleClick", evt); @@ -21,6 +21,6 @@ Ext.define("MalawiAtlas.view.map.Map", { }, listeners: { - mapSingleClick: "onMapSingleClick", - }, + mapSingleClick: "onMapSingleClick" + } });