[Commits] r1598 - in sandbox/cmoullet/ux/RoutingPanel: examples ux ux/widgets

commits at geoext.org commits at geoext.org
Sun Dec 20 22:18:44 CET 2009


Author: cmoullet
Date: 2009-12-20 22:18:44 +0100 (Sun, 20 Dec 2009)
New Revision: 1598

Removed:
   sandbox/cmoullet/ux/RoutingPanel/ux/control/
Modified:
   sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.js
   sandbox/cmoullet/ux/RoutingPanel/ux/widgets/RoutingPanel.js
Log:


Modified: sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.js
===================================================================
--- sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.js	2009-12-20 18:33:48 UTC (rev 1597)
+++ sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.js	2009-12-20 21:18:44 UTC (rev 1598)
@@ -82,7 +82,10 @@
     var routingPanelItem = {
         xtype: 'gxux_routingpanel',
         id: 'routingPanelItem',
-        map: map
+        map: map,
+        // Key for dev.geoext.org: 187a9f341f70406a8064d07a30e5695c
+        // Key for localhost: BC9A493B41014CAABB98F0471D759707
+        cloudmadeKey: '187a9f341f70406a8064d07a30e5695c'
     };
     treePanel = Ext.getCmp("treepanel");
     treePanel.add(treePanelItem);

