Core Map System

/**
 * The main map object that coordinates all components
 * @param options - Map configuration options
 */
class Map {
  constructor(options: MapOptions);
  
  /** Add a layer to the map */
  addLayer(layer: BaseLayer): void;
  /** Remove a layer from the map */
  removeLayer(layer: BaseLayer): void;
  /** Get all layers as a collection */
  getLayers(): Collection<BaseLayer>;
  /** Set the layer group */
  setLayerGroup(layerGroup: LayerGroup): void;
  
  /** Get the current view */
  getView(): View;
  /** Set the view for the map */
  setView(view: View): void;
  
  /** Get the map size in pixels */
  getSize(): Size | undefined;
  /** Set the target element for the map */
  setTarget(target: string | Element): void;
  /** Get the target element */
  getTarget(): string | Element | undefined;
  
  /** Add an interaction to the map */
  addInteraction(interaction: Interaction): void;
  /** Remove an interaction from the map */
  removeInteraction(interaction: Interaction): void;
  /** Get all interactions */
  getInteractions(): Collection<Interaction>;
  
  /** Add a control to the map */
  addControl(control: Control): void;
  /** Remove a control from the map */
  removeControl(control: Control): void;
  /** Get all controls */
  getControls(): Collection<Control>;
  
  /** Add an overlay to the map */
  addOverlay(overlay: Overlay): void;
  /** Remove an overlay from the map */
  removeOverlay(overlay: Overlay): void;
  /** Get all overlays */
  getOverlays(): Collection<Overlay>;
  
  /** Render the map */
  render(): void;
  /** Force a recalculation of the map size */
  updateSize(): void;
  
  /** Get pixel coordinate from map coordinate */
  getPixelFromCoordinate(coordinate: Coordinate): Pixel | null;
  /** Get map coordinate from pixel coordinate */
  getCoordinateFromPixel(pixel: Pixel): Coordinate | null;
  
  /** Fit the view to a geometry or extent */
  getView().fit(geometryOrExtent: Geometry | Extent, options?: FitOptions): void;
}

interface MapOptions {
  /** Target element or ID for the map */
  target?: string | Element;
  /** Initial layers */
  layers?: BaseLayer[] | Collection<BaseLayer> | LayerGroup;
  /** Initial view */
  view?: View;
  /** Initial controls */
  controls?: Control[] | Collection<Control>;
  /** Initial interactions */
  interactions?: Interaction[] | Collection<Interaction>;
  /** Overlays */
  overlays?: Overlay[] | Collection<Overlay>;
  /** Pixel ratio for high DPI displays */
  pixelRatio?: number;
  /** Maximum number of tiles to load simultaneously */
  maxTilesLoading?: number;
  /** Render loop */
  moveTolerance?: number;
}

interface FitOptions {
  /** Padding around the geometry/extent */
  padding?: [number, number, number, number];
  /** Maximum zoom level */
  maxZoom?: number;
  /** Animation duration in milliseconds */
  duration?: number;
  /** Animation easing function */
  easing?: (t: number) => number;
}

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

