[Commits] r1597 - in sandbox/cmoullet/ux: . RoutingPanel RoutingPanel/examples RoutingPanel/ux RoutingPanel/ux/control RoutingPanel/ux/widgets
commits at geoext.org
commits at geoext.org
Sun Dec 20 19:33:49 CET 2009
Author: cmoullet
Date: 2009-12-20 19:33:48 +0100 (Sun, 20 Dec 2009)
New Revision: 1597
Added:
sandbox/cmoullet/ux/RoutingPanel/
sandbox/cmoullet/ux/RoutingPanel/examples/
sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.html
sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.js
sandbox/cmoullet/ux/RoutingPanel/ux/
sandbox/cmoullet/ux/RoutingPanel/ux/control/
sandbox/cmoullet/ux/RoutingPanel/ux/control/RoutingClick.js
sandbox/cmoullet/ux/RoutingPanel/ux/widgets/
sandbox/cmoullet/ux/RoutingPanel/ux/widgets/RoutingPanel.js
Log:
Routing proof of concept
Added: sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.html
===================================================================
--- sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.html (rev 0)
+++ sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.html 2009-12-20 18:33:48 UTC (rev 1597)
@@ -0,0 +1,14 @@
+<html>
+<head>
+ <title>Routing Panel Example</title>
+ <script type="text/javascript" src="http://extjs.cachefly.net/builds/ext-cdn-771.js"></script>
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/resources/css/ext-all.css"/>
+ <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-2.2.1/examples/shared/examples.css"/>
+ <script type="text/javascript" src="http://openlayers.org/api/2.8/OpenLayers.js"></script>
+ <script type="text/javascript" src="../../../trunk/geoext/lib/GeoExt.js"></script>
+ <script type="text/javascript" src="../ux/widgets/RoutingPanel.js"></script>
+ <script type="text/javascript" src="RoutingPanelExample.js"></script>
+</head>
+<body>
+</body>
+</html>
Added: sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.js
===================================================================
--- sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.js (rev 0)
+++ sandbox/cmoullet/ux/RoutingPanel/examples/RoutingPanelExample.js 2009-12-20 18:33:48 UTC (rev 1597)
@@ -0,0 +1,92 @@
+var mapPanel;
+
+var treePanel;
+
+var routingPanel;
+
+var viewport;
+
+var layer;
+
+Ext.onReady(function() {
+
+ var layer = new OpenLayers.Layer.OSM("OSM");
+
+ var map = new OpenLayers.Map();
+
+ var center = new OpenLayers.LonLat(738481, 5863900);
+
+ var mouse = new OpenLayers.Control.MousePosition();
+
+ map.addControl(mouse);
+ mouse.activate();
+
+ map.addLayers([layer]);
+
+ var mapStore = new GeoExt.data.LayerStore({
+ map: map,
+ layers: [layer]
+ });
+
+ viewport = new Ext.Viewport({
+ layout: "border",
+ id: 'mainViewport',
+ items: [
+ {
+ region: "center",
+ id: "mappanel",
+ title: "2D Map",
+ xtype: "gx_mappanel",
+ map: map,
+ layers: mapStore,
+ center: center,
+ zoom: 14,
+ split: true
+ },
+ {
+ layout:'accordion',
+ region: "west",
+ width: 300,
+ items: [
+ {
+ id: "routingpanel",
+ title: "Routing Panel"
+ },
+ {
+ id: "treepanel",
+ title: "Layer Tree"
+ }
+ ]
+
+ },
+ {
+ region: "south",
+ layout: 'fit',
+ id: "readme",
+ title: 'README',
+ margins: {left: 5,top: 5, bottom: 5, right: 5},
+ html: '<p style="font-size:12pt;color:#15428B;font-weight:bold;margin:5">Routing Example</p>'
+ }
+ ]
+ });
+
+ var treePanelItem = new Ext.tree.TreePanel({
+ root: new GeoExt.tree.LayerContainer({
+ text: 'Map Layers',
+ layerStore: mapStore,
+ leaf: false,
+ expanded: true
+ }),
+ enableDD: true
+ });
+ var routingPanelItem = {
+ xtype: 'gxux_routingpanel',
+ id: 'routingPanelItem',
+ map: map
+ };
+ treePanel = Ext.getCmp("treepanel");
+ treePanel.add(treePanelItem);
+ routingPanel = Ext.getCmp("routingpanel");
+ routingPanel.add(routingPanelItem);
+ routingPanel.doLayout();
+});
\ No newline at end of file
Added: sandbox/cmoullet/ux/RoutingPanel/ux/control/RoutingClick.js
===================================================================
--- sandbox/cmoullet/ux/RoutingPanel/ux/control/RoutingClick.js (rev 0)
+++ sandbox/cmoullet/ux/RoutingPanel/ux/control/RoutingClick.js 2009-12-20 18:33:48 UTC (rev 1597)
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2008-2009 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');
+
+GeoExt.ux.RoutingClick = OpenLayers.Class(OpenLayers.Control, {
+ defaultHandlerOptions: {
+ 'single': true,
+ 'double': false,
+ 'pixelTolerance': 0,
+ 'stopSingle': false,
+ 'stopDouble': false
+ },
+
+ initialize: function(options) {
+ this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
+ OpenLayers.Control.prototype.initialize.apply(this, arguments);
+ this.handler = new OpenLayers.Handler.Click(this, {
+ 'click': this.onClick,
+ 'dblclick': this.onDblclick},
+ this.handlerOptions
+ );
+ },
+
+
+ onClick: function(evt) {
+ var lonlat = this.map.getLonLatFromViewPortPx(evt.xy);
+ lonlat.transform(this.map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326"));
+ },
+
+ onDblclick: function(evt) {
+ alert('doubleClick');
+ }
+
+});
Added: sandbox/cmoullet/ux/RoutingPanel/ux/widgets/RoutingPanel.js
===================================================================
--- sandbox/cmoullet/ux/RoutingPanel/ux/widgets/RoutingPanel.js (rev 0)
+++ sandbox/cmoullet/ux/RoutingPanel/ux/widgets/RoutingPanel.js 2009-12-20 18:33:48 UTC (rev 1597)
@@ -0,0 +1,267 @@
+/**
+ * Copyright (c) 2008-2009 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');
+
+GeoExt.ux.RoutingPanel = Ext.extend(Ext.Panel, {
+
+ startLocationField: null,
+
+ endLocationField: null,
+
+ proxy: null,
+
+ routingStore: null,
+
+ lang: 'en',
+
+ routingVersion: '0.0',
+ routingStatus: null,
+ routingStatusMessage: null,
+ routingRouteSummary: null,
+ routingRouteGeometry: null,
+ routingRouteInstructions: null,
+ routingLayer: null,
+ routingRecenterMap: true,
+ routingPathFeature: null,
+ routingStartFeature: null,
+ routingEndFeature: null,
+ routingPointDrawControl: null,
+
+ routingStyle: {
+ strokeColor: "#0000FF",
+ strokeOpacity: 0.5,
+ strokeWidth: 5
+ },
+
+ clickControl: null,
+
+ routingProjection: new OpenLayers.Projection("EPSG:4326"),
+
+ initComponent : function() {
+ var defConfig = {
+ plain: true,
+ border: false
+ };
+
+ Ext.applyIf(this, defConfig);
+
+ this.startLocationField = new Ext.form.TextField({
+ fieldLabel: OpenLayers.i18n('A'),
+ name: 'start',
+ value: '47.25976,9.58423'
+ });
+
+ this.endLocationField = new Ext.form.TextField({
+ fieldLabel: OpenLayers.i18n('B'),
+ name: 'start',
+ value: '47.26117,9.59882'
+ });
+
+ this.items = [
+ {
+ layout: 'form',
+ border:false,
+ labelWidth: 10,
+ items: [
+ {
+ layout: 'column',
+ border: false,
+ defaults:{
+ layout:'form',
+ border:false,
+ labelWidth: 10
+ },
+ items:[
+ {
+ columnWidth:0.8,
+ defaults:{
+ anchor:'100%'
+ },
+ items: [
+ this.startLocationField
+ ]
+ },
+ {
+ columnWidth:0.2,
+ items: [
+ {
+ xtype:'button',
+ text: OpenLayers.i18n('Get'),
+ handler: function(button, event) {
+ this.routingPointDrawControl.type = 'GetStartPoint';
+ this.routingPointDrawControl.activate();
+ },
+ scope: this
+ }
+ ]
+ }
+ ]
+ },
+ {
+ layout: 'column',
+ border: false,
+ defaults:{
+ layout:'form',
+ border:false,
+ labelWidth: 10
+ },
+ items:[
+ {
+ columnWidth:0.8,
+ defaults:{
+ anchor:'100%'
+ },
+ items: [
+ this.endLocationField
+ ]
+ },
+ {
+ columnWidth:0.2,
+ items: [
+ {
+ xtype:'button',
+ text: OpenLayers.i18n('Get'),
+ handler: function(button, event) {
+ this.routingPointDrawControl.type = 'GetEndPoint';
+ this.routingPointDrawControl.activate();
+ },
+ scope: this
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ];
+
+ this.buttons = [
+ {
+ text: OpenLayers.i18n('Itinerary'),
+ handler: function() {
+ this.getItinerary();
+ },
+ scope: this
+ }
+ ];
+
+
+ GeoExt.ux.RoutingPanel.superclass.initComponent.call(this);
+ },
+
+ afterRender : function() {
+ this.proxy = new Ext.data.ScriptTagProxy({
+ url: 'to_be_replaced',
+ nocache: false
+ });
+ //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();
+ 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)
+ this.routingLayer = new OpenLayers.Layer.Vector("Routing");
+ this.map.addLayer(this.routingLayer);
+ this.routingPointDrawControl = new OpenLayers.Control.DrawFeature(this.routingLayer, OpenLayers.Handler.Point);
+ this.map.addControl(this.routingPointDrawControl);
+ this.routingPointDrawControl.events.on({ "featureadded": function(events) {
+ if (this.routingPointDrawControl.type == 'GetStartPoint') {
+ if (this.routingStartFeature) {
+ this.routingLayer.removeFeatures([this.routingStartFeature]);
+ }
+ this.routingStartFeature = events.feature;
+ var featureLocation = this.routingStartFeature.geometry;
+ featureLocation.transform(this.map.getProjectionObject(), this.routingProjection);
+ this.startLocationField.setValue(featureLocation.y + ',' + featureLocation.x);
+ }
+ if (this.routingPointDrawControl.type == 'GetEndPoint') {
+ if (this.routingEndFeature) {
+ this.routingLayer.removeFeatures([this.routingEndFeature]);
+ }
+ this.routingEndFeature = events.feature;
+ var featureLocation = this.routingEndFeature.geometry;
+ featureLocation.transform(this.map.getProjectionObject(), this.routingProjection);
+ this.endLocationField.setValue(featureLocation.y + ',' + featureLocation.x);
+ }
+ this.routingPointDrawControl.deactivate();
+ },
+ scope: this
+ });
+ },
+
+ getItinerary: function() {
+ this.routingStore = new Ext.data.Store({
+ proxy: this.proxy,
+ reader: new Ext.data.JsonReader({
+ root: 'route_summary',
+ fields: [
+ {
+ name: 'total_length'
+ }
+ ]
+
+ })
+ });
+
+ this.routingStore.on(
+ 'load', function(store) {
+ this.routingVersion = store.reader.jsonData.version;
+ this.routingStatus = store.reader.jsonData.status;
+ if (store.reader.jsonData.status_message) {
+ this.routingStatusMessage = store.reader.jsonData.status_message;
+ }
+ if (store.reader.jsonData.route_summary) {
+ this.routingRouteSummary = store.reader.jsonData.route_summary;
+ }
+ if (store.reader.jsonData.route_geometry) {
+ this.routingRouteGeometry = store.reader.jsonData.route_geometry;
+ }
+ if (store.reader.jsonData.route_instructions) {
+ this.routingRouteInstructions = store.reader.jsonData.route_instructions;
+ }
+ if (this.routingStatus == '0') {
+ this.drawRoute();
+ } else {
+ alert('No route found');
+ }
+ }, this
+ );
+ this.routingStore.load();
+ },
+
+ drawRoute: function() {
+ var pointList = [];
+ var newPoint = null;
+ //console.log(this.routingRouteGeometry.length);
+ for (var i = 0; i < this.routingRouteGeometry.length; i++) {
+ newPoint = new OpenLayers.Geometry.Point(this.routingRouteGeometry[i][1],
+ this.routingRouteGeometry[i][0]);
+ newPoint.transform(this.routingProjection,
+ this.map.getProjectionObject());
+ pointList.push(newPoint);
+ }
+
+ if (this.routingPathFeature) {
+ this.routingLayer.removeFeatures([this.routingPathFeature]);
+ }
+ this.routingPathFeature = new OpenLayers.Feature.Vector(
+ new OpenLayers.Geometry.LineString(pointList), null, this.routingStyle);
+
+ this.routingLayer.addFeatures([this.routingPathFeature]);
+ if (this.routingRecenterMap) {
+ this.map.zoomToExtent(this.routingPathFeature.geometry.bounds);
+ }
+ }
+
+});
+
+Ext.reg('gxux_routingpanel', GeoExt.ux.RoutingPanel);
\ No newline at end of file
More information about the Commits
mailing list