raimund@605: /* Copyright (C) 2013 by Bundesamt fuer Strahlenschutz raimund@605: * Software engineering by Intevation GmbH raimund@605: * raimund@605: * This file is Free Software under the GNU GPL (v>=3) raimund@605: * and comes with ABSOLUTELY NO WARRANTY! Check out raimund@605: * the documentation coming with IMIS-Labordaten-Application for details. raimund@605: */ raimund@605: Ext.define('Lada.view.panel.Map', { raimund@605: extend: 'Ext.panel.Panel', raimund@605: alias: 'widget.map', raimund@605: raimund@614: record: null, raimund@638: locationRecord: null, raimund@614: raimund@605: /** raimund@605: * @cfg raimund@605: * OpenLayers map options. raimund@605: */ raimund@605: mapOptions: { raimund@605: maxExtent: new OpenLayers.Bounds(2.9, 42.95, 18.1, 60.6), raimund@614: scales: [5000000, 3000000, 2000000, 1000000, 500000, 250000, 100000, 25000], raimund@605: units: 'dd', raimund@605: projection: new OpenLayers.Projection('EPSG:4326') raimund@605: }, raimund@605: raimund@605: /** raimund@605: * Array of OpenLayers.Layer objects. raimund@605: */ raimund@605: raimund@605: /** raimund@605: * @private raimund@605: * Initialize the map panel. raimund@605: */ raimund@605: initComponent: function() { raimund@614: this.layers = [ raimund@614: new OpenLayers.Layer.WMS( raimund@614: 'Standard' + this.record.get('id'), raimund@614: 'http://osm.intevation.de/cgi-bin/standard.fcgi?', raimund@614: { raimund@614: layers: 'OSM-WMS-Dienst', raimund@614: format: 'image/png', raimund@614: BGCOLOR: '0xFFFFFF' raimund@614: }, { raimund@614: isBaseLayer: true, raimund@614: buffer: 0, raimund@614: visibility: true raimund@614: }) raimund@614: ]; raimund@614: this.map = new OpenLayers.Map('map_' + this.record.get('id'), { raimund@605: controls: [], raimund@605: tileManager: null, raimund@605: zoomMethod: null raimund@605: }); raimund@605: this.map.setOptions(this.mapOptions); raimund@605: this.map.addLayers(this.layers); raimund@605: var keyControl = new OpenLayers.Control.KeyboardDefaults(); raimund@605: this.map.addControl(keyControl); raimund@605: keyControl.activate(); raimund@605: this.bodyStyle = {background: '#fff'}; raimund@614: this.initData(); raimund@635: this.tbar = Ext.create('Lada.view.widget.MapToolbar'); raimund@614: this.callParent(arguments); raimund@614: }, raimund@614: raimund@614: initData: function() { raimund@614: var me = this; raimund@614: this.locationFeatures = []; raimund@614: this.locationStore = Ext.data.StoreManager.get('locations'); raimund@614: for (var i = 0; i < this.locationStore.count(); i++) { raimund@614: this.locationFeatures.push(new OpenLayers.Feature.Vector( raimund@614: new OpenLayers.Geometry.Point( raimund@614: this.locationStore.getAt(i).get('longitude'), raimund@614: this.locationStore.getAt(i).get('latitude') raimund@614: ), raimund@614: { raimund@614: id: this.locationStore.getAt(i).get('id') raimund@614: } raimund@614: )); raimund@614: } raimund@614: this.featureLayer = new OpenLayers.Layer.Vector('vector' + this.record.get('id'), { raimund@614: styleMap: new OpenLayers.StyleMap({ raimund@614: 'default': new OpenLayers.Style(OpenLayers.Util.applyDefaults({ raimund@614: externalGraphic: 'resources/lib/OpenLayers/img/marker-green.png', raimund@614: graphicOpacity: 1, raimund@614: pointRadius: 10 raimund@614: }, OpenLayers.Feature.Vector.style['default'])), raimund@614: 'select': new OpenLayers.Style({ raimund@614: externalGraphic: 'resources/lib/OpenLayers/img/marker-blue.png' raimund@614: }) raimund@614: }) raimund@614: }); raimund@614: this.featureLayer.addFeatures(this.locationFeatures); raimund@614: this.map.addLayer(this.featureLayer); raimund@614: this.selectControl = new OpenLayers.Control.SelectFeature(this.featureLayer, { raimund@614: clickout: false, raimund@614: toggle: false, raimund@614: multiple: false, raimund@614: hover: false, raimund@614: onSelect: me.selectedFeature, raimund@614: scope: me raimund@614: }); raimund@614: this.map.addControl(this.selectControl); raimund@614: this.selectControl.activate(); raimund@614: }, raimund@614: raimund@614: selectedFeature: function(feature) { raimund@638: if (feature.attributes.id && raimund@638: feature.attributes.id !== '') { raimund@638: var record = Ext.data.StoreManager.get('locations').getById(feature.attributes.id); raimund@638: this.up('window').down('locationform').setRecord(record); raimund@638: this.up('window').down('locationform').setReadOnly(true); raimund@638: this.up('window').down('ortform').down('combobox').setValue(record.id); raimund@638: } raimund@638: else { raimund@638: this.up('window').down('locationform').setRecord(this.locationRecord); raimund@638: this.up('window').down('locationform').setReadOnly(false); raimund@638: } raimund@614: }, raimund@614: raimund@614: selectFeature: function(id) { raimund@614: var feature = this.featureLayer.getFeaturesByAttribute('id', id); raimund@614: this.map.setCenter( raimund@614: new OpenLayers.LonLat(feature[0].geometry.x, feature[0].geometry.y)); raimund@614: this.map.zoomToScale(this.mapOptions.scales[5]); raimund@614: this.selectControl.unselectAll(); raimund@614: this.selectControl.select(feature[0]); raimund@605: }, raimund@605: raimund@638: activateDraw: function(record) { raimund@638: this.locationRecord = record; raimund@638: if (!this.drawPoint) { raimund@638: this.drawPoint = new OpenLayers.Control.DrawFeature(this.featureLayer, raimund@638: OpenLayers.Handler.Point); raimund@638: this.map.addControl(this.drawPoint); raimund@638: } raimund@638: this.drawPoint.activate(); raimund@638: this.drawPoint.events.register('featureadded', this, this.featureAdded); raimund@638: }, raimund@638: raimund@638: featureAdded: function(features) { raimund@638: this.locationRecord.set('latitude', features.feature.geometry.y); raimund@638: this.locationRecord.set('longitude', features.feature.geometry.x); raimund@638: this.drawPoint.deactivate(); raimund@638: this.selectControl.unselectAll(); raimund@638: this.selectControl.select(features.feature); raimund@638: console.log(arguments); raimund@638: }, raimund@638: raimund@605: /** raimund@605: * @private raimund@605: * Override to display and update the map view in the panel. raimund@605: */ raimund@605: afterRender: function() { raimund@605: this.superclass.afterRender.apply(this, arguments); raimund@605: this.map.render(this.body.dom); raimund@605: this.map.addControl(new OpenLayers.Control.Navigation()); raimund@605: this.map.addControl(new OpenLayers.Control.PanZoomBar()); raimund@605: this.map.addControl(new OpenLayers.Control.ScaleLine()); raimund@614: if (this.record) { raimund@614: this.selectFeature(this.record.get('ort')); raimund@614: } raimund@614: else { raimund@614: this.map.zoomToScale(this.mapOptions.scales[0]); raimund@614: } raimund@614: }, raimund@614: raimund@614: beforeDestroy: function() { raimund@614: if (this.map) { raimund@614: this.map.destroy(); raimund@614: } raimund@614: delete this.map; raimund@614: this.callParent(arguments); raimund@605: }, raimund@605: raimund@605: /** raimund@605: * @private raimund@605: * Override to resize the map and reposition the logo. raimund@605: */ raimund@605: onResize: function() { raimund@605: this.superclass.onResize.apply(this, arguments); raimund@605: this.map.updateSize(); raimund@605: } raimund@605: });