@giapspzoo/ol-navigation-history

OpenLayers control for navigating backward and forward through map view history.

Installation

npm i @giapspzoo/ol-navigation-history

API

class NavigationHistoryControl(options?)

Parameters

| Name | Type | Description | Default value | Required | |-|-|-|-|-| | options | TNavigationHistoryControlOptions | Configuration object. | {} | No | | options.nextButtonOptions | TNavigationHistoryControlButtonOptions | The next button configuration object. | - | No | | options.nextButtonOptions.label | HTMLElement | The next button content. | HTMLSpanElement with < symbol. | No | | options.nextButtonOptions.tipLabel | string | The next button label (title). | "Go forward to the next map view." | No | | options.prevButtonOptions | TNavigationHistoryControlButtonOptions | The prev button configuration object. | - | No | | options.prevButtonOptions.label | HTMLElement | The prev button content. | HTMLSpanElement with > symbol. | No | | options.prevButtonOptions.tipLabel | string | The prev button label (title). | "Go back to the previous map view." | No | | options.render | (event: MapEvent) => void | Function called when the control should be re-rendered. This is called in a requestAnimationFrame callback. | - | No | | options.target | string | HTMLElement | Specify a target if you want the control to be rendered outside of the map's viewport. | - | No |

Examples

Basic usage

import Map from 'ol';
import { defaults as defaultControls } from 'ol/control';
import NavigationHistoryControl from '@giapspzoo/ol-history-navigation';

const map = new Map({
  controls: defaultControls().extend([
    new NavigationHistoryControl()
  ])
  // other properties...
});

With parameters

import Map from 'ol';
import { defaults as defaultControls } from 'ol/control';
import NavigationHistoryControl from '@giapspzoo/ol-history-navigation';

const map = new Map({
  controls: defaultControls().extend([
    new NavigationHistoryControl({
      nextButtonOptions: {
        label: getCustomRightIconHtmlElement(),
        tipLabel: 'Custom label for the next button',
      },
      prevButtonOptions: {
        label: getCustomLeftIconHtmlElement(),
        tipLabel: 'Custom label for the prev button'
      },
      target: document.querySelector('.navigation-history-control-container')
    })
  ])
  // other properties...
});