JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map"></div>
CSS
.customControl{
left: 40px;
background-color: red;
padding:5px;
}
#map {
width:100%;
height:512px;
}
JavaScript
// https://github.com/openlayers/openlayers/pull/590
OpenLayers.Control.prototype.keepEvents = function(div) {
this.keepEventsDiv = new OpenLayers.Events(this, div, null, true);
// IN THIS CASE triggerButton IS NOT NECESSARY
var triggerButton = function (evt) {
var element = OpenLayers.Event.element(evt),
buttonclick = this.map.events &&
this.map.events.extensions &&
this.map.events.extensions.buttonclick;
if (element && buttonclick) {
element = buttonclick.getPressedButton(element);
if (element && OpenLayers.Element.hasClass(element, "olButton")) {
buttonclick.buttonClick(evt);
}
}
};
var listeners = {
"mousedown": function (evt) {
this.mousedown = true;
triggerButton(evt);
OpenLayers.Event.stop(evt, true);
},
"mousemove": function (evt) {
if (this.mousedown) {
OpenLayers.Event.stop(evt, true);
}
},
"mouseup": function (evt) {
if (this.mousedown) {
this.mousedown = false;
triggerButton(evt);
OpenLayers.Event.stop(evt, true);
}
},
"click": function (evt) {
var element = OpenLayers.Event.element(evt);
triggerButton(evt);
OpenLayers.Event.stop(evt, true);
},
"mouseout": function (evt) {
this.mousedown = false;
},
"dblclick": function (evt) {
var element = OpenLayers.Event.element(evt);
triggerButton(evt);
OpenLayers.Event.stop(evt, true);
},
"touchstart": function (evt) {
OpenLayers.Event.stop(evt, true);
},
scope: this
};
this.keepEventsDiv.on(listeners);
};
var customControl = OpenLayers.Class(OpenLayers.Control, {
initialize :...