// Create a basic map
const map = new Map({
  target: 'map-container',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

// Add a layer dynamically
const newLayer = new TileLayer({
  source: new OSM()
});
map.addLayer(newLayer);

// Get pixel from coordinate
const coordinate = [0, 0];
const pixel = map.getPixelFromCoordinate(coordinate);

/**
 * Map view configuration controlling visible area and projection
 * @param options - View configuration options
 */
class View {
  constructor(options?: ViewOptions);
  
  /** Get the current center coordinate */
  getCenter(): Coordinate | undefined;
  /** Set the center coordinate */
  setCenter(center: Coordinate | undefined): void;
  /** Animate to a new center */
  animate(options: AnimationOptions): void;
  
  /** Get the current zoom level */
  getZoom(): number | undefined;
  /** Set the zoom level */
  setZoom(zoom: number): void;
  /** Get the current resolution */
  getResolution(): number | undefined;
  /** Set the resolution */
  setResolution(resolution: number): void;
  
  /** Get the current rotation in radians */
  getRotation(): number;
  /** Set the rotation in radians */
  setRotation(rotation: number): void;
  
  /** Get the current projection */
  getProjection(): Projection;
  
  /** Fit the view to a geometry or extent */
  fit(geometryOrExtent: Geometry | Extent, options?: FitOptions): void;
  
  /** Calculate the extent of the current view */
  calculateExtent(size?: Size): Extent;
  
  /** Get the minimum zoom level */
  getMinZoom(): number;
  /** Set the minimum zoom level */
  setMinZoom(zoom: number): void;
  /** Get the maximum zoom level */
  getMaxZoom(): number;
  /** Set the maximum zoom level */
  setMaxZoom(zoom: number): void;
}

interface ViewOptions {
  /** Initial center coordinate */
  center?: Coordinate;
  /** Initial zoom level */
  zoom?: number;
  /** Initial resolution */
  resolution?: number;
  /** Initial rotation in radians */
  rotation?: number;
  /** Projection */
  projection?: ProjectionLike;
  /** Extent that restricts the view */
  extent?: Extent;
  /** Minimum zoom level */
  minZoom?: number;
  /** Maximum zoom level */
  maxZoom?: number;
  /** Minimum resolution */
  minResolution?: number;
  /** Maximum resolution */
  maxResolution?: number;
  /** Zoom factor */
  zoomFactor?: number;
  /** Resolutions for each zoom level */
  resolutions?: number[];
  /** Constrain resolution */
  constrainResolution?: boolean;
  /** Enable rotation */
  enableRotation?: boolean;
  /** Constrain rotation */
  constrainRotation?: boolean | number;
}

interface AnimationOptions {
  /** Target center coordinate */
  center?: Coordinate;
  /** Target zoom level */
  zoom?: number;
  /** Target resolution */
  resolution?: number;
  /** Target rotation */
  rotation?: number;
  /** Animation duration in milliseconds */
  duration?: number;
  /** Easing function */
  easing?: (t: number) => number;
}

import View from 'ol/View';
import { fromLonLat } from 'ol/proj';

// Create a view centered on London
const view = new View({
  center: fromLonLat([-0.1276, 51.5074]),
  zoom: 10,
  minZoom: 5,
  maxZoom: 18
});

// Animate to Paris
view.animate({
  center: fromLonLat([2.3522, 48.8566]),
  zoom: 12,
  duration: 2000
});

// Fit to an extent
const extent = [0, 0, 1000000, 1000000];
view.fit(extent, {
  padding: [20, 20, 20, 20],
  maxZoom: 15
});

/**
 * Generic collection with event support
 * @param array - Initial array of items
 * @param unique - Whether items should be unique
 */
class Collection<T> {
  constructor(array?: T[], unique?: boolean);
  
  /** Clear all items from the collection */
  clear(): void;
  /** Extend the collection with items from another array */
  extend(arr: T[]): Collection<T>;
  /** Apply a function to each item */
  forEach(f: (item: T, index: number, array: T[]) => void): void;
  /** Get the array of items */
  getArray(): T[];
  /** Get item at index */
  item(index: number): T;
  /** Get the length of the collection */
  getLength(): number;
  /** Insert item at index */
  insertAt(index: number, elem: T): void;
  /** Remove last item and return it */
  pop(): T | undefined;
  /** Add item to the end */
  push(elem: T): number;
  /** Remove the first occurrence of an element */
  remove(elem: T): T | undefined;
  /** Remove item at index */
  removeAt(index: number): T | undefined;
  /** Set item at index */
  setAt(index: number, elem: T): void;
}

/**
 * Base class for event targets
 */
class Observable {
  constructor();
  
  /** Add event listener */
  on(type: string | string[], listener: (event: BaseEvent) => void): EventsKey | EventsKey[];
  /** Add one-time event listener */
  once(type: string | string[], listener: (event: BaseEvent) => void): EventsKey | EventsKey[];
  /** Remove event listener */
  un(type: string | string[], listener: (event: BaseEvent) => void): void;
  
  /** Fire an event */
  dispatchEvent(event: BaseEvent | string): boolean;
  
  /** Get revision number */
  getRevision(): number;
  /** Increase revision counter */
  changed(): void;
}

type Coordinate = [number, number] | [number, number, number] | [number, number, number, number];
type Extent = [number, number, number, number];
type Size = [number, number];
type Pixel = [number, number];
type EventsKey = {
  target: EventTarget;
  type: string;
  listener: (event: Event) => void;
};