[Commits] r2248 - in sandbox/mapgears: . geoext.ux/ux geoext.ux/ux/ZoomTo geoext.ux/ux/ZoomTo/examples geoext.ux/ux/ZoomTo/lib geoext.ux/ux/ZoomTo/lib/GeoExt.ux geoext.ux/ux/ZoomTo/lib/GeoExt.ux/widgets geoext.ux/ux/ZoomTo/resources geoext.ux/ux/ZoomTo/resources/css geoext.ux/ux/ZoomTo/resources/images

commits at geoext.org commits at geoext.org
Fri Jul 30 20:30:59 CEST 2010


Author: adube
Date: 2010-07-30 20:30:59 +0200 (Fri, 30 Jul 2010)
New Revision: 2248

Added:
   sandbox/mapgears/geoext.ux/ux/ZoomTo/
   sandbox/mapgears/geoext.ux/ux/ZoomTo/examples/
   sandbox/mapgears/geoext.ux/ux/ZoomTo/examples/ZoomToExample.html
   sandbox/mapgears/geoext.ux/ux/ZoomTo/examples/ZoomToExample.js
   sandbox/mapgears/geoext.ux/ux/ZoomTo/lib/
   sandbox/mapgears/geoext.ux/ux/ZoomTo/lib/GeoExt.ux/
   sandbox/mapgears/geoext.ux/ux/ZoomTo/lib/GeoExt.ux/SingleFile.js
   sandbox/mapgears/geoext.ux/ux/ZoomTo/lib/GeoExt.ux/widgets/
   sandbox/mapgears/geoext.ux/ux/ZoomTo/lib/GeoExt.ux/widgets/ZoomTo.js
   sandbox/mapgears/geoext.ux/ux/ZoomTo/resources/
   sandbox/mapgears/geoext.ux/ux/ZoomTo/resources/css/
   sandbox/mapgears/geoext.ux/ux/ZoomTo/resources/css/ZoomTo.css
   sandbox/mapgears/geoext.ux/ux/ZoomTo/resources/images/
   sandbox/mapgears/geoext.ux/ux/ZoomTo/resources/images/recenterOnCoords.png
   sandbox/mapgears/geoext.ux/ux/ZoomTo/resources/lang/
   sandbox/mapgears/geoext.ux/ux/ZoomTo/tests/
Modified:
   sandbox/mapgears/
Log:
GeoExt.ux.ZoomTo widget prototype, missing projection support and i18n


Property changes on: sandbox/mapgears
___________________________________________________________________
Name: svn:externals
   - geoext http://svn.geoext.org/core/trunk/geoext/
openlayers http://svn.openlayers.org/trunk/openlayers
ext http://www.geoext.org/svn/geoext/ext/3.1.0


   + geoext http://svn.geoext.org/core/trunk/geoext/
openlayers http://svn.openlayers.org/trunk/openlayers
ext http://www.geoext.org/svn/geoext/ext/3.1.0
proj4js http://svn.osgeo.org/metacrs/proj4js/


Added: sandbox/mapgears/geoext.ux/ux/ZoomTo/examples/ZoomToExample.html
===================================================================
--- sandbox/mapgears/geoext.ux/ux/ZoomTo/examples/ZoomToExample.html	                        (rev 0)
+++ sandbox/mapgears/geoext.ux/ux/ZoomTo/examples/ZoomToExample.html	2010-07-30 18:30:59 UTC (rev 2248)
@@ -0,0 +1,41 @@
+<html>
+    <head>
+        <title>ZoomTo Example</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <!-- ext version 3.1.0 -->
+        <script type="text/javascript" src="../../../../ext/adapter/ext/ext-base.js"></script>
+        <script type="text/javascript" src="../../../../ext/ext-all.js"></script>
+        <link rel="stylesheet" type="text/css" href="../../../../ext/resources/css/ext-all.css" />
+        <link rel="stylesheet" type="text/css" href="../../../../ext/examples/shared/examples.css" />
+
+        <!-- openlayers version trunk -->
+        <script type="text/javascript" src="../../../../openlayers/lib/OpenLayers.js"></script>
+        <script type="text/javascript" src="../../../../openlayers/lib/OpenLayers/Lang/fr.js"></script>
+        <script type="text/javascript" src="../resources/lang/fr.js"></script>
+        <script type="text/javascript" src="../../../../geoext/lib/GeoExt.js"></script>
+        
+        <link rel="stylesheet" type="text/css" href="../resources/css/ZoomTo.css" />
+        <script type="text/javascript" src="../lib/GeoExt.ux/SingleFile.js"></script>
+        <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA3mOTdOkDlYkDjNn8Pnmr6RSx-0TMqGjMArKjswQRjIfEFr4DRBQbnmTwDEUT7Xj85OddpLMNrWtXoA'></script>
+
+        <script type="text/javascript" src="ZoomToExample.js"></script>
+        
+    </head>
+    <body>
+        <h1>ZoomTo example</h1>
+                
+        <p>
+          Click on the button in the toolbar.  Input valid coordinates in the 
+          text fields then click on the "zoom" button.  The map gets
+          automatically recentered on the place inputed.
+        </p>
+        
+        <p>
+          See
+          <a href="ZoomToExample.js">ZoomToExample.js</a>
+          for the source code.
+        </p>
+        
+        <div id="content"></div>
+    </body>
+</html>

