question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ol.interaction.DragBox Render does not work in latest openlayers

See original GitHub issue

Before 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:closed
  • Created 2 years ago
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
M393commented, Jul 15, 2021

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

0reactions
ahocevarcommented, Jul 15, 2021

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.

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found