Openlayers 2> click event doesn't doesn't trigger when using with drawfeature line

227
May 06, 2018, at 9:39 PM

Using Openlayers 2 drawline feature exemple I try to get a "click' event triggered each time you click to create a new line segment. The code works well without drawfeature line, but as soon as you add it, click event is not detected. It seems that click events are not propagated ! see code bellow pretty basic

            <!DOCTYPE html>
            <html>
                <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
                    <meta name="apple-mobile-web-app-capable" content="yes">
                    <title>Draw Feature Example</title>
                    <link rel="stylesheet" href="files/style.css" type="text/css">
                    <link rel="stylesheet" href="files/style(1).css" type="text/css">
                    <style type="text/css">
                        #controlToggle li {
                            list-style: none;
                        }
                        p {
                            width: 512px;
                        }
                        /* avoid pink tiles */
                        .olImageLoadError {
                            background-color: transparent !important;
                        }
                    </style>
                    <script src="files/OpenLayers.js"></script>
                    <script type="text/javascript">
                        var map, drawControls;
                        //*****************************************************************************//
                        // An OpenLayer's control class for capturing click events...
                        //*****************************************************************************//
                        OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                            defaultHandlerOptions: {
                                'single': true,
                                'double': true,
                                'pixelTolerance': 0,
                                'stopSingle': false,
                                'stopDouble': false
                            },
                            handleRightClicks: true,
                            initialize: function (options) {
                                this.handlerOptions = OpenLayers.Util.extend(
                                    {}, this.defaultHandlerOptions
                                );
                                OpenLayers.Control.prototype.initialize.apply(
                                    this, arguments
                                );
                                this.handler = new OpenLayers.Handler.Click(
                                    this, this.eventMethods, this.handlerOptions
                                );
                            },
                                CLASS_NAME: "OpenLayers.Control.Click"
                        });
                        //*****************************************************************************//
                        //*****************************************************************************//
                        function init(){
                            map = new OpenLayers.Map('map');
                            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
                            var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
                            map.addLayers([wmsLayer, lineLayer]);
                            map.addControl(new OpenLayers.Control.MousePosition());
                            var line = new OpenLayers.Control.DrawFeature(lineLayer,
                                OpenLayers.Handler.Path,                    
                                {
                                    single: true,
                                    double: true,
                                    stopDouble: false,
                                    stopSingle: false
                                });

                            var lineClick = new OpenLayers.Control.Click({eventMethods:{
                                'click' : function (e) {
                                        console.log('CLICK !');
                                    },
                                'dblclick' : function (e) {
                                    console.log('DBCLICK !');
                                    }   
                                }
                            }); 
                            map.addControl(lineClick);
                            map.addControl(line);
                            line.activate();
                            lineClick.activate();
                            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
                        }
                    </script>
                </head>
                <body onload="init()">
                    <h1 id="title">OpenLayers 2 Draw Feature Example</h1>
                    <div id="map" class="smallmap"></div>
                    <div id="docs">
                        <p>With the line drawing control active, click on the map to add the points that make up your line.
                        Double-click to finish drawing.</p>
                    </div>
                </body>
            </html>
Rent Charter Buses Company
READ ALSO
Run serially svg items

Run serially svg items

I have the SVG Ellment, and I want them to start one by one from the first to the lastHow can this be realized? Here's the code:

177
React Native Chat Using Mongodb

React Native Chat Using Mongodb

I'm pretty new to react native and I am currently developing a chat/forum applicationRecently, I have been having some trouble trying to create a direct message section for my app

341
Node-Crawler - How to show the normal characters data?

Node-Crawler - How to show the normal characters data?

I'm trying to get some data from a website containing html with nodejs

179
How to override Google setCenter properly?

How to override Google setCenter properly?

I need to log lat, long params sent to Google map setCenter, my attempt was like this:

163