diff --git a/examples/featuretip.html b/examples/featuretip.html new file mode 100644 index 00000000..6f9e91e7 --- /dev/null +++ b/examples/featuretip.html @@ -0,0 +1,29 @@ + + + GeoExt Feature Tip Example + + + + + + + + + + + + + + +

Feature Tip Example

+

Shows an Ext.Tip which is tied to a feature's geometry. + The js is not minified so it is readable. See featuretip.js.

+
+ + diff --git a/examples/featuretip.js b/examples/featuretip.js new file mode 100644 index 00000000..e22327e7 --- /dev/null +++ b/examples/featuretip.js @@ -0,0 +1,57 @@ +/** + * Copyright (c) 2008-2012 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. + */ + +/** api: example[featuretip] + * Feature Tip + * ------------- + * Display a tip tied to the location of a feature. + */ + +var mapPanel, featureTip; + +Ext.onReady(function() { + + // create a vector layer, add a feature into it + var vectorLayer = new OpenLayers.Layer.Vector("vector"); + var feature = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Point(-45, 5) + ); + vectorLayer.addFeatures(feature); + + // create Ext window including a map panel + var mapwin = new Ext.Window({ + layout: "fit", + title: "Map", + closeAction: "hide", + width: 650, + height: 356, + x: 50, + y: 100, + items: { + xtype: "gx_mappanel", + region: "center", + layers: [ + new OpenLayers.Layer.WMS( + "OpenLayers WMS", + "http://vmap0.tiles.osgeo.org/wms/vmap0", + {layers: 'basic'} ), + vectorLayer + ] + } + }); + mapwin.show(); + mapPanel = mapwin.items.get(0); + var bogusMarkup = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."; + featureTip = new GeoExt.FeatureTip({ + location: feature, + width: 100, + map: mapPanel.map, + html: bogusMarkup + }); + featureTip.show(); +}); diff --git a/lib/GeoExt.js b/lib/GeoExt.js index 64ff68f2..192d9c46 100644 --- a/lib/GeoExt.js +++ b/lib/GeoExt.js @@ -96,6 +96,7 @@ "GeoExt/widgets/tips/SliderTip.js", "GeoExt/widgets/tips/LayerOpacitySliderTip.js", "GeoExt/widgets/tips/ZoomSliderTip.js", + "GeoExt/widgets/tips/FeatureTip.js", "GeoExt/widgets/tree/LayerNode.js", "GeoExt/widgets/tree/TreeNodeUIEventMixin.js", "GeoExt/plugins/TreeNodeComponent.js", diff --git a/lib/GeoExt/widgets/tips/FeatureTip.js b/lib/GeoExt/widgets/tips/FeatureTip.js new file mode 100644 index 00000000..e487d4e6 --- /dev/null +++ b/lib/GeoExt/widgets/tips/FeatureTip.js @@ -0,0 +1,102 @@ +/** + * Copyright (c) 2008-2012 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. + */ + +/** api: (define) + * module = GeoExt + * class = FeatureTip + * base_link = `Ext.Tip `_ + */ +Ext.namespace("GeoExt"); + +/** api: example + * Sample code to create a feature tip: + * + * .. code-block:: javascript + * + * var bogusMarkup = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."; + * var featureTip = new GeoExt.FeatureTip({ + * location: feature, + * width: 100, + * map: mapPanel.map, + * html: bogusMarkup + * }); + * featureTip.show(); + */ + +/** api: constructor + * .. class:: FeatureTip(config) + * + * Create a tip displaying at the location of a feature. + */ +GeoExt.FeatureTip = Ext.extend(Ext.Tip, { + + /** api: config[map] + * ``OpenLayers.Map`` + */ + map: null, + + /** api: config[location] + * ``OpenLayers.Feature.Vector`` + */ + location: null, + + /** private: method[initComponent] + * Initializes the feature tip. + */ + initComponent: function() { + var centroid = this.location.geometry.getCentroid(); + this.location = new OpenLayers.LonLat(centroid.x, centroid.y); + this.map.events.on({ + "move" : this.show, + scope : this + }); + GeoExt.FeatureTip.superclass.initComponent.call(this); + }, + + /** private: method[beforeDestroy] + * Cleanup events before destroying the feature tip. + */ + beforeDestroy: function() { + this.map.events.un({ + "move" : this.show, + scope : this + }); + GeoExt.FeatureTip.superclass.beforeDestroy.call(this); + }, + + /** private: method[getPosition] + * Get the position of the feature in pixel space. + * + * :returns: ``Array`` The position of the feature in pixel space or + * null if the feature is not visible in the map. + */ + getPosition: function() { + if (this.map.getExtent().containsLonLat(this.location)) { + var locationPx = this.map.getPixelFromLonLat(this.location), + mapBox = Ext.fly(this.map.div).getBox(true), + y = locationPx.y + mapBox.y, + x = locationPx.x + mapBox.x; + return [x, y]; + } else { + return null; + } + }, + + /** api: method[show] + * Show the feature tip. + */ + show: function() { + var position = this.getPosition(); + if (position !== null) { + this.showAt(position); + } else { + this.hide(); + } + } + +});