0
# Core Map System
1

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

4
## Capabilities
5

6
### Map Class
7

8
The central map object that coordinates all other components including layers, view, interactions, and controls.
9

10
```typescript { .api }
11
/**
12
 * The main map object that coordinates all components
13
 * @param options - Map configuration options
14
 */
15
class Map {
16
  constructor(options: MapOptions);
17
  
18
  /** Add a layer to the map */
19
  addLayer(layer: BaseLayer): void;
20
  /** Remove a layer from the map */
21
  removeLayer(layer: BaseLayer): void;
22
  /** Get all layers as a collection */
23
  getLayers(): Collection<BaseLayer>;
24
  /** Set the layer group */
25
  setLayerGroup(layerGroup: LayerGroup): void;
26
  
27
  /** Get the current view */
28
  getView(): View;
29
  /** Set the view for the map */
30
  setView(view: View): void;
31
  
32
  /** Get the map size in pixels */
33
  getSize(): Size | undefined;
34
  /** Set the target element for the map */
35
  setTarget(target: string | Element): void;
36
  /** Get the target element */
37
  getTarget(): string | Element | undefined;
38
  
39
  /** Add an interaction to the map */
40
  addInteraction(interaction: Interaction): void;
41
  /** Remove an interaction from the map */
42
  removeInteraction(interaction: Interaction): void;
43
  /** Get all interactions */
44
  getInteractions(): Collection<Interaction>;
45
  
46
  /** Add a control to the map */
47
  addControl(control: Control): void;
48
  /** Remove a control from the map */
49
  removeControl(control: Control): void;
50
  /** Get all controls */
51
  getControls(): Collection<Control>;
52
  
53
  /** Add an overlay to the map */
54
  addOverlay(overlay: Overlay): void;
55
  /** Remove an overlay from the map */
56
  removeOverlay(overlay: Overlay): void;
57
  /** Get all overlays */
58
  getOverlays(): Collection<Overlay>;
59
  
60
  /** Render the map */
61
  render(): void;
62
  /** Force a recalculation of the map size */
63
  updateSize(): void;
64
  
65
  /** Get pixel coordinate from map coordinate */
66
  getPixelFromCoordinate(coordinate: Coordinate): Pixel | null;
67
  /** Get map coordinate from pixel coordinate */
68
  getCoordinateFromPixel(pixel: Pixel): Coordinate | null;
69
  
70
  /** Fit the view to a geometry or extent */
71
  getView().fit(geometryOrExtent: Geometry | Extent, options?: FitOptions): void;
72
}
73

74
interface MapOptions {
75
  /** Target element or ID for the map */
76
  target?: string | Element;
77
  /** Initial layers */
78
  layers?: BaseLayer[] | Collection<BaseLayer> | LayerGroup;
79
  /** Initial view */
80
  view?: View;
81
  /** Initial controls */
82
  controls?: Control[] | Collection<Control>;
83
  /** Initial interactions */
84
  interactions?: Interaction[] | Collection<Interaction>;
85
  /** Overlays */
86
  overlays?: Overlay[] | Collection<Overlay>;
87
  /** Pixel ratio for high DPI displays */
88
  pixelRatio?: number;
89
  /** Maximum number of tiles to load simultaneously */
90
  maxTilesLoading?: number;
91
  /** Render loop */
92
  moveTolerance?: number;
93
}
94

95
interface FitOptions {
96
  /** Padding around the geometry/extent */
97
  padding?: [number, number, number, number];
98
  /** Maximum zoom level */
99
  maxZoom?: number;
100
  /** Animation duration in milliseconds */
101
  duration?: number;
102
  /** Animation easing function */
103
  easing?: (t: number) => number;
104
}
105
```
106

107
**Usage Examples:**
108

109
```typescript
110
import Map from 'ol/Map';
111
import View from 'ol/View';
112
import TileLayer from 'ol/layer/Tile';
113
import OSM from 'ol/source/OSM';
114

115
// Create a basic map
116
const map = new Map({
117
  target: 'map-container',
118
  layers: [
119
    new TileLayer({
120
      source: new OSM()
121
    })
122
  ],
123
  view: new View({
124
    center: [0, 0],
125
    zoom: 2
126
  })
127
});
128

129
// Add a layer dynamically
130
const newLayer = new TileLayer({
131
  source: new OSM()
132
});
133
map.addLayer(newLayer);
134

135
// Get pixel from coordinate
136
const coordinate = [0, 0];
137
const pixel = map.getPixelFromCoordinate(coordinate);
138
```
139

140
### View Class
141

142
Controls the visible area, zoom level, rotation, and projection of the map.
143

