Plugin with action and output¶

This final example will modify the DrawBox plugin created previously to also display a pop-up window after the box has been drawn on the map.

1. Open the DrawBox.js file in a text editor.

2. Add an event listener to the DrawFeature control to display a pop-up containing the area of the box by replacing the existing control with the following code.

         control: new OpenLayers.Control.DrawFeature(this.boxLayer,
           OpenLayers.Handler.RegularPolygon, {
             handlerOptions: {
               sides: 4,
               irregular: true
             },
             eventListeners: {
               featureadded: this.displayPopup,
               scope: this
             }
           }
         )
   

3. Add the displayPopup function to the DrawBox.js file, which will create the output in the form of a GeoExt.Popup. Insert it before the raiseLayer function:

     displayPopup: function(evt) {
       this.removeOutput();
       this.addOutput({
         xtype: "gx_popup",
         title: "Feature info",
         location: evt.feature,
         map: this.target.mapPanel,
         width: 150,
         height: 75,
         html: "Area: " + evt.feature.geometry.getArea()
       });
     },
   

4. Add the dependency for the GeoExt.Popup in the top of the DrawBox.js file:

    * @require GeoExt/widgets/Popup.js
   

5. Open app.js and add an outputTarget for the DrawBox tool, in between id: "drawbox", and actionTarget: "map.tbar":

       }, {
           ptype: "myapp_drawbox",
           id: "drawbox",
           outputTarget: "map",   
           actionTarget: "map.tbar"
       }, {
   

6. Restart the SDK and reload the application in the browser. Test the functionality by drawing boxes. After drawing a box there will now be a pop-up window at the feature’s location containing the area of the box drawn. The units are in square meters, as the geometry is using Google Web Mercator projection.

   

   Popup showing area of drawn box

Download the DrawBox.js and app.js files created in this section. If you also download BoxInfo.js from the previous section, you will have all the files to recreate this application.