How to change this example ( http://openlayers.org/dev/examples/select-feature-openpopup.html ) so that when the user clicks on a line (feature) pop-up display where the user clicked? A few days trying to do it, does not work.
My code (alert doesnt show when i clicked on feature (line)):
<script type="text/javascript">
var lat=48.5;
var lon=32.24;
var zoom=14;
var map;
var drawControls, selectControl, selectedFeature;
var CableLineText_arr = Array();
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);
lonlat.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
alert("You clicked near " + lonlat.lat + " N, " +
+ lonlat.lon + " E");
ClickLon = lonlat.lon;
ClickLat = lonlat.lat;
}
});
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
id = feature.id;
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;
}
function init() {
map = new OpenLayers.Map({
div: "map",
projection: new OpenLayers.Projection("EPSG:4326"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls:[
new OpenLayers.Control.MousePosition()
],
units: "m",
allOverlays: true
});
var osm = new OpenLayers.Layer.OSM();
var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false});
map.addLayers([osm, gmap]);
//
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayer(lineLayer);
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));
var style = {
strokeColor: 'blue',
strokeOpacity: 5.5,
strokeWidth: 5
};
var points = new Array(
new OpenLayers.Geometry.Point(32, 47.5), new OpenLayers.Geometry.Point(32.2, 48.5), new OpenLayers.Geometry.Point(33, 49)
);
var line = new OpenLayers.Geometry.LineString(points);
line.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
lineLayer.addFeatures([lineFeature]);
CableLineText_arr[lineFeature.id]='Имя: test<br>Комментарий: for testing map';
selectControl = new OpenLayers.Control.SelectFeature(lineLayer,
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
/*drawControls = {
polygon: new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Polygon),
select: selectControl
};*/
drawControls = {
point: new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Point),
select: selectControl
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
//
map.addControls(
[
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Click
]
);
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter (lonLat, zoom);
}
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
</script>
Help me. Thanks!
Best Answer
The problem is solved. In function onFeatureSelect(feature) need change that string:
to:
Ie obtain the coordinates of the cursor position.