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

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
line wrap: on
line source
/* Copyright (C) 2013 by Bundesamt fuer Strahlenschutz
 * Software engineering by Intevation GmbH
 *
 * This file is Free Software under the GNU GPL (v>=3)
 * and comes with ABSOLUTELY NO WARRANTY! Check out
 * the documentation coming with IMIS-Labordaten-Application for details.
 */
Ext.define('Lada.view.panel.Map', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.map',

    record: null,

    /**
     * @cfg
     * OpenLayers map options.
     */
    mapOptions: {
        maxExtent: new OpenLayers.Bounds(2.9, 42.95, 18.1, 60.6),
        scales: [5000000, 3000000, 2000000, 1000000, 500000, 250000, 100000, 25000],
        units: 'dd',
        projection: new OpenLayers.Projection('EPSG:4326')
    },

    /**
     * Array of OpenLayers.Layer objects.
     */

    /**
     * @private
     * Initialize the map panel.
     */
    initComponent: function() {
        this.layers = [
            new OpenLayers.Layer.WMS(
                'Standard' + this.record.get('id'),
                'http://osm.intevation.de/cgi-bin/standard.fcgi?',
                {
                    layers: 'OSM-WMS-Dienst',
                    format: 'image/png',
                    BGCOLOR: '0xFFFFFF'
                }, {
                    isBaseLayer: true,
                    buffer: 0,
                    visibility: true
                })
        ];
        this.map = new OpenLayers.Map('map_' + this.record.get('id'), {
            controls: [],
            tileManager: null,
            zoomMethod: null
        });
        this.map.setOptions(this.mapOptions);
        this.map.addLayers(this.layers);
        var keyControl = new OpenLayers.Control.KeyboardDefaults();
        this.map.addControl(keyControl);
        keyControl.activate();
        this.bodyStyle = {background: '#fff'};
        this.initData();
        this.callParent(arguments);
    },

    initData: function() {
        var me = this;
        this.locationFeatures = [];
        this.locationStore = Ext.data.StoreManager.get('locations');
        for (var i = 0; i < this.locationStore.count(); i++) {
            this.locationFeatures.push(new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Point(
                    this.locationStore.getAt(i).get('longitude'),
                    this.locationStore.getAt(i).get('latitude')
                ),
                {
                    id: this.locationStore.getAt(i).get('id')
                }
            ));
        }
        this.featureLayer = new OpenLayers.Layer.Vector('vector' + this.record.get('id'), {
            styleMap: new OpenLayers.StyleMap({
                'default': new OpenLayers.Style(OpenLayers.Util.applyDefaults({
                    externalGraphic: 'resources/lib/OpenLayers/img/marker-green.png',
                    graphicOpacity: 1,
                    pointRadius: 10
                }, OpenLayers.Feature.Vector.style['default'])),
                'select': new OpenLayers.Style({
                    externalGraphic: 'resources/lib/OpenLayers/img/marker-blue.png'
                })
            })
        });
        this.featureLayer.addFeatures(this.locationFeatures);
        this.map.addLayer(this.featureLayer);
        this.selectControl = new OpenLayers.Control.SelectFeature(this.featureLayer, {
            clickout: false,
            toggle: false,
            multiple: false,
            hover: false,
            onSelect: me.selectedFeature,
            scope: me
        });
        this.map.addControl(this.selectControl);
        this.selectControl.activate();
    },

    selectedFeature: function(feature) {
        var record = Ext.data.StoreManager.get('locations').getById(feature.attributes.id);
        this.up('window').down('locationform').setRecord(record);
        this.up('window').down('ortform').down('combobox').setValue(record.id);
    },

    selectFeature: function(id) {
        var feature = this.featureLayer.getFeaturesByAttribute('id', id);
        this.map.setCenter(
            new OpenLayers.LonLat(feature[0].geometry.x, feature[0].geometry.y));
        this.map.zoomToScale(this.mapOptions.scales[5]);
        this.selectControl.unselectAll();
        this.selectControl.select(feature[0]);
    },

    /**
     * @private
     * Override to display and update the map view in the panel.
     */
    afterRender: function() {
        this.superclass.afterRender.apply(this, arguments);
        this.map.render(this.body.dom);
        this.map.addControl(new OpenLayers.Control.Navigation());
        this.map.addControl(new OpenLayers.Control.PanZoomBar());
        this.map.addControl(new OpenLayers.Control.ScaleLine());
        if (this.record) {
            this.selectFeature(this.record.get('ort'));
        }
        else {
            this.map.zoomToScale(this.mapOptions.scales[0]);
        }
    },

    beforeDestroy: function() {
        if (this.map) {
            this.map.destroy();
        }
        delete this.map;
        this.callParent(arguments);
    },

    /**
     * @private
     * Override to resize the map and reposition the logo.
     */
    onResize: function() {
        this.superclass.onResize.apply(this, arguments);
        this.map.updateSize();
    }
});

http://lada.wald.intevation.org