Controls & UI

/**
 * Base control class for map UI elements
 * @param options - Control configuration options
 */
class Control {
  constructor(options: ControlOptions);
  
  /** Get the control element */
  getElement(): HTMLElement;
  /** Set the control element */
  setElement(element: HTMLElement): void;
  
  /** Get the map */
  getMap(): Map | null;
  /** Set the map (called automatically when added) */
  setMap(map: Map | null): void;
  
  /** Set the target for rendering the control */
  setTarget(target: HTMLElement | string | undefined): void;
  
  /** Render the control */
  render(mapEvent: MapEvent): void;
}

interface ControlOptions {
  /** DOM element for the control */
  element?: HTMLElement;
  /** Function called on render */
  render?: (mapEvent: MapEvent) => void;
  /** Target element or ID */
  target?: HTMLElement | string;
}

/**
 * Zoom in/out buttons control
 * @param options - Zoom control configuration
 */
class Zoom extends Control {
  constructor(options?: ZoomOptions);
}

interface ZoomOptions extends ControlOptions {
  /** Animation duration in milliseconds */
  duration?: number;
  /** CSS class for zoom in button */
  className?: string;
  /** Text/HTML for zoom in button */
  zoomInLabel?: string | HTMLElement;
  /** Text/HTML for zoom out button */
  zoomOutLabel?: string | HTMLElement;
  /** Title for zoom in button */
  zoomInTipLabel?: string;
  /** Title for zoom out button */
  zoomOutTipLabel?: string;
  /** Zoom delta per click */
  delta?: number;
}

/**
 * Zoom slider control
 * @param options - Zoom slider configuration
 */
class ZoomSlider extends Control {
  constructor(options?: ZoomSliderOptions);
}

interface ZoomSliderOptions extends ControlOptions {
  /** Animation duration */
  duration?: number;
  /** Maximum resolution for slider */
  maxResolution?: number;
  /** Minimum resolution for slider */
  minResolution?: number;
}

/**
 * Zoom to extent control
 * @param options - Zoom to extent configuration
 */
class ZoomToExtent extends Control {
  constructor(options?: ZoomToExtentOptions);
}

interface ZoomToExtentOptions extends ControlOptions {
  /** CSS class name */
  className?: string;
  /** Target extent to zoom to */
  extent?: Extent;
  /** Button label */
  label?: string | HTMLElement;
  /** Button title */
  tipLabel?: string;
}

/**
 * Rotation control for resetting map rotation
 * @param options - Rotate control configuration
 */
class Rotate extends Control {
  constructor(options?: RotateOptions);
}

interface RotateOptions extends ControlOptions {
  /** CSS class name */
  className?: string;
  /** Button label */
  label?: string | HTMLElement;
  /** Button title */
  tipLabel?: string;
  /** Animation duration */
  duration?: number;
  /** Auto-hide when rotation is 0 */
  autoHide?: boolean;
  /** Function to render rotation */
  render?: (mapEvent: MapEvent) => void;
  /** Function to reset rotation */
  resetNorth?: () => void;
}

import { Zoom, ZoomSlider, ZoomToExtent, Rotate } from 'ol/control';
import { defaults as defaultControls } from 'ol/control';

// Create individual controls
const zoomControl = new Zoom({
  zoomInLabel: '+',
  zoomOutLabel: '−',
  duration: 250
});

const rotateControl = new Rotate({
  autoHide: false,
  label: '⇧'
});

const zoomToExtentControl = new ZoomToExtent({
  extent: [0, 0, 1000000, 1000000],
  label: 'E'
});

// Add controls to map
const map = new Map({
  controls: defaultControls().extend([
    rotateControl,
    zoomToExtentControl
  ])
});

// Add control after map creation
map.addControl(new ZoomSlider());

/**
 * Attribution control for displaying layer attributions
 * @param options - Attribution configuration
 */
class Attribution extends Control {
  constructor(options?: AttributionOptions);
  
  /** Get attributions */
  getAttributions(): string[];
  /** Set attributions */
  setAttributions(attributions: string[]): void;
  
  /** Set collapsible state */
  setCollapsible(collapsible: boolean): void;
  /** Set collapsed state */
  setCollapsed(collapsed: boolean): void;
}