144
```typescript { .api }
145
/**
146
 * Map view configuration controlling visible area and projection
147
 * @param options - View configuration options
148
 */
149
class View {
150
  constructor(options?: ViewOptions);
151
  
152
  /** Get the current center coordinate */
153
  getCenter(): Coordinate | undefined;
154
  /** Set the center coordinate */
155
  setCenter(center: Coordinate | undefined): void;
156
  /** Animate to a new center */
157
  animate(options: AnimationOptions): void;
158
  
159
  /** Get the current zoom level */
160
  getZoom(): number | undefined;
161
  /** Set the zoom level */
162
  setZoom(zoom: number): void;
163
  /** Get the current resolution */
164
  getResolution(): number | undefined;
165
  /** Set the resolution */
166
  setResolution(resolution: number): void;
167
  
168
  /** Get the current rotation in radians */
169
  getRotation(): number;
170
  /** Set the rotation in radians */
171
  setRotation(rotation: number): void;
172
  
173
  /** Get the current projection */
174
  getProjection(): Projection;
175
  
176
  /** Fit the view to a geometry or extent */
177
  fit(geometryOrExtent: Geometry | Extent, options?: FitOptions): void;
178
  
179
  /** Calculate the extent of the current view */
180
  calculateExtent(size?: Size): Extent;
181
  
182
  /** Get the minimum zoom level */
183
  getMinZoom(): number;
184
  /** Set the minimum zoom level */
185
  setMinZoom(zoom: number): void;
186
  /** Get the maximum zoom level */
187
  getMaxZoom(): number;
188
  /** Set the maximum zoom level */
189
  setMaxZoom(zoom: number): void;
190
}
191

192
interface ViewOptions {
193
  /** Initial center coordinate */
194
  center?: Coordinate;
195
  /** Initial zoom level */
196
  zoom?: number;
197
  /** Initial resolution */
198
  resolution?: number;
199
  /** Initial rotation in radians */
200
  rotation?: number;
201
  /** Projection */
202
  projection?: ProjectionLike;
203
  /** Extent that restricts the view */
204
  extent?: Extent;
205
  /** Minimum zoom level */
206
  minZoom?: number;
207
  /** Maximum zoom level */
208
  maxZoom?: number;
209
  /** Minimum resolution */
210
  minResolution?: number;
211
  /** Maximum resolution */
212
  maxResolution?: number;
213
  /** Zoom factor */
214
  zoomFactor?: number;
215
  /** Resolutions for each zoom level */
216
  resolutions?: number[];
217
  /** Constrain resolution */
218
  constrainResolution?: boolean;
219
  /** Enable rotation */
220
  enableRotation?: boolean;
221
  /** Constrain rotation */
222
  constrainRotation?: boolean | number;
223
}
224

225
interface AnimationOptions {
226
  /** Target center coordinate */
227
  center?: Coordinate;
228
  /** Target zoom level */
229
  zoom?: number;
230
  /** Target resolution */
231
  resolution?: number;
232
  /** Target rotation */
233
  rotation?: number;
234
  /** Animation duration in milliseconds */
235
  duration?: number;
236
  /** Easing function */
237
  easing?: (t: number) => number;
238
}
239
```
240

241
**Usage Examples:**
242

243
```typescript
244
import View from 'ol/View';
245
import { fromLonLat } from 'ol/proj';
246

247
// Create a view centered on London
248
const view = new View({
249
  center: fromLonLat([-0.1276, 51.5074]),
250
  zoom: 10,
251
  minZoom: 5,
252
  maxZoom: 18
253
});
254

255
// Animate to Paris
256
view.animate({
257
  center: fromLonLat([2.3522, 48.8566]),
258
  zoom: 12,
259
  duration: 2000
260
});
261

262
// Fit to an extent
263
const extent = [0, 0, 1000000, 1000000];
264
view.fit(extent, {
265
  padding: [20, 20, 20, 20],
266
  maxZoom: 15
267
});
268
```
269

270
### Collection Class
271

272
Generic collection class for managing arrays of objects with event support.
273

274
```typescript { .api }
275
/**
276
 * Generic collection with event support
277
 * @param array - Initial array of items
278
 * @param unique - Whether items should be unique
279
 */
280
class Collection<T> {
281
  constructor(array?: T[], unique?: boolean);
282
  
283
  /** Clear all items from the collection */
284
  clear(): void;
285
  /** Extend the collection with items from another array */
286
  extend(arr: T[]): Collection<T>;
287
  /** Apply a function to each item */
288
  forEach(f: (item: T, index: number, array: T[]) => void): void;
289
  /** Get the array of items */
290
  getArray(): T[];
291
  /** Get item at index */
292
  item(index: number): T;
293
  /** Get the length of the collection */
294
  getLength(): number;
295
  /** Insert item at index */
296
  insertAt(index: number, elem: T): void;
297
  /** Remove last item and return it */
298
  pop(): T | undefined;
299
  /** Add item to the end */
300
  push(elem: T): number;
301
  /** Remove the first occurrence of an element */
302
  remove(elem: T): T | undefined;
303
  /** Remove item at index */
304
  removeAt(index: number): T | undefined;
305
  /** Set item at index */
306
  setAt(index: number, elem: T): void;
307
}
308
```
309

310
### Observable Class
311

312
Base class providing event capabilities.
313

314
```typescript { .api }
315
/**
316
 * Base class for event targets
317
 */
318
class Observable {
319
  constructor();
320
  
321
  /** Add event listener */
322
  on(type: string | string[], listener: (event: BaseEvent) => void): EventsKey | EventsKey[];
323
  /** Add one-time event listener */
324
  once(type: string | string[], listener: (event: BaseEvent) => void): EventsKey | EventsKey[];
325
  /** Remove event listener */
326
  un(type: string | string[], listener: (event: BaseEvent) => void): void;
327
  
328
  /** Fire an event */
329
  dispatchEvent(event: BaseEvent | string): boolean;
330
  
331
  /** Get revision number */
332
  getRevision(): number;
333
  /** Increase revision counter */
334
  changed(): void;
335
}
336
```
337

338
## Types
339

340
```typescript { .api }
341
type Coordinate = [number, number] | [number, number, number] | [number, number, number, number];
342
type Extent = [number, number, number, number];
343
type Size = [number, number];
344
type Pixel = [number, number];
345
type EventsKey = {
346
  target: EventTarget;
347
  type: string;
348
  listener: (event: Event) => void;
349
};
350
```