[SOLVED] How do I use a variable in an openlayers button?

How do I use a variable in an openlayers button?

I've got this button:

function initMap() {
map.addControl(zoomToExtentControl);
};

zoomToExtentControl = new ol.control.ZoomToExtent({
  extent: routeExtent,
  className: 'custom-zoom-extent',
  label: 'Z'
});

routeExtent is defined in globals.js as

var routeExtent = [-1013450.0281739295, 3594671.9021477713, 6578887.117336057, 10110775.689402476];

Elsewhere within initMap a new value for routeExtent is calculated, but the button only zooms to the preset extent defined in globals.js, how do I change this?

Solution

If you have access to ZoomToExtent class instance you can change the extent property directly. If don’t have access to it, you can access it through the map controls array and again, change the extent property directly. Here is a tested example:

const zoomToExtentControl = new ZoomToExtent({
  extent: [
    -1013450.0281739295,
    3594671.9021477713,
    6578887.117336057,
    10110775.689402476
  ],
  label: "Z"
});


map.addControl(zoomToExtentControl);

zoomToExtentControl.extent = [0, 0, 0, 0];

Let me know if this answers your question.