0
# OpenLayers
1

2
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).
3

4
## Package Information
5

6
- **Package Name**: ol
7
- **Package Type**: npm
8
- **Language**: TypeScript/JavaScript
9
- **Installation**: `npm install ol`
10
- **Homepage**: https://openlayers.org/
11
- **License**: BSD-2-Clause
12

13
## Core Imports
14

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

17
```typescript
18
import Map from 'ol/Map';
19
import View from 'ol/View';
20
import TileLayer from 'ol/layer/Tile';
21
import XYZ from 'ol/source/XYZ';
22
```
23

24
For full package imports:
25

26
```typescript
27
import { Map, View, Feature, Collection } from 'ol';
28
import * as olLayer from 'ol/layer';
29
import * as olSource from 'ol/source';
30
```
31

32
## Basic Usage
33

34
```typescript
35
import Map from 'ol/Map';
36
import View from 'ol/View';
37
import TileLayer from 'ol/layer/Tile';
38
import XYZ from 'ol/source/XYZ';
39

40
// Create a basic map
41
const map = new Map({
42
  target: 'map',
43
  layers: [
44
    new TileLayer({
45
      source: new XYZ({
46
        url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
47
      })
48
    })
49
  ],
50
  view: new View({
51
    center: [0, 0],
52
    zoom: 2
53
  })
54
});
55
```
56

57
## Architecture
58

59
OpenLayers is built around several key architectural components:
60

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

70
## Capabilities
71

72
### Core Map System
73

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

76
```typescript { .api }
77
class Map {
78
  constructor(options: MapOptions);
79
  addLayer(layer: BaseLayer): void;
80
  removeLayer(layer: BaseLayer): void;
81
  getView(): View;
82
  setView(view: View): void;
83
  getSize(): Size | undefined;
84
  setTarget(target: string | Element): void;
85
  render(): void;
86
}
87

88
class View {
89
  constructor(options?: ViewOptions);
90
  getCenter(): Coordinate | undefined;
91
  setCenter(center: Coordinate | undefined): void;
92
  getZoom(): number | undefined;
93
  setZoom(zoom: number): void;
94
  getRotation(): number;
95
  setRotation(rotation: number): void;
96
}
97
```
98

99
[Core Map System](./core-map-system.md)
100

101
### Layer Management
102

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

105
```typescript { .api }
106
abstract class BaseLayer {
107
  setOpacity(opacity: number): void;
108
  getOpacity(): number;
109
  setVisible(visible: boolean): void;
110
  getVisible(): boolean;
111
  setZIndex(zindex: number): void;
112
  getZIndex(): number;
113
}
114

115
class TileLayer extends BaseTile {
116
  constructor(options?: TileLayerOptions);
117
  getSource(): TileSource | null;
118
  setSource(source: TileSource | null): void;
119
}
120

121
class VectorLayer extends BaseVector {
122
  constructor(options?: VectorLayerOptions);
123
  getSource(): VectorSource | null;
124
  setSource(source: VectorSource | null): void;
125
  setStyle(style: StyleLike): void;
126
}
127
```
128

129
[Layer Management](./layer-management.md)
130

131
### Data Sources
132

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

135
```typescript { .api }
136
class XYZ extends TileImage {
137
  constructor(options?: XYZOptions);
138
}
139

140
class OSM extends XYZ {
141
  constructor(options?: OSMOptions);
142
}
143

144
class VectorSource extends Source {
145
  constructor(options?: VectorSourceOptions);
146
  addFeature(feature: Feature): void;
147
  addFeatures(features: Feature[]): void;
148
  getFeatures(): Feature[];
149
  clear(): void;
150
}
151
```
152

153
[Data Sources](./data-sources.md)
154

155
### Vector Features and Geometries
156

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

159
```typescript { .api }
160
class Feature {
161
  constructor(geometry?: Geometry);
162
  getGeometry(): Geometry | undefined;
163
  setGeometry(geometry: Geometry | undefined): void;
164
  get(key: string): any;
165
  set(key: string, value: any): void;
166
  getProperties(): {[key: string]: any};
167
}
168

169
abstract class Geometry {
170
  getType(): GeometryType;
171
  getExtent(): Extent;
172
  transform(source: ProjectionLike, destination: ProjectionLike): Geometry;
173
  clone(): Geometry;
174
}
175
```
176