Added: sandbox/mapgears/geoext.ux/ux/ZoomTo/examples/ZoomToExample.js
===================================================================
--- sandbox/mapgears/geoext.ux/ux/ZoomTo/examples/ZoomToExample.js	                        (rev 0)
+++ sandbox/mapgears/geoext.ux/ux/ZoomTo/examples/ZoomToExample.js	2010-07-30 18:30:59 UTC (rev 2248)
@@ -0,0 +1,53 @@
+var zoomTo, mapPanel, toolbar;
+
+Ext.onReady(function() {
+
+    Ext.QuickTips.init();
+
+    var options = {
+        projection: new OpenLayers.Projection("EPSG:900913"),
+        displayProjection: new OpenLayers.Projection("EPSG:4326"),
+        units: "m",
+        numZoomLevels: 18,
+        maxResolution: 156543.0339,
+        maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
+                                         20037508, 20037508.34)
+    };
+    map = new OpenLayers.Map('map', options);
+
+    toolbar = new Ext.Toolbar();
+
+    mapPanel = new GeoExt.MapPanel({
+        region: "center",
+        layers: [
+            new OpenLayers.Layer.Google("Google Physical",{'sphericalMercator': true, type: G_PHYSICAL_MAP})
+        ],
+        map: map,
+        tbar: toolbar
+    });
+
+    projStore = new Ext.data.SimpleStore({
+        fields: ['projection'],
+        data : [
+            ['EPSG:900913'],
+            ['EPSG:4326'],
+            ['EPSG:32198']
+        ]
+    });
+
+    zoomTo = new GeoExt.ux.ZoomTo({
+        //'projectionStore': projStore,
+        'map': map
+    });
+    toolbar.add(zoomTo);
+
+    new Ext.Panel({
+        renderTo: "content",
+        layout: "border",
+        width: 500,
+        height: 350,
+        items: [mapPanel]
+    });
+
+    map.setCenter(new OpenLayers.LonLat(-10762333.581055,5968203.1676758), 4);
+});

Added: sandbox/mapgears/geoext.ux/ux/ZoomTo/lib/GeoExt.ux/SingleFile.js
===================================================================
--- sandbox/mapgears/geoext.ux/ux/ZoomTo/lib/GeoExt.ux/SingleFile.js	                        (rev 0)
+++ sandbox/mapgears/geoext.ux/ux/ZoomTo/lib/GeoExt.ux/SingleFile.js	2010-07-30 18:30:59 UTC (rev 2248)
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2008-2010 The Open Source Geospatial Foundation
+ * 
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+/*
+ * The code in this file is based on code taken from OpenLayers.
+ *
+ * Copyright (c) 2006-2007 MetaCarta, Inc., published under the Clear BSD
+ * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license.
+ */
+ 
+(function() {
+
+    /**
+     * The relative path of this script.
+     */
+    var scriptName = "lib/GeoExt.ux/SingleFile.js";
+
+    /**
+     * Function returning the path of this script.
+     */
+    var getScriptLocation = function() {
+        var scriptLocation = "";
+        // If we load other scripts right before GeoExt using the same
+        // mechanism to add script resources dynamically (e.g. OpenLayers), 
+        // document.getElementsByTagName will not find the GeoExt script tag
+        // in FF2. Using document.documentElement.getElementsByTagName instead
+        // works around this issue.
+        var scripts = document.documentElement.getElementsByTagName('script');
+        for(var i=0, len=scripts.length; i<len; i++) {
+            var src = scripts[i].getAttribute('src');
+            if(src) {
+                var index = src.lastIndexOf(scriptName); 
+                // set path length for src up to a query string
+                var pathLength = src.lastIndexOf('?');
+                if(pathLength < 0) {
+                    pathLength = src.length;
+                }
+                // is it found, at the end of the URL?
+                if((index > -1) && (index + scriptName.length == pathLength)) {
+                    scriptLocation = src.slice(0, pathLength - scriptName.length);
+                    break;
+                }
+            }
+        }
+        return scriptLocation;
+    };
+
+    var jsfiles = new Array(
+        "widgets/ZoomTo.js"
+    );
+
+    var agent = navigator.userAgent;
+    var docWrite = (agent.match("MSIE") || agent.match("Safari"));
+    if(docWrite) {
+        var allScriptTags = new Array(jsfiles.length);
+    }
+    var host = getScriptLocation() + "lib/GeoExt.ux/";    
+    for (var i=0, len=jsfiles.length; i<len; i++) {
+        if (docWrite) {
+            allScriptTags[i] = "<script src='" + host + jsfiles[i] +
+                               "'></script>"; 
+        } else {
+            var s = document.createElement("script");
+            s.src = host + jsfiles[i];
+            var h = document.getElementsByTagName("head").length ? 
+                       document.getElementsByTagName("head")[0] : 
+                       document.body;
+            h.appendChild(s);
+        }
+    }
+    if (docWrite) {
+        document.write(allScriptTags.join(""));
+    }
+})();

