Show pop-up when user clicked on the line - popup

Question

Need to show a pop-up when user clicks on the line. Code as below but does not work:
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,
"<div style='font-size:.8em'>" +CableLineText_arr[id] +"</div>",
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]);
}
Map projection is EPSG:4326.
Line drawing as:
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]);
Trying to combine these two examples: http://openlayers.org/dev/examples/select-feature-openpopup.html and http://openlayers.org/dev/examples/click.html

Answer 1

I do not see the place where you activate your control.SelectFeature.