177
[Vector Features and Geometries](./vector-features-geometries.md)
178

179
### Coordinate Systems and Projections
180

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

183
```typescript { .api }
184
function transform(coordinate: Coordinate, source: ProjectionLike, destination: ProjectionLike): Coordinate;
185
function fromLonLat(coordinate: Coordinate, projection?: ProjectionLike): Coordinate;
186
function toLonLat(coordinate: Coordinate, projection?: ProjectionLike): Coordinate;
187

188
class Projection {
189
  constructor(options: ProjectionOptions);
190
  getCode(): string;
191
  getUnits(): Units;
192
  getExtent(): Extent | null;
193
}
194
```
195

196
[Coordinate Systems and Projections](./coordinate-systems-projections.md)
197

198
### User Interactions
199

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

202
```typescript { .api }
203
abstract class Interaction {
204
  setActive(active: boolean): void;
205
  getActive(): boolean;
206
}
207

208
class Draw extends PointerInteraction {
209
  constructor(options: DrawOptions);
210
  finishDrawing(): void;
211
  abortDrawing(): void;
212
}
213

214
class Select extends Interaction {
215
  constructor(options?: SelectOptions);
216
  getFeatures(): Collection<Feature>;
217
}
218
```
219

220
[User Interactions](./user-interactions.md)
221

222
### Styling System
223

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

226
```typescript { .api }
227
class Style {
228
  constructor(options?: StyleOptions);
229
  getFill(): Fill | null;
230
  getStroke(): Stroke | null;
231
  getImage(): ImageStyle | null;
232
  getText(): Text | null;
233
}
234

235
class Fill {
236
  constructor(options?: FillOptions);
237
  getColor(): Color | ColorLike | null;
238
  setColor(color: Color | ColorLike | null): void;
239
}
240

241
class Stroke {
242
  constructor(options?: StrokeOptions);
243
  getColor(): Color | ColorLike | null;
244
  getWidth(): number | undefined;
245
}
246
```
247

248
[Styling System](./styling-system.md)
249

250
### Format Support
251

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

254
```typescript { .api }
255
abstract class FeatureFormat {
256
  readFeatures(source: Document | Element | Object | string, options?: ReadOptions): Feature[];
257
  writeFeatures(features: Feature[], options?: WriteOptions): string;
258
}
259

260
class GeoJSON extends JSONFeature {
261
  constructor(options?: GeoJSONOptions);
262
  readFeatures(source: Document | Element | Object | string, options?: ReadOptions): Feature[];
263
  writeFeatures(features: Feature[], options?: WriteOptions): string;
264
}
265
```
266

267
[Format Support](./format-support.md)
268

269
### Controls and UI
270

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

273
```typescript { .api }
274
abstract class Control {
275
  constructor(options: ControlOptions);
276
  setMap(map: Map | null): void;
277
  getMap(): Map | null;
278
}
279

280
class Zoom extends Control {
281
  constructor(options?: ZoomOptions);
282
}
283

284
class Attribution extends Control {
285
  constructor(options?: AttributionOptions);
286
}
287
```
288

289
[Controls and UI](./controls-ui.md)
290

291
### Events System
292

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

295
```typescript { .api }
296
function listen(target: EventTarget, type: string, listener: Listener): EventsKey;
297
function unlistenByKey(key: EventsKey): void;
298

299
class BaseEvent {
300
  constructor(type: string);
301
  preventDefault(): void;
302
  stopPropagation(): void;
303
}
304

305
interface MapBrowserEvent extends MapEvent {
306
  originalEvent: Event;
307
  pixel: Pixel;
308
  coordinate: Coordinate;
309
}
310
```
311

312
[Events System](./events-system.md)
313

314
## Types
315

316
```typescript { .api }
317
type Coordinate = [number, number] | [number, number, number] | [number, number, number, number];
318
type Extent = [number, number, number, number];
319
type Size = [number, number];
320
type Pixel = [number, number];
321
type Color = [number, number, number] | [number, number, number, number];
322
type ProjectionLike = Projection | string | undefined;
323
type StyleLike = Style | Style[] | StyleFunction;
324
```