Mercurial > lada > lada-client

comparison app/view/panel/Map.js @ 614:04e380ce4d73

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Load locations as layer on the map, set selections based on the selected 'ort'.
author Raimund Renkert <raimund.renkert@intevation.de>
date Fri, 13 Mar 2015 16:27:33 +0100
parents c6994912a326
children def8def373e8
comparison
equal deleted inserted replaced
609:69e66117bd58 614:04e380ce4d73
7 */ 7 */
8 Ext.define('Lada.view.panel.Map', { 8 Ext.define('Lada.view.panel.Map', {
9 extend: 'Ext.panel.Panel', 9 extend: 'Ext.panel.Panel',
10 alias: 'widget.map', 10 alias: 'widget.map',
11 11
12 record: null,
13
12 /** 14 /**
13 * @cfg 15 * @cfg
14 * OpenLayers map options. 16 * OpenLayers map options.
15 */ 17 */
16 mapOptions: { 18 mapOptions: {
17 maxExtent: new OpenLayers.Bounds(2.9, 42.95, 18.1, 60.6), 19 maxExtent: new OpenLayers.Bounds(2.9, 42.95, 18.1, 60.6),
18 //scales: [1600000, 600000, 300000, 100000, 30000, 15000, 7000, 3500, 1200, 500], 20 scales: [5000000, 3000000, 2000000, 1000000, 500000, 250000, 100000, 25000],
19 units: 'dd', 21 units: 'dd',
20 projection: new OpenLayers.Projection('EPSG:4326') 22 projection: new OpenLayers.Projection('EPSG:4326')
21 }, 23 },
22 24
23 /** 25 /**
24 * Array of OpenLayers.Layer objects. 26 * Array of OpenLayers.Layer objects.
25 */ 27 */
26 layers: [
27 new OpenLayers.Layer.WMS(
28 'Standard',
29 'http://osm.intevation.de/cgi-bin/standard.fcgi?',
30 {
31 layers: 'OSM-WMS-Dienst',
32 format: 'image/png',
33 BGCOLOR: '0xFFFFFF'
34 }, {
35 isBaseLayer: true,
36 buffer: 0,
37 visibility: true
38 })
39 ],
40 28
41 /** 29 /**
42 * @private 30 * @private
43 * Initialize the map panel. 31 * Initialize the map panel.
44 */ 32 */
45 initComponent: function() { 33 initComponent: function() {
46 this.map = new OpenLayers.Map('map', { 34 this.layers = [
35 new OpenLayers.Layer.WMS(
36 'Standard' + this.record.get('id'),
37 'http://osm.intevation.de/cgi-bin/standard.fcgi?',
38 {
39 layers: 'OSM-WMS-Dienst',
40 format: 'image/png',
41 BGCOLOR: '0xFFFFFF'
42 }, {
43 isBaseLayer: true,
44 buffer: 0,
45 visibility: true
46 })
47 ];
48 this.map = new OpenLayers.Map('map_' + this.record.get('id'), {
47 controls: [], 49 controls: [],
48 tileManager: null, 50 tileManager: null,
49 zoomMethod: null 51 zoomMethod: null
50 }); 52 });
51 this.map.setOptions(this.mapOptions); 53 this.map.setOptions(this.mapOptions);
52 this.map.addLayers(this.layers); 54 this.map.addLayers(this.layers);
53 var keyControl = new OpenLayers.Control.KeyboardDefaults(); 55 var keyControl = new OpenLayers.Control.KeyboardDefaults();
54 this.map.addControl(keyControl); 56 this.map.addControl(keyControl);
55 keyControl.activate(); 57 keyControl.activate();
56 this.bodyStyle = {background: '#fff'}; 58 this.bodyStyle = {background: '#fff'};
57 this.callParent(); 59 this.initData();
60 this.callParent(arguments);
61 },
62
63 initData: function() {
64 var me = this;
65 this.locationFeatures = [];
66 this.locationStore = Ext.data.StoreManager.get('locations');
67 for (var i = 0; i < this.locationStore.count(); i++) {
68 this.locationFeatures.push(new OpenLayers.Feature.Vector(
69 new OpenLayers.Geometry.Point(
70 this.locationStore.getAt(i).get('longitude'),
71 this.locationStore.getAt(i).get('latitude')
72 ),
73 {
74 id: this.locationStore.getAt(i).get('id')
75 }
76 ));
77 }
78 this.featureLayer = new OpenLayers.Layer.Vector('vector' + this.record.get('id'), {
79 styleMap: new OpenLayers.StyleMap({
80 'default': new OpenLayers.Style(OpenLayers.Util.applyDefaults({
81 externalGraphic: 'resources/lib/OpenLayers/img/marker-green.png',
82 graphicOpacity: 1,
83 pointRadius: 10
84 }, OpenLayers.Feature.Vector.style['default'])),
85 'select': new OpenLayers.Style({
86 externalGraphic: 'resources/lib/OpenLayers/img/marker-blue.png'
87 })
88 })
89 });
90 this.featureLayer.addFeatures(this.locationFeatures);
91 this.map.addLayer(this.featureLayer);
92 this.selectControl = new OpenLayers.Control.SelectFeature(this.featureLayer, {
93 clickout: false,
94 toggle: false,
95 multiple: false,
96 hover: false,
97 onSelect: me.selectedFeature,
98 scope: me
99 });
100 this.map.addControl(this.selectControl);
101 this.selectControl.activate();
102 },
103
104 selectedFeature: function(feature) {
105 var record = Ext.data.StoreManager.get('locations').getById(feature.attributes.id);
106 this.up('window').down('locationform').setRecord(record);
107 this.up('window').down('ortform').down('combobox').setValue(record.id);
108 },
109
110 selectFeature: function(id) {
111 var feature = this.featureLayer.getFeaturesByAttribute('id', id);
112 this.map.setCenter(
113 new OpenLayers.LonLat(feature[0].geometry.x, feature[0].geometry.y));
114 this.map.zoomToScale(this.mapOptions.scales[5]);
115 this.selectControl.unselectAll();
116 this.selectControl.select(feature[0]);
58 }, 117 },
59 118
60 /** 119 /**
61 * @private 120 * @private
62 * Override to display and update the map view in the panel. 121 * Override to display and update the map view in the panel.
63 */ 122 */
64 afterRender: function() { 123 afterRender: function() {
65 this.superclass.afterRender.apply(this, arguments); 124 this.superclass.afterRender.apply(this, arguments);
66 this.map.render(this.body.dom); 125 this.map.render(this.body.dom);
67 this.map.zoomToExtent(this.mapOptions.Extent);
68 this.map.addControl(new OpenLayers.Control.Navigation()); 126 this.map.addControl(new OpenLayers.Control.Navigation());
69 this.map.addControl(new OpenLayers.Control.PanZoomBar()); 127 this.map.addControl(new OpenLayers.Control.PanZoomBar());
70 this.map.addControl(new OpenLayers.Control.ScaleLine()); 128 this.map.addControl(new OpenLayers.Control.ScaleLine());
129 if (this.record) {
130 this.selectFeature(this.record.get('ort'));
131 }
132 else {
133 this.map.zoomToScale(this.mapOptions.scales[0]);
134 }
135 },
136
137 beforeDestroy: function() {
138 if (this.map) {
139 this.map.destroy();
140 }
141 delete this.map;
142 this.callParent(arguments);
71 }, 143 },
72 144
73 /** 145 /**
74 * @private 146 * @private
75 * Override to resize the map and reposition the logo. 147 * Override to resize the map and reposition the logo.
http://lada.wald.intevation.org