Modified: sandbox/cmoullet/ux/RoutingPanel/ux/widgets/RoutingPanel.js
===================================================================
--- sandbox/cmoullet/ux/RoutingPanel/ux/widgets/RoutingPanel.js	2009-12-20 18:33:48 UTC (rev 1597)
+++ sandbox/cmoullet/ux/RoutingPanel/ux/widgets/RoutingPanel.js	2009-12-20 21:18:44 UTC (rev 1598)
@@ -10,9 +10,9 @@
 
 GeoExt.ux.RoutingPanel = Ext.extend(Ext.Panel, {
 
-    startLocationField: null,
+    startLocationCombo: null,
 
-    endLocationField: null,
+    endLocationCombo: null,
 
     proxy: null,
 
@@ -32,14 +32,31 @@
     routingStartFeature: null,
     routingEndFeature: null,
     routingPointDrawControl: null,
+    cloudmadeKey: null,
 
+    statusLabel: null,
+
+    geocodingType: 'cloudmade',
+    geocodingQueryParam: 'query',
+    geocodingMaxRows: 20,
+    geocodingUrl: null,
+
     routingStyle: {
         strokeColor: "#0000FF",
         strokeOpacity: 0.5,
         strokeWidth: 5
     },
+    vectorStyle: new OpenLayers.StyleMap({
+        "default": new OpenLayers.Style({
+            pointRadius: "8",
+            fillColor: "#FF0000",
+            fillOpacity: 0.5,
+            strokeColor: "#FF0000",
+            strokeOpacity: 1,
+            strokeWidth: 1
+        })
+    }),
 
-    clickControl: null,
 
     routingProjection: new OpenLayers.Projection("EPSG:4326"),
 
@@ -49,19 +66,97 @@
             border: false
         };
 
+
         Ext.applyIf(this, defConfig);
 
-        this.startLocationField = new Ext.form.TextField({
-            fieldLabel: OpenLayers.i18n('A'),
-            name: 'start',
-            value: '47.25976,9.58423'
-        });
+        if (this.geocodingType == 'cloudmade') {
+            this.geocodingUrl = 'http://geocoding.cloudmade.com/' + this.cloudmadeKey + '/geocoding/v2/find.js?results=' + this.geocodingMaxRows + '&return_geometry=false';
+            this.startLocationCombo = new Ext.form.ComboBox({
+                fieldLabel: OpenLayers.i18n('A'),
+                name: 'startLocationCombo',
+                locationString: '47.25976,9.58423',
+                emptyText: OpenLayers.i18n('Search start...'),
+                minChars: 1,
+                queryDelay: 50,
+                hideTrigger: true,
+                charset: 'UTF8',
+                forceSelection: true,
+                displayField: 'name',
+                queryParam: this.geocodingQueryParam,
+                tpl: '<tpl for="."><div class="x-combo-list-item"><h1>{name}</h1></div></tpl>',
+                store: new Ext.data.Store({
+                    proxy: new Ext.data.ScriptTagProxy({
+                        url: this.geocodingUrl,
+                        method: 'GET'
+                    }),
+                    reader: new Ext.data.JsonReader({
+                        totalProperty: "found",
+                        root: "features",
+                        fields: [
+                            {
+                                name: 'name',
+                                mapping: 'properties.name'
+                            },
+                            {
+                                name: 'centroid'
+                            }
+                        ]
+                    })
+                }),
+                listeners: {
+                    "select": function(combo, record, index) {
+                        if (this.routingStartFeature) {
+                            this.routingLayer.removeFeatures([this.routingStartFeature]);
+                        }
+                        this.startLocationCombo.locationString = record.data.centroid.coordinates[0] + ',' + record.data.centroid.coordinates[1];
+                    },
+                    scope: this
+                }
+            });
 
-        this.endLocationField = new Ext.form.TextField({
-            fieldLabel: OpenLayers.i18n('B'),
-            name: 'start',
-            value: '47.26117,9.59882'
-        });
+            this.endLocationCombo = new Ext.form.ComboBox({
+                fieldLabel: OpenLayers.i18n('B'),
+                name: 'endLocationCombo',
+                locationString: '47.26117,9.59882',
+                emptyText: OpenLayers.i18n('Search end...'),
+                minChars: 1,
+                queryDelay: 50,
+                hideTrigger: true,
+                charset: 'UTF8',
+                forceSelection: true,
+                displayField: 'name',
+                queryParam: this.geocodingQueryParam,
+                tpl: '<tpl for="."><div class="x-combo-list-item"><h1>{name}</h1></div></tpl>',
+                store: new Ext.data.Store({
+                    proxy: new Ext.data.ScriptTagProxy({
+                        url: this.geocodingUrl,
+                        method: 'GET'
+                    }),
+                    reader: new Ext.data.JsonReader({
+                        totalProperty: "found",
+                        root: "features",
+                        fields: [
+                            {
+                                name: 'name',
+                                mapping: 'properties.name'
+                            },
+                            {
+                                name: 'centroid'
+                            }
+                        ]
+                    })
+                }),
+                listeners: {
+                    "select": function(combo, record, index) {
+                        if (this.routingEndFeature) {
+                            this.routingLayer.removeFeatures([this.routingEndFeature]);
+                        }
+                        this.endLocationCombo.locationString = record.data.centroid.coordinates[0] + ',' + record.data.centroid.coordinates[1];
+                    },
+                    scope: this
+                }
+            });
+        }
 
         this.items = [
             {
@@ -84,7 +179,7 @@
                                     anchor:'100%'
                                 },
                                 items: [
-                                    this.startLocationField
+                                    this.startLocationCombo
                                 ]
                             },
                             {
@@ -118,7 +213,7 @@
                                     anchor:'100%'
                                 },
                                 items: [
-                                    this.endLocationField
+                                    this.endLocationCombo
                                 ]
                             },
                             {
@@ -163,13 +258,11 @@
         //http://routes.cloudmade.com/BC9A493B41014CAABB98F0471D759707/api/0.3/47.25976,9.58423,47.26117,9.59882/car/shortest.js
         this.proxy.on(
                 'beforeload', function() {
-            var newUrl = this.startLocationField.getValue() + ',' + this.endLocationField.getValue();
+            var newUrl = this.startLocationCombo.locationString + ',' + this.endLocationCombo.locationString;
             newUrl = newUrl + "/car/shortest.js?lang=" + this.lang;
-            // Key for dev.geoext.org: 187a9f341f70406a8064d07a30e5695c
-            // Key for localhost: BC9A493B41014CAABB98F0471D759707
-            this.proxy.url = "http://routes.cloudmade.com/187a9f341f70406a8064d07a30e5695c/api/0.3/" + newUrl;
+            this.proxy.url = "http://routes.cloudmade.com/" + this.cloudmadeKey + "/api/0.3/" + newUrl;
         }, this)
-        this.routingLayer = new OpenLayers.Layer.Vector("Routing");
+        this.routingLayer = new OpenLayers.Layer.Vector("Routing", {styleMap: this.vectorStyle});
         this.map.addLayer(this.routingLayer);
         this.routingPointDrawControl = new OpenLayers.Control.DrawFeature(this.routingLayer, OpenLayers.Handler.Point);
         this.map.addControl(this.routingPointDrawControl);
@@ -181,7 +274,8 @@
                 this.routingStartFeature = events.feature;
                 var featureLocation = this.routingStartFeature.geometry;
                 featureLocation.transform(this.map.getProjectionObject(), this.routingProjection);
-                this.startLocationField.setValue(featureLocation.y + ',' + featureLocation.x);
+                this.startLocationCombo.locationString = featureLocation.y + ',' + featureLocation.x;
+                this.startLocationCombo.setValue(OpenLayers.i18n('Position: ') + featureLocation.y + ',' + featureLocation.x);
             }
             if (this.routingPointDrawControl.type == 'GetEndPoint') {
                 if (this.routingEndFeature) {
@@ -190,7 +284,8 @@
                 this.routingEndFeature = events.feature;
                 var featureLocation = this.routingEndFeature.geometry;
                 featureLocation.transform(this.map.getProjectionObject(), this.routingProjection);
-                this.endLocationField.setValue(featureLocation.y + ',' + featureLocation.x);
+                this.endLocationCombo.locationString = featureLocation.y + ',' + featureLocation.x;
+                this.endLocationCombo.setValue(OpenLayers.i18n('Position: ') + featureLocation.y + ',' + featureLocation.x);
             }
             this.routingPointDrawControl.deactivate();
         },



More information about the Commits mailing list