geoext · bartvde · Apr 3, 2012 · Sep 18, 2012 · Sep 18, 2012 · Sep 18, 2012
diff --git a/examples/featuretip.html b/examples/featuretip.html
@@ -0,0 +1,29 @@
+<html>
+    <head>
+        <title>GeoExt Feature Tip Example</title>
+
+        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
+        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
+        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
+        <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/examples/shared/examples.css" />
+        <link rel="stylesheet" type="text/css" href="../resources/css/geoext-all.css" />
+        <script src="http://www.openlayers.org/api/2.11/OpenLayers.js"></script>
+        <script type="text/javascript" src="../lib/GeoExt.js"></script>
+
+        <script type="text/javascript" src="featuretip.js"></script>
+
+        <style type="text/css">
+            div#map {
+               width: 650px;
+               height: 400px;
+               position: relative;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Feature Tip Example</h1>
+        <p>Shows an Ext.Tip which is tied to a feature's geometry.
+        The js is not minified so it is readable. See <a href="featuretip.js">featuretip.js</a>.</p>
+        <div id="container"></div>
+    </body>
+</html>
diff --git a/examples/featuretip.js 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
@@ -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
@@ -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 <http://dev.sencha.com/deploy/dev/docs/?class=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();
+        }
+    }
+
+});