interface AttributionOptions extends ControlOptions {
  /** CSS class name */
  className?: string;
  /** Target for attributions */
  target?: HTMLElement | string;
  /** Collapsible attributions */
  collapsible?: boolean;
  /** Initially collapsed */
  collapsed?: boolean;
  /** Button label for collapsed state */
  label?: string | HTMLElement;
  /** Expand button title */
  expandClassName?: string;
  /** Collapse button title */
  collapseLabel?: string | HTMLElement;
  /** Collapse button title */
  tipLabel?: string;
}

/**
 * Scale line control for showing map scale
 * @param options - Scale line configuration
 */
class ScaleLine extends Control {
  constructor(options?: ScaleLineOptions);
  
  /** Get current units */
  getUnits(): Units;
  /** Set units to display */
  setUnits(units: Units): void;
}

interface ScaleLineOptions extends ControlOptions {
  /** CSS class name */
  className?: string;
  /** Minimum width in pixels */
  minWidth?: number;
  /** Units for scale */
  units?: Units;
  /** Show both metric and imperial */
  bar?: boolean;
  /** Text rendering */
  text?: boolean;
  /** DPI for calculations */
  dpi?: number;
}

/**
 * Mouse position control for displaying cursor coordinates
 * @param options - Mouse position configuration
 */
class MousePosition extends Control {
  constructor(options?: MousePositionOptions);
  
  /** Get coordinate format function */
  getCoordinateFormat(): CoordinateFormat;
  /** Set coordinate format function */
  setCoordinateFormat(format: CoordinateFormat): void;
  
  /** Get projection */
  getProjection(): Projection;
  /** Set projection */
  setProjection(projection: ProjectionLike): void;
}

interface MousePositionOptions extends ControlOptions {
  /** CSS class name */
  className?: string;
  /** Coordinate format function */
  coordinateFormat?: CoordinateFormat;
  /** Projection for coordinates */
  projection?: ProjectionLike;
  /** Placeholder text */
  placeholder?: string;
  /** Undefinedhtml for no coordinates */
  undefinedHTML?: string;
}

import { Attribution, ScaleLine, MousePosition } from 'ol/control';
import { createStringXY } from 'ol/coordinate';
import { toLonLat } from 'ol/proj';

// Attribution control
const attribution = new Attribution({
  collapsible: true,
  collapsed: false
});

// Scale line control
const scaleLine = new ScaleLine({
  units: 'metric',
  bar: true,
  text: true
});

// Mouse position control
const mousePosition = new MousePosition({
  coordinateFormat: createStringXY(4),
  projection: 'EPSG:4326',
  placeholder: 'Mouse over map for coordinates'
});

// Add to map
map.addControl(attribution);
map.addControl(scaleLine);
map.addControl(mousePosition);

/**
 * Overview map (minimap) control
 * @param options - Overview map configuration
 */
class OverviewMap extends Control {
  constructor(options?: OverviewMapOptions);
  
  /** Get the overview map */
  getOverviewMap(): Map;
  /** Get collapsed state */
  getCollapsed(): boolean;
  /** Set collapsed state */
  setCollapsed(collapsed: boolean): void;
  
  /** Get collapsible state */
  getCollapsible(): boolean;
  /** Set collapsible state */
  setCollapsible(collapsible: boolean): void;
}

interface OverviewMapOptions extends ControlOptions {
  /** Initially collapsed */
  collapsed?: boolean;
  /** Can be collapsed/expanded */
  collapsible?: boolean;
  /** CSS class name */
  className?: string;
  /** Layers for overview map */
  layers?: Layer[] | Collection<Layer>;
  /** Target element */
  target?: HTMLElement | string;
  /** Button label for collapsed state */
  label?: string | HTMLElement;
  /** Collapse button label */
  collapseLabel?: string | HTMLElement;
  /** Expand button title */
  tipLabel?: string;
  /** View for overview map */
  view?: View;
  /** Rotation follows main map */
  rotateWithView?: boolean;
}

import OverviewMap from 'ol/control/OverviewMap';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

// Create overview map control
const overviewMap = new OverviewMap({
  collapsed: false,
  collapsible: true,
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    projection: 'EPSG:3857'
  })
});

map.addControl(overviewMap);

