I am attempting to handle a double mouse click event on OpenStreetMaps by utilizing the code below:
const map = new OpenLayers.Map("basicMap");
const mapnik = new OpenLayers.Layer.OSM();
const fromProjection = new OpenLayers.Projection("EPSG:4326");
// Transform from WGS 1984
const toProjection = new OpenLayers.Projection("EPSG:900913");
// to Spherical Mercator Projection
const position = new OpenLayers.LonLat(13.41,52.52).transform(fromProjection, toProjection);
const zoom = 15;
map.addLayer(mapnik);
map.setCenter(position, zoom );
const markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,
{
defaultHandlerOptions:
{
'single': true,
'double': true,
'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)
{
const lonlat = map.getLonLatFromViewPortPx(e.xy);
alert("clicked");
alert("Lat, Lon : " + lonlat.lat + ", " + lonlat.lng);
markers.addMarker(new OpenLayers.Marker(lonlat));
},
touchstart: function(e)
{
console.log();
},
touchend: function(e)
{
console.log();
},
handleSingle: function(e)
{
console.log();
}
});
const control = new OpenLayers.Control.Click();
map.addControl(control);
control.activate();
However, after conducting some tests, I noticed that the message "clicked" was not being displayed even though there were no errors in the console and the map was loading correctly.
Is there something incorrect in the above code? How can this issue be resolved?
Note: The Ionic framework is being used for this implementation.
Any assistance would be greatly appreciated.
Thank you.