title: Show pop-up when user clicked on the line
body: <p>Need to show a pop-up when user clicks on the line. Code as below but does not work:</p>
  
  <pre><code>        var ClickLon;
          var ClickLat;
  
          OpenLayers.Control.Click = 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.trigger
                      }, this.handlerOptions
                  );
              },
  
              trigger: function(e) {
                  var lonlat = map.getLonLatFromPixel(e.xy);
                  ClickLon = lonlat.lon;
                  ClickLat = lonlat.lat;
              }
  
          });
  
  
          function onPopupClose(evt) {
              selectControl.unselect(selectedFeature);
          }
          function onFeatureSelect(feature) {
              selectedFeature = feature;
              id = feature.id;
              alert(ClickLon);
              var lonLat = new OpenLayers.LonLat(ClickLon, ClickLat).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
  
              popup = new OpenLayers.Popup.FramedCloud("chicken",
                                      lonLat,
                                      null,
                                      "&lt;div style='font-size:.8em'&gt;" +CableLineText_arr[id]  +"&lt;/div&gt;",
                                      null, true, onPopupClose);
              feature.popup = popup;
              map.addPopup(popup);
          }
          function onFeatureUnselect(feature) {
              map.removePopup(feature.popup);
              feature.popup.destroy();
              feature.popup = null;
          }
  ...
  var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
  map.addLayer(lineLayer);
  map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path)); 
  
  var click = new OpenLayers.Control.Click();
      map.addControl(click);
      click.activate();
  
      selectControl = new OpenLayers.Control.SelectFeature(lineLayer,
               {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
  
      drawControls = {
                  polygon: new OpenLayers.Control.DrawFeature(lineLayer,
                              OpenLayers.Handler.Polygon),
                  select: selectControl
              };
  
              for(var key in drawControls) {
                  map.addControl(drawControls[key]);
              }
  </code></pre>
  
  <p>Map projection is EPSG:4326.</p>
  
  <p>Line drawing as:</p>
  
  <pre><code>var points = new Array(
          new OpenLayers.Geometry.Point(47, 32.24),
          new OpenLayers.Geometry.Point(45, 33),
          new OpenLayers.Geometry.Point(49, 35)
      );
  
      var line = new OpenLayers.Geometry.LineString(points);
      line.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
  
      var style = { 
          strokeColor: '#0000ff', 
          strokeOpacity: 0.5,
          strokeWidth: 5
      };
  
      var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
      alert(lineFeature.id);
      lineLayer.addFeatures([lineFeature]);
  </code></pre>
  
  <p>Trying to combine these two examples: <a href="http://openlayers.org/dev/examples/select-feature-openpopup.html" rel="nofollow noreferrer">http://openlayers.org/dev/examples/select-feature-openpopup.html</a> and <a href="http://openlayers.org/dev/examples/click.html" rel="nofollow noreferrer">http://openlayers.org/dev/examples/click.html</a></p>