[Commits] r2537 - in sandbox/cmoullet/ux/Profile: examples lib/GeoExt.ux
commits at geoext.org
commits at geoext.org
Mon Dec 27 06:44:15 CET 2010
Author: cmoullet
Date: 2010-12-27 06:44:14 +0100 (Mon, 27 Dec 2010)
New Revision: 2537
Modified:
sandbox/cmoullet/ux/Profile/examples/profile.html
sandbox/cmoullet/ux/Profile/examples/profile.js
sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileAction.js
sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileBox.js
Log:
Refactor, document and add panel rendering
Modified: sandbox/cmoullet/ux/Profile/examples/profile.html
===================================================================
--- sandbox/cmoullet/ux/Profile/examples/profile.html 2010-12-26 14:49:56 UTC (rev 2536)
+++ sandbox/cmoullet/ux/Profile/examples/profile.html 2010-12-27 05:44:14 UTC (rev 2537)
@@ -37,5 +37,6 @@
<p style="margin-bottom:15px;">See <a href="profile.js">profile.js</a> for the source code.</p>
<div id="mapppanel"></div>
+<div id="profilepanel"></div>
</body>
</html>
\ No newline at end of file
Modified: sandbox/cmoullet/ux/Profile/examples/profile.js
===================================================================
--- sandbox/cmoullet/ux/Profile/examples/profile.js 2010-12-26 14:49:56 UTC (rev 2536)
+++ sandbox/cmoullet/ux/Profile/examples/profile.js 2010-12-27 05:44:14 UTC (rev 2537)
@@ -5,25 +5,42 @@
var map = new OpenLayers.Map();
- var vector = new OpenLayers.Layer.Vector("Profile Line Layer", {displayInLayerSwitcher: false});
-
var profileAction = new GeoExt.ux.Profile({
map: map,
- text: OpenLayers.i18n('Profile'),
- vector: vector,
profileService: 'api.geo.admin.ch'
});
+ var profileActionPanel = new GeoExt.ux.Profile({
+ text: OpenLayers.i18n('Profile (show in panel)'),
+ map: map,
+ profileService: 'api.geo.admin.ch',
+ renderTo: 'profilepanel',
+ profileWidth: 600,
+ profileHeight: 400,
+ styleMarker: {
+ strokeColor: "#FFFF00",
+ strokeOpacity: 0.85,
+ strokeWidth: 3,
+ strokeLinecap: "round",
+ strokeDashstyle: "solid",
+ pointRadius: 5,
+ pointerEvents: "visiblePainted",
+ cursor: "inherit"
+ }
+
+ });
+
var mapPanel = new GeoExt.MapPanel({
renderTo: "mapppanel",
width: 800,
height: 350,
map: map,
layers: [new OpenLayers.Layer.WMS("Global Imagery",
- "http://vmap0.tiles.osgeo.org/wms/vmap0",
- {layers: "basic"}), vector],
+ "http://vmap0.tiles.osgeo.org/wms/vmap0",
+ {layers: "basic"})],
center: [7.5, 47],
zoom: 8,
- tbar: [profileAction]
+ tbar: [profileAction],
+ bbar: [profileActionPanel]
});
});
\ No newline at end of file
Modified: sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileAction.js
===================================================================
--- sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileAction.js 2010-12-26 14:49:56 UTC (rev 2536)
+++ sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileAction.js 2010-12-27 05:44:14 UTC (rev 2537)
@@ -1,3 +1,5 @@
+/*global GeoExt:true, OpenLayers: true, Ext: true */
+
/**
* Copyright (c) 2008-2009 The Open Source Geospatial Foundation
*
@@ -9,12 +11,20 @@
Ext.namespace("GeoExt.ux");
/*
- * @requires GeoExt/widgets/Action.js
+ * @include OpenLayers/Handler/Path.js
+ * @include OpenLayers/Layer/Vector.js
+ * @include OpenLayers/Feature/Vector.js
+ * @include OpenLayers/Format/GeoJSON.js
+ * @include OpenLayers/Projection.js
+ * @include OpenLayers/Style.js
+ * @include Profile/lib/GeoExt.ux/ProfileBox.js
+ * @include Profile/lib/GeoExt.ux/ProfileControl.js
*/
/** api: (define)
* module = GeoExt.ux
* class = Profile
+ * base_link = `Ext.Action <http://extjs.com/deploy/dev/docs/?class=Ext.Action>`_
*/
/** api: constructor
@@ -25,56 +35,87 @@
*/
GeoExt.ux.Profile = Ext.extend(Ext.Action, {
+ /** api: config[map]
+ * ``OpenLayers.Map`` A configured map
+ */
+
/** api: config[profileService]
- * ``String`` Name of the profile service. Optional.
+ * ``String`` Name of the profile service. Currently supported: 'api.geo.admin.ch'
*/
- /* profile information
- * Multidimensional array with x columns of "samples" lines
- * column 0: distance from start
- * column 1: easting
- * column 2: northing
- * column 3 to n: elevation information of the cooresponding elevation models
+ /** api: config[vector]
+ * ``OpenLayers.Layer.Vector`` Optional. Vector layer for drawing the profile line and the marker
*/
- profileData: null,
- profileEpsg: null,
+ /** api: config[profileWidth]
+ * ``Number`` Optional. Width of the profile, default: 800
+ */
+ /** api: config[profileHeight]
+ * ``Number`` Optional. Height of the profile, default: 600
+ */
+
+ /** api: config[samples]
+ * ``Number`` Optional. number of elevation points used to create the profile, default: 200
+ */
+
+ /** api: config[renderTo]
+ * ``String`` Optional. Specify the id of the element, a DOM element or an existing Element that a profile panel will be rendered into.
+ */
+
+ /** api: config[styleMarker]
+ * ``Object`` Optional. Object containing the marker style.
+ */
+
+ _profileData: null,
+
_profileWindow: null,
+ _profilePanel: null,
+
+ _profileEpsg: null,
+
+ _profileModels: null,
+
_drawControl: null,
/** private: method[constructor]
*/
constructor: function(config) {
+ Ext.apply(this, config,
+ {samples: 200,
+ profileWidth: 800,
+ profileHeight: 600,
+ text: OpenLayers.i18n('Profile'),
+ styleMarker: new OpenLayers.Style(
+ OpenLayers.Feature.Vector.style["default"]).defaultStyle});
+
+ if (!this.vector) {
+ this.vector = new OpenLayers.Layer.Vector("Profile", {displayInLayerSwitcher: false});
+ this.map.addLayer(this.vector);
+ }
+
this._drawControl = new OpenLayers.Control.ProfileControl(
- config.vector, OpenLayers.Handler.Path
+ this.vector, OpenLayers.Handler.Path
);
this._drawControl.events.register('featureadded', this, function(event) {
this.createProfile(event);
});
+ this.map.addControl(this._drawControl);
- this.profileService = config.profileService;
- this.profileModels = config.profileModels;
-
- this.map = config.map;
-
- this.vector = config.vector;
-
- this.samples = config.samples || 200;
-
- config.map.addControl(this._drawControl);
-
config = Ext.apply({
allowDepress: false,
- text: OpenLayers.i18n('Profile'),
+ text: this.text,
handler: function() {
if (this._profileWindow) {
this._profileWindow.close();
}
+ if (this._profilePanel) {
+ this._profilePanel.destroy();
+ }
if (!this._drawControl.active) {
this._drawControl.activate();
} else {
@@ -89,61 +130,81 @@
createProfile: function(event) {
if (this.profileService == 'api.geo.admin.ch') {
- this.profileEpsg = "EPSG:21781";
+ this._profileEpsg = "EPSG:21781";
var formatter = new OpenLayers.Format.GeoJSON({internalProjection: this.map.getProjectionObject(),
- externalProjection: new OpenLayers.Projection(this.profileEpsg)});
+ externalProjection: new OpenLayers.Projection(this._profileEpsg)});
var geometryGeoJSON = formatter.write(event.feature.geometry);
- if (!this.profileModels) {
- this.profileModels = 'DTM25';
+ if (!this._profileModels) {
+ this._profileModels = 'DTM25';
}
Ext.ux.JSONP.request("http://api.geo.admin.ch/profile.json", {
callbackKey: "cb",
params: {
nb_points: this.samples,
geom: geometryGeoJSON,
- elevation_models: this.profileModels
+ elevation_models: this._profileModels
},
scope: this,
callback: function(response) {
// Define the size of the array
- var models = this.profileModels.split(',');
+ var models = this._profileModels.split(',');
var arraySize = parseInt(3 + models.length, 10);
- this.profileData = [arraySize];
+ this._profileData = [arraySize];
for (var k = 0; k < arraySize; k++) {
- this.profileData[k] = [this.samples];
+ this._profileData[k] = [this.samples];
}
for (var i = 0; i < response.profile.length; i++) {
- this.profileData[0][i] = response.profile[i].dist;
- this.profileData[1][i] = response.profile[i].easting;
- this.profileData[2][i] = response.profile[i].northing;
- for (j = 0; j < models.length; j++) {
- this.profileData[j + 3][i] = response.profile[i].alts[models[j]];
+ this._profileData[0][i] = response.profile[i].dist;
+ this._profileData[1][i] = response.profile[i].easting;
+ this._profileData[2][i] = response.profile[i].northing;
+ for (var j = 0; j < models.length; j++) {
+ this._profileData[j + 3][i] = response.profile[i].alts[models[j]];
}
}
- this.showProfileWindow();
+ this.showProfile();
}
});
}
},
- showProfileWindow: function() {
- this._profileWindow = new Ext.Window({
- width:800,
- height:600,
- items: new GeoExt.ux.ProfileBox({
- map: this.map,
- profileData: this.profileData,
- feature: this._drawControl.digitizedFeature,
- models: this.profileModels.split(','),
- vector: this.vector,
- profileEpsg: this.profileEpsg,
- width: 785,
- height: 570
- })
- });
- this._profileWindow.on('close', function() {
- this._drawControl.cleanFeature();
- }, this);
- this._profileWindow.show();
+ showProfile: function() {
+ if (this.renderTo) {
+ this._profilePanel = new Ext.Panel({
+ renderTo: this.renderTo,
+ width:this.profileWidth,
+ height:this.profileHeight,
+ items: new GeoExt.ux.ProfileBox({
+ map: this.map,
+ profileData: this._profileData,
+ feature: this._drawControl.digitizedFeature,
+ profileModels: this._profileModels.split(','),
+ vector: this.vector,
+ profileEpsg: this._profileEpsg,
+ width: this.profileWidth - 15,
+ height: this.profileHeight - 15,
+ styleMarker: this.styleMarker
+ })
+ });
+ } else {
+ this._profileWindow = new Ext.Window({
+ width:this.profileWidth,
+ height:this.profileHeight,
+ items: new GeoExt.ux.ProfileBox({
+ map: this.map,
+ profileData: this._profileData,
+ feature: this._drawControl.digitizedFeature,
+ profileModels: this._profileModels.split(','),
+ vector: this.vector,
+ profileEpsg: this._profileEpsg,
+ width: this.profileWidth - 15,
+ height: this.profileHeight - 30,
+ styleMarker: this.styleMarker
+ })
+ });
+ this._profileWindow.on('close', function() {
+ this._drawControl.cleanFeature();
+ }, this);
+ this._profileWindow.show();
+ }
}
});
Modified: sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileBox.js
===================================================================
--- sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileBox.js 2010-12-26 14:49:56 UTC (rev 2536)
+++ sandbox/cmoullet/ux/Profile/lib/GeoExt.ux/ProfileBox.js 2010-12-27 05:44:14 UTC (rev 2537)
@@ -1,3 +1,21 @@
+/*global GeoExt:true, OpenLayers: true, Ext: true */
+
+/**
+ * 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');
+
+/*
+ * @include OpenLayers/Geometry/Point.js
+ * @include OpenLayers/Projection.js
+ * @include OpenLayers/Feature/Vector.js
+ */
+
/** api: (define)
* module = GeoExt.ux
* class = ProfileBox
@@ -3,27 +21,50 @@
* base_link = `Ext.BoxComponent <http://extjs.com/deploy/dev/docs/?class=Ext.BoxComponent>`_
*/
-Ext.namespace('GeoExt.ux');
+/** api: constructor
+ * .. class:: ProfileBox(config)
+ *
+ * Creates a Ext.BoxComponent containing the profile drawn with `JQPlot <http://www.jqplot.com/>`_
+ *
+ */
GeoExt.ux.ProfileBox = Ext.extend(Ext.BoxComponent, {
+
/** api: config[map]
* ``OpenLayers.Map`` A configured map
*/
- /** private: property[map]
- * ``OpenLayers.Map`` The map object.
- */
map: null,
+ /** api: config[vector]
+ * ``OpenLayers.Layer.Vector`` Optional. Vector layer for drawing the profile line and the marker
+ */
vector: null,
+ /** api: config[profileData]
+ * ``Array`` Bidimensional array with x columns of "samples" lines
+ *
+ * Array contents:
+ * column 0: distance from start
+ * column 1: easting
+ * column 2: northing
+ * column 3 to n: elevation information of the coresponding elevation models
+ */
+ profileData: null,
+
+ /** api: config[profileEpsg]
+ * ``String`` EPSG code of the profile service (for example: EPSG:21781)
+ */
+ profileEpsg: null,
+
+ /** api: config[profileModels]
+ * ``String`` Comma separated list of profile models
+ */
+ profileModels: null,
+
feature: null,
marker: null,
- profileData: null,
+ styleMarker: null,
- profileEpsg: null,
-
- models: null,
-
jqueryDiv: null,
@@ -39,7 +80,6 @@
GeoExt.ux.ProfileBox.superclass.initComponent.call(this);
},
- // Overriding superclass template method
afterRender : function() {
this.addClass('geoext-ux-profilebox');
@@ -52,7 +92,7 @@
this.on('resize', this.handleResize, this);
this.drawProfile();
- // Call superclass
+
GeoExt.ux.ProfileBox.superclass.afterRender.apply(this, arguments);
},
@@ -75,7 +115,7 @@
);
this.deleteMarker();
- this.marker = new OpenLayers.Feature.Vector(pointProj);
+ this.marker = new OpenLayers.Feature.Vector(pointProj, {}, this.styleMarker);
this.vector.addFeatures([this.marker]);
},
@@ -86,7 +126,6 @@
},
drawProfile: function() {
-
$.jqplot.config.enablePlugins = true;
var maxX = 0;
@@ -107,7 +146,7 @@
this.realmaxX = maxX;
this.realmaxY = maxY;
jQueryArray.push(jQueryData);
- seriesArray.push({label: this.models[i]});
+ seriesArray.push({label: this.profileModels[i]});
}
if (maxX < 10) {
@@ -133,7 +172,6 @@
maxY = Math.round((maxY + 5000) / 10000) * 10000;
}
-
var plot1 = $.jqplot(this.jqueryDiv.id, jQueryArray, {
seriesDefaults:{neighborThreshold:0, showMarker: false},
series: seriesArray,
@@ -169,6 +207,7 @@
plot1.profileBox = this;
$("#" + this.jqueryDiv.id).bind("jqplotClick", function(ev, gridpos, datapos, neighbor, plot) {
+ plot.profileBox.deleteMarker();
if (plot.profileBox.realmaxX > datapos.xaxis) {
// Get the position
for (var i = 0; i < plot.profileBox.profileData[0].length; i++) {
@@ -177,11 +216,8 @@
var northing = plot.profileBox.profileData[2][i];
plot.profileBox.drawMarker(easting, northing);
break;
- } else {
- plot.profileBox.deleteMarker();
}
}
-
}
});
}
More information about the Commits
mailing list