plugins_zoomBtn.mjs

/**
### Zoom Btn Plugin
@module /plugins/zoomBtn
*/

/**
@function zoomBtn

@description
Adds zoom in and zoom out buttons to the mapview.

@param {Object} plugin The plugin configuration object.
@param {Object} mapview The mapview object.
@property {ol.Map} mapview.Map The OpenLayers map object.
@property {Object} mapview.locale The locale object of the mapview.
@property {number} locale.maxZoom The maximum zoom level allowed.
@property {number} locale.minZoom The minimum zoom level allowed.
*/
export function zoomBtn(plugin, mapview) {

  const btnColumn = document.getElementById('mapButton');

  // the btnColumn element only exist in the default mapp view.
  if (!btnColumn) return;

  // Add zoomIn button.
  const btnZoomIn = btnColumn.appendChild(mapp.utils.html.node`
    <button
      id="btnZoomIn"
      .disabled=${mapview.Map.getView().getZoom() >= mapview.locale.maxZoom}
      title=${mapp.dictionary.toolbar_zoom_in}
      onclick=${(e) => {
        const z = parseInt(mapview.Map.getView().getZoom() + 1);
        mapview.Map.getView().setZoom(z);
        e.target.disabled = z >= mapview.locale.maxZoom;
      }}><div class="mask-icon add">`)

  // Add zoomOut button.
  const btnZoomOut = btnColumn.appendChild(mapp.utils.html.node`
    <button
      id="btnZoomOut"
      .disabled=${mapview.Map.getView().getZoom() <= mapview.locale.minZoom}
      title=${mapp.dictionary.toolbar_zoom_out}
      onclick=${(e) => {
        const z = parseInt(mapview.Map.getView().getZoom() - 1);
        mapview.Map.getView().setZoom(z);
        e.target.disabled = z <= mapview.locale.minZoom;
      }}><div class="mask-icon remove">`)

  // changeEnd event listener for zoom button
  mapview.Map.getTargetElement()
    .addEventListener('changeEnd', () => {
      const z = mapview.Map.getView().getZoom();
      btnZoomIn.disabled = z >= mapview.locale.maxZoom;
      btnZoomOut.disabled = z <= mapview.locale.minZoom;
    });
}