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
                        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) {
            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", 
                                        "<div style='font-size:.8em'>" +CableLineText_arr[id]  +"</div>",
                                        null, true, onPopupClose);
                feature.popup = popup;
            function onFeatureUnselect(feature) {
                feature.popup = null;

            function init() {
                map = new OpenLayers.Map({
                    div: "map",
                    projection: new OpenLayers.Projection("EPSG:4326"),
                    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                    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.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);
                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,
                    select: selectControl
                drawControls = {
                    point: new OpenLayers.Control.DrawFeature(lineLayer,
                    select: selectControl

                for(var key in drawControls) {


                    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) {
                } else {


Help me. Thanks!

  • This may help anyone look for that. Try using evt.xy, for location. It works for me:) – Reem Apr 14 '13 at 10:31
  • Would you please provide more detail of how to implement this? You can edit your answer to do so. – user3461 Apr 14 '13 at 12:00
  • please i want to know if this probleme was solved, i have the same probleme – zohit Oct 6 '14 at 22:03

The problem is solved. In function onFeatureSelect(feature) need change that string:

var lonLat = new OpenLayers.LonLat(ClickLon, ClickLat)/*.transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"))*/;


var lonlat = map.getLonLatFromPixel(map.getControlsByClass("OpenLayers.Control.MousePosition")[0].lastXy);

Ie obtain the coordinates of the cursor position.


it seemed to me as a little bit confused... try to use this example here.

still u insist the code above, paste the http://jsfiddle.net/ so i can write a solution for u...

i hope it helps you...

  • 1
    what fieddle.net? I need when I click on line at the point where I clicked, there show a pop-up. If slightly change the function onFeatureSelect and change "lonLat," to "feature.geometry.getBounds().getCenterLonLat()," getting this: youtube.com/watch?v=YH6TfsG8iXs&feature=youtu.be A popup window appears, not where I clicked! – dedoki Jul 3 '12 at 13:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.