Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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!

share|improve this question
    
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 at 22:03

2 Answers 2

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"))*/;

to:

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

Ie obtain the coordinates of the cursor position.

share|improve this answer

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...

share|improve this answer
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

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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