or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

controls-ui.mdcoordinate-systems-projections.mdcore-map-system.mddata-sources.mdevents-system.mdformat-support.mdindex.mdlayer-management.mdstyling-system.mduser-interactions.mdvector-features-geometries.md
tile.json

tessl/npm-ol

OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/ol@10.6.x

To install, run

npx @tessl/cli install tessl/npm-ol@10.6.0

index.mddocs/

OpenLayers

OpenLayers is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page, supporting multiple data formats, coordinate systems, and rendering backends (Canvas 2D and WebGL).

Package Information

  • Package Name: ol
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install ol
  • Homepage: https://openlayers.org/
  • License: BSD-2-Clause

Core Imports

OpenLayers uses a modular approach - import only what you need:

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

For full package imports:

import { Map, View, Feature, Collection } from 'ol';
import * as olLayer from 'ol/layer';
import * as olSource from 'ol/source';

Basic Usage

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

// Create a basic map
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new XYZ({
        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

Architecture

OpenLayers is built around several key architectural components:

  • Map: The central map object that coordinates all other components
  • View: Controls the visible area, zoom level, rotation, and projection
  • Layers: Visual representation layers (tile, vector, image)
  • Sources: Data providers for layers (XYZ, WMS, vector, etc.)
  • Interactions: User input handlers (drawing, selection, modification)
  • Controls: UI components (zoom, attribution, etc.)
  • Overlays: HTML elements positioned over the map
  • Projections: Coordinate system transformations

Capabilities

Core Map System

Essential components for creating and managing interactive maps with support for multiple coordinate systems and map views.

class Map {
  constructor(options: MapOptions);
  addLayer(layer: BaseLayer): void;
  removeLayer(layer: BaseLayer): void;
  getView(): View;
  setView(view: View): void;
  getSize(): Size | undefined;
  setTarget(target: string | Element): void;
  render(): void;
}

class View {
  constructor(options?: ViewOptions);
  getCenter(): Coordinate | undefined;
  setCenter(center: Coordinate | undefined): void;
  getZoom(): number | undefined;
  setZoom(zoom: number): void;
  getRotation(): number;
  setRotation(rotation: number): void;
}

Core Map System

Layer Management

Layer system supporting tiles, vectors, images, and WebGL rendering with hierarchical organization and dynamic styling.

abstract class BaseLayer {
  setOpacity(opacity: number): void;
  getOpacity(): number;
  setVisible(visible: boolean): void;
  getVisible(): boolean;
  setZIndex(zindex: number): void;
  getZIndex(): number;
}

class TileLayer extends BaseTile {
  constructor(options?: TileLayerOptions);
  getSource(): TileSource | null;
  setSource(source: TileSource | null): void;
}

class VectorLayer extends BaseVector {
  constructor(options?: VectorLayerOptions);
  getSource(): VectorSource | null;
  setSource(source: VectorSource | null): void;
  setStyle(style: StyleLike): void;
}

Layer Management

Data Sources

Comprehensive data source system supporting multiple formats, tile services, and vector data with optimized loading strategies.

class XYZ extends TileImage {
  constructor(options?: XYZOptions);
}

class OSM extends XYZ {
  constructor(options?: OSMOptions);
}

class VectorSource extends Source {
  constructor(options?: VectorSourceOptions);
  addFeature(feature: Feature): void;
  addFeatures(features: Feature[]): void;
  getFeatures(): Feature[];
  clear(): void;
}

Data Sources

Vector Features and Geometries

Feature system with comprehensive geometry support including points, lines, polygons, and collections with spatial operations.

class Feature {
  constructor(geometry?: Geometry);
  getGeometry(): Geometry | undefined;
  setGeometry(geometry: Geometry | undefined): void;
  get(key: string): any;
  set(key: string, value: any): void;
  getProperties(): {[key: string]: any};
}

abstract class Geometry {
  getType(): GeometryType;
  getExtent(): Extent;
  transform(source: ProjectionLike, destination: ProjectionLike): Geometry;
  clone(): Geometry;
}

Vector Features and Geometries

Coordinate Systems and Projections

Advanced projection system supporting coordinate transformations, spatial reference systems, and geographic calculations.

function transform(coordinate: Coordinate, source: ProjectionLike, destination: ProjectionLike): Coordinate;
function fromLonLat(coordinate: Coordinate, projection?: ProjectionLike): Coordinate;
function toLonLat(coordinate: Coordinate, projection?: ProjectionLike): Coordinate;

class Projection {
  constructor(options: ProjectionOptions);
  getCode(): string;
  getUnits(): Units;
  getExtent(): Extent | null;
}

Coordinate Systems and Projections

User Interactions

Rich interaction system for user input handling including drawing, selection, modification, and navigation with customizable behavior.

abstract class Interaction {
  setActive(active: boolean): void;
  getActive(): boolean;
}

class Draw extends PointerInteraction {
  constructor(options: DrawOptions);
  finishDrawing(): void;
  abortDrawing(): void;
}

class Select extends Interaction {
  constructor(options?: SelectOptions);
  getFeatures(): Collection<Feature>;
}

User Interactions

Styling System

Comprehensive styling system for customizing the visual appearance of vector features with support for icons, fills, strokes, and text.

class Style {
  constructor(options?: StyleOptions);
  getFill(): Fill | null;
  getStroke(): Stroke | null;
  getImage(): ImageStyle | null;
  getText(): Text | null;
}

class Fill {
  constructor(options?: FillOptions);
  getColor(): Color | ColorLike | null;
  setColor(color: Color | ColorLike | null): void;
}

class Stroke {
  constructor(options?: StrokeOptions);
  getColor(): Color | ColorLike | null;
  getWidth(): number | undefined;
}

Styling System

Format Support

Extensive format support for reading and writing geographic data including GeoJSON, KML, WFS, GML, and many other standard formats.

abstract class FeatureFormat {
  readFeatures(source: Document | Element | Object | string, options?: ReadOptions): Feature[];
  writeFeatures(features: Feature[], options?: WriteOptions): string;
}

class GeoJSON extends JSONFeature {
  constructor(options?: GeoJSONOptions);
  readFeatures(source: Document | Element | Object | string, options?: ReadOptions): Feature[];
  writeFeatures(features: Feature[], options?: WriteOptions): string;
}

Format Support

Controls and UI

Built-in UI controls for common map operations including zoom, attribution, scale line, and overview map with extensible architecture.

abstract class Control {
  constructor(options: ControlOptions);
  setMap(map: Map | null): void;
  getMap(): Map | null;
}

class Zoom extends Control {
  constructor(options?: ZoomOptions);
}

class Attribution extends Control {
  constructor(options?: AttributionOptions);
}

Controls and UI

Events System

Comprehensive event system supporting map events, user interactions, and data loading with typed event handling and custom event support.

function listen(target: EventTarget, type: string, listener: Listener): EventsKey;
function unlistenByKey(key: EventsKey): void;

class BaseEvent {
  constructor(type: string);
  preventDefault(): void;
  stopPropagation(): void;
}

interface MapBrowserEvent extends MapEvent {
  originalEvent: Event;
  pixel: Pixel;
  coordinate: Coordinate;
}

Events System

Types

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 Color = [number, number, number] | [number, number, number, number];
type ProjectionLike = Projection | string | undefined;
type StyleLike = Style | Style[] | StyleFunction;