ol.interaction.DragBox Render does not work in latest openlayers
See original GitHub issueBefore I had code like below. This does not work in latest Openlayers. this.boxInteraction.box_ is undefined
/* Flag indicating whether the postcompose listener should raw the "mask" on the map. */
this.drawMask = false;
/* Create a drag box interaction that sets drawMask to true n "boxstart" and sets drawMask to false on "boxend". */
this.boxInteraction = new ol.interaction.DragBox({
condition: ol.events.condition.shiftKeyOnly,
className: 'ol-zoombox'
});
this.boxInteraction.on('boxstart', function (e) {
me.drawMask = true;
});
this.boxInteraction.on('boxend', function (e) {
me.drawMask = false;
var map = me.map;
var view = me.map.getView();
var extent = e.target.getGeometry().getExtent();
var size = map.getSize();
var resolution = view.getConstrainedResolution(view.getResolutionForExtent(extent, size));
var center = ol.extent.getCenter(extent);
if (view.constrainCenter && typeof view.constrainCenter !== 'undefined') center = view.constrainCenter(center);
view.animate({
resolution: resolution,
center: center,
duration: 200,
easing: ol.easing.easeOut
});
});
/* ****** ERROR ON LINE BELOW ****** */
if (typeof Object.getPrototypeOf(this.boxInteraction.box_) === 'undefined') {
Object.setPrototypeOf(this.boxInteraction.box_, Object.getOwnPropertyNames(Object.getPrototypeOf(this.boxInteraction.box_)));
}
Object.getPrototypeOf(this.boxInteraction.box_).render_ = function () {
var startPixel = this.startPixel_;
var endPixel = this.endPixel_;
var px = 'px';
var style = this.element_.style;
style.left = Math.min(startPixel[0], endPixel[0]) + px;
style.top = Math.min(startPixel[1], endPixel[1]) + px;
style.width = Math.abs(endPixel[0] - startPixel[0]) + px;
style.height = Math.abs(endPixel[1] - startPixel[1]) + px;
if (this.map_ && this.startPixel_ && this.endPixel_) {
this.map_.render();
}
};
Issue Analytics
- State:
- Created 2 years ago
- Comments:12 (6 by maintainers)
Top Results From Across the Web
Openlayers 3 : Interaction DragBox not working
In Openlayers v3, you HAVE TO set a style in the interaction, like this : var dragBox = new ol.interaction.DragBox({ condition ...
Read more >OpenLayers v7.2.2 API - Class: DragBox
A function that takes an MapBrowserEvent and returns a boolean to indicate whether that event should be handled. Default is ol/events/condition~ ...
Read more >OpenLayers v7.2.2 API - Module: ol/interaction/DragBox
A function that takes a MapBrowserEvent and two Pixel s to indicate whether a boxend event should be fired. Default is true if...
Read more >ol/interaction/DragBox.DragBoxEvent
ol /interaction/DragBox.DragBoxEvent. Events emitted by DragBox instances are instances of this type. ... Triggered on drag when box is active.
Read more >ol/interaction/Pointer~PointerInteraction
If handleDownEvent is defined and it returns true this function will not be called ... Returns the current number of pointers involved in...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
If you can’t use modules directly in your project you can make your own custom build which will also be a lot smaller. See https://github.com/phpmyadmin/phpmyadmin/pull/16959 for an example
So, for everyone wanting to use private members at their own risk: use the ol package instead of the legacy build, then you won’t run into this issue. No-one should be using the legacy build in production anyway.