/**
 * Fullscreen toggle control
 * @param options - Fullscreen configuration
 */
class FullScreen extends Control {
  constructor(options?: FullScreenOptions);
}

interface FullScreenOptions extends ControlOptions {
  /** CSS class name */
  className?: string;
  /** Button label for entering fullscreen */
  label?: string | HTMLElement;
  /** Button label for exiting fullscreen */
  labelActive?: string | HTMLElement;
  /** Button title for entering fullscreen */
  tipLabel?: string;
  /** Keys for keyboard shortcuts */
  keys?: boolean;
  /** Source element for fullscreen */
  source?: HTMLElement | string;
}

/**
 * Overlay for positioning DOM elements on the map
 * @param options - Overlay configuration
 */
class Overlay {
  constructor(options: OverlayOptions);
  
  /** Get the DOM element */
  getElement(): HTMLElement | undefined;
  /** Set the DOM element */
  setElement(element: HTMLElement | undefined): void;
  
  /** Get the map */
  getMap(): Map | null;
  /** Set the map */
  setMap(map: Map | null): void;
  
  /** Get the offset */
  getOffset(): number[];
  /** Set the offset */
  setOffset(offset: number[]): void;
  
  /** Get the position */
  getPosition(): Coordinate | undefined;
  /** Set the position */
  setPosition(position: Coordinate | undefined): void;
  
  /** Get positioning */
  getPositioning(): OverlayPositioning;
  /** Set positioning */
  setPositioning(positioning: OverlayPositioning): void;
  
  /** Pan map to show overlay */
  panIntoView(options?: PanIntoViewOptions): void;
}

interface OverlayOptions {
  /** DOM element to overlay */
  element?: HTMLElement;
  /** Map to add overlay to */
  map?: Map;
  /** Pixel offset */
  offset?: number[];
  /** Geographic position */
  position?: Coordinate;
  /** How element is positioned relative to position */
  positioning?: OverlayPositioning;
  /** Stop event propagation */
  stopEvent?: boolean;
  /** Insert first in overlay collection */
  insertFirst?: boolean;
  /** Auto-pan when position is set */
  autoPan?: boolean | PanIntoViewOptions;
  /** CSS class name */
  className?: string;
}

type OverlayPositioning = 
  | 'bottom-left' | 'bottom-center' | 'bottom-right'
  | 'center-left' | 'center-center' | 'center-right'
  | 'top-left' | 'top-center' | 'top-right';

interface PanIntoViewOptions {
  /** Animation */
  animation?: PanOptions;
  /** Margin around overlay */
  margin?: number;
}

import Overlay from 'ol/Overlay';

// Create popup overlay
const popup = document.createElement('div');
popup.className = 'ol-popup';
popup.innerHTML = '<div class="popup-content">Hello World!</div>';

const overlay = new Overlay({
  element: popup,
  positioning: 'bottom-center',
  stopEvent: false,
  offset: [0, -50],
  autoPan: {
    animation: {
      duration: 250
    }
  }
});

// Add to map
map.addOverlay(overlay);

// Position at coordinate
overlay.setPosition([0, 0]);

// Listen for map clicks to show popup
map.on('click', (event) => {
  const coordinate = event.coordinate;
  overlay.setPosition(coordinate);
});

/**
 * Create default map controls
 * @param options - Configuration for default controls
 */
function defaults(options?: DefaultsOptions): Collection<Control>;

interface DefaultsOptions {
  /** Include attribution control */
  attribution?: boolean;
  /** Attribution control options */
  attributionOptions?: AttributionOptions;
  /** Include rotate control */
  rotate?: boolean;
  /** Rotate control options */
  rotateOptions?: RotateOptions;
  /** Include zoom control */
  zoom?: boolean;
  /** Zoom control options */
  zoomOptions?: ZoomOptions;
}

import { defaults as defaultControls } from 'ol/control';

// Use default controls
const controls = defaultControls({
  attribution: true,
  zoom: true,
  rotate: false
});

// Create map with custom control configuration
const map = new Map({
  target: 'map',
  controls: controls,
  layers: [layer],
  view: view
});

type CoordinateFormat = (coordinate?: Coordinate) => string;
type Units = 'degrees' | 'imperial' | 'us' | 'nautical' | 'metric';