Added: sandbox/mapgears/geoext.ux/ux/ZoomTo/lib/GeoExt.ux/widgets/ZoomTo.js
===================================================================
--- sandbox/mapgears/geoext.ux/ux/ZoomTo/lib/GeoExt.ux/widgets/ZoomTo.js	                        (rev 0)
+++ sandbox/mapgears/geoext.ux/ux/ZoomTo/lib/GeoExt.ux/widgets/ZoomTo.js	2010-07-30 18:30:59 UTC (rev 2248)
@@ -0,0 +1,378 @@
+/**
+ * Copyright (c) 2008-2010 The Open Source Geospatial Foundation
+ * 
+ * Published under the BSD license.
+ * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
+ * of the license.
+ */
+
+Ext.namespace("GeoExt.ux")
+
+/*
+ * @requires GeoExt/widgets/Action.js
+ */
+
+/** api: (define)
+ *  module = GeoExt.ux
+ *  class = ZoomTo
+ */
+
+/** api: constructor
+ *  .. class:: ZoomTo 
+ */
+GeoExt.ux.ZoomTo = Ext.extend(Ext.Action, {
+
+    text: "ZoomTo",
+
+    /** private: property[window]
+     *  ``Ext.Window``
+     */
+    window: null,
+
+    /** private: property[form]
+     *  ``Ext.form.FormPanel``
+     */
+    form: null,
+
+    /** private: property[map]
+     *  ``OpenLayers.Map``
+     */
+    map: null,
+
+    /** private: property[projectionStore]
+     *  ``Ext.data.SimpleStore``
+     */
+    projectionStore: null,
+
+    /** private: property[autoHideWindowOnZoom]
+     *  ``Boolean``
+     *  If set to true, hides the window after recentering.
+     */
+    autoHideWindowOnZoom: true,
+
+    /** private: property[useIcons]
+     *  ``Boolean``
+     *  If set to true, enables the use of image icons.  Must be combined with
+     *  a .css (see in resources/css).
+     */
+    useIcons: true,
+
+    /** private: property[showCenter]
+     *  ``Boolean``
+     *  If set to true, shows a red cross marker on the center of the map
+     *  after recentering.
+     */
+    showCenter: true,
+
+    /** private: method[constructor]
+     */
+    constructor: function(config) {
+        this.initMap();
+        arguments.callee.superclass.constructor.call(this, config);
+        this.setHandler(this.onActionClick, this);
+
+        if (config.projectionStore) {
+            this.projectionStore = config.projectionStore;
+        }
+
+        if (this.useIcons === true) {
+            this.setIconClass("gx-zoomto-recenteroncoords");
+        } else {
+            this.setText(this.text);
+        }
+    },
+
+    /** private: method[initMap]
+     *  Convenience method to make sure that the map object is correctly set.
+     */
+    initMap: function() {
+        if (this.map instanceof GeoExt.MapPanel) {
+            this.map = this.map.map;
+        }
+
+        if (!this.map) {
+            this.map = GeoExt.MapPanel.guess().map;
+        }
+
+        // if no toggleGroup was defined, set to this.map.id
+        if (!this.toggleGroup) {
+            this.toggleGroup = this.map.id;
+        }
+    },
+
+    /** private: method[onActionClick]
+     *  Called when action is clicked.
+     */
+    onActionClick: function() {
+        if (!this.window) {
+
+            if (!this.projectionStore) {
+                this.projectionStore = new Ext.data.SimpleStore({
+                    fields: ['projection'],
+                    data : [
+                        ['EPSG:4326'],
+                        ['EPSG:900913']
+                    ]
+                });
+            }
+                        
+            // get first value of store as default value
+            var defaultProj = this.projectionStore.data.items[0].data[
+                this.projectionStore.getAt(0).fields.get(0)['name']
+            ];
+
+            // FormPanel
+            this.form = new Ext.form.FormPanel({
+                border: false,
+                plain: true,
+                defaults: {width: 170},
+                defaultType: 'textfield',
+                labelAlign: 'top',
+                bodyStyle:'padding:5px 5px 0',
+                items: [{
+                        fieldLabel: 'X coordinate',
+                        name: 'coordx'
+                    },{
+                        fieldLabel: 'Y coordinate',
+                        name: 'coordy'
+                    },{
+                        fieldLabel: 'Projection',
+                        name: 'projection',
+                        value: defaultProj,
+                        xtype: 'combo',
+                        store: this.projectionStore,
+                        displayField: 'projection',
+                        typeAhead: true,
+                        mode: 'local',
+                        forceSelection: true,
+                        triggerAction: 'all',
+                        allowBlank: false,
+                        invalidText: "invalid entry",
+                        emptyText: "",
+                        selectOnFocus:true
+                    }
+                ]
+            });
+
+            // Window with buttons
+            this.window = new Ext.Window({
+                title: 'ZoomTo widget',
+                layout: 'form',
+                width: 200,
+                height: 250,
+                closeAction: 'hide',
+                modal: false,
+                plain: false,
+                resizable: false,
+                items: [this.form],
+                buttons: [{
+                    text: 'Close',
+                    scope: this,
+                    handler: function(){
+                        this.window.hide();
+                    }
+                },{
+                    text:'Zoom',
+                    scope: this,
+                    handler: function(){
+                        this.recenter();
+                    }
+                }]
+            });
+        }
+
+        this.window.show();
+    },
+
+    /** private: method[recenter]
+     * Recenters map using user-provided coordinates and scale.
+     */
+    recenter: function() {
+        var values = this.form.getForm().getValues();
+
+        if (values.projection == "") {
+            this.showError(OpenLayers.i18n('mf.recenter.missingProj'));
+            return false;
+        }
+
+        var transformedCoords = this.getTransformedCoords(
+            values.coordx, values.coordy, values.projection
+        );
+
+        var x = transformedCoords['x'];
+        var y = transformedCoords['y'];
+        
+        if (this.checkCoords(x, y)) {
+            
+            var zoom;
+
+            if (this.scales && values.scaleValue) {
+                // use user-provided scale
+                resolution = OpenLayers.Util.getResolutionFromScale(values.scaleValue,
+                this.map.units);
+                zoom = this.map.getZoomForResolution(resolution);
+            }
+
+            this.recenterOnCoords(x, y, zoom);
+        }
+    },
+
+    /** private: method[checkCoords]
+     *  Checks that submitted coordinates are well-formatted and within the map
+     *      bounds.
+     *
+     *  Parameters:
+     *  x    {Float}  - easting coordinate
+     *  y    {Float}  - northing coordinate
+     *  proj {String} - projection of inputed coordinates
+     *
+     *  Returns: 
+     *  {Object}
+     */
+    getTransformedCoords: function(x, y, proj) {
+        var transformedCoords = {};
+
+        if (this.map.getProjection() === proj) {
+            transformedCoords['x'] = x;
+            transformedCoords['y'] = y;
+        } else {
+            var objProj = new OpenLayers.Projection(proj);
+            var point = new OpenLayers.LonLat(x, y);
+            point.transform(objProj, this.map.getProjectionObject());
+
+            transformedCoords['x'] = point.lon;
+            transformedCoords['y'] = point.lat;
+        }
+
+        return transformedCoords;
+    },
+
+    /** private: method[checkCoords]
+     *  Checks that submitted coordinates are well-formatted and within the map
+     *      bounds.
+     *
+     *  Parameters:
+     *  x {Float} - easting coordinate
+     *  y {Float} - northing coordinate
+     *
+     *  Returns: 
+     *  {Boolean}
+     */
+    checkCoords: function(x, y) {
+    
+        if (!x || !y) {
+            this.showError(OpenLayers.i18n('mf.recenter.missingCoords'));
+            return false;
+        }
+
+        var maxExtent = this.map.maxExtent;
+    
+        if (x < maxExtent.left || x > maxExtent.right ||
+            y < maxExtent.bottom || y > maxExtent.top) {
+            this.showError(OpenLayers.i18n('mf.recenter.outOfRangeCoords', {
+                'myX': x,
+                'myY': y,
+                'coordX': OpenLayers.i18n('mf.recenter.x'),
+                'coordY': OpenLayers.i18n('mf.recenter.y'),
+                'minCoordX': maxExtent.left,
+                'maxCoordX': maxExtent.right,
+                'minCoordY': maxExtent.bottom,
+                'maxCoordY': maxExtent.top
+            }));
+            return false;
+        }
+    
+        return true;
+    },
+
+    /** private: method[recenterOnCoords]
+     *  Recenters on given coordinates and zoom level
+     *
+     *  Parameters:
+     *  x -    {Float}   easting coordinate
+     *  y -    {Float}   northing coordinate
+     *  zoom - {Integer} zoom level (optional)
+     */
+    recenterOnCoords: function(x, y, zoom) {
+        
+        // use default zoom level if provided in widget config, 
+        // else keep current zoom level
+        if (typeof(zoom) == 'undefined') {
+            zoom = (typeof(this.defaultZoom) != 'undefined') 
+                   ? this.defaultZoom : this.map.getZoom()
+        }
+
+        if (this.showCenter) {
+            // display a symbol on the new center point
+            this.showCenterMark(x, y);
+        }
+
+        this.map.setCenter(new OpenLayers.LonLat(x, y), zoom);
+
+        if (this.autoHideWindowOnZoom === true) 
+        {
+            this.window.hide();
+        }
+    },
+
+    /** private: method[showCenterMark]
+     *  Materializes new center with a cross
+     *
+     *  Parameters:
+     *  x - {Float} easting coordinate
+     *  y - {Float} northing coordinate
+     */
+    showCenterMark: function(x, y) {
+        this.prepareVectorLayer();
+
+        var features = [
+            new OpenLayers.Feature.Vector(
+                new OpenLayers.Geometry.Point(x, y),
+                { type: this.symbol || 'cross' }
+            )
+        ];
+
+        this.vectorLayer.addFeatures(features);
+    },
+
+    /** private: method[prepareVectorLayer]
+     *  Adds a layer for displaying the center symbol. If it is already set,
+     *  removes existing features.
+     */
+    prepareVectorLayer: function() {
+        if (this.vectorLayer) {
+            this.vectorLayer.destroyFeatures();
+        } else {
+            var styles = new OpenLayers.StyleMap({
+                "default": OpenLayers.Util.extend({
+                    // retrieved from symbol type attribute
+                    graphicName: "${type}",
+                    pointRadius: 10,
+                    fillColor: "red",
+                    fillOpacity: 1
+                }, this.centerMarkStyles)
+            });
+
+            this.vectorLayer = new OpenLayers.Layer.Vector(
+                "Center Symbol", {
+                    styleMap: styles,
+                    alwaysInRange: true
+                }
+            );
+
+            this.map.addLayer(this.vectorLayer);
+        }
+    },
+
+    /** private: method[showError]
+     *  Displays an error message
+     *
+     *  Parameters:
+     *  msg - {String} message
+     *  title - {String} box title
+     */
+    showError: function(msg, title) {
+        title = title || OpenLayers.i18n('mf.error');
+        Ext.Msg.alert(title, msg);
+    }
+});

Added: sandbox/mapgears/geoext.ux/ux/ZoomTo/resources/css/ZoomTo.css
===================================================================
--- sandbox/mapgears/geoext.ux/ux/ZoomTo/resources/css/ZoomTo.css	                        (rev 0)
+++ sandbox/mapgears/geoext.ux/ux/ZoomTo/resources/css/ZoomTo.css	2010-07-30 18:30:59 UTC (rev 2248)
@@ -0,0 +1,5 @@
+.gx-zoomto-recenteroncoords {
+  background-image: url("../images/recenterOnCoords.png") !important;
+  height:20px !important;
+  width:20px !important;
+}
\ No newline at end of file

Added: sandbox/mapgears/geoext.ux/ux/ZoomTo/resources/images/recenterOnCoords.png
===================================================================
(Binary files differ)


Property changes on: sandbox/mapgears/geoext.ux/ux/ZoomTo/resources/images/recenterOnCoords.png
___________________________________________________________________
Name: svn:mime-type
   + application/octet-stream



More information about the Commits mailing list