MapLibre GL JS

https://maplibre.org/maplibre-gl-js/docs
Admin
MapLibre GL JS is an open-source TypeScript library for rendering interactive web maps using WebGL,...
Tokens:190,104
Snippets:2,226
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Quickstart: Initialize a MapLibre GL JS map

Source: https://maplibre.org/maplibre-gl-js/docs

Loads the MapLibre GL JS stylesheet and module from unpkg, then creates a map in a div with id 'map'. Uses the demo tiles style URL, starting center at [0,0] and zoom level 2.

```html
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@^6.11.2/dist/maplibre-gl.css" />
<div id="map" style="height: 400px"></div>
<script type="module">
    import * as maplibregl from 'https://unpkg.com/maplibre-gl@^6.11.2/dist/maplibre-gl.mjs';

    const map = new maplibregl.Map({
        container: 'map', // container id
        style: 'https://demotiles.maplibre.org/globe.json', // style URL
        center: [0, 0], // starting position [lng, lat]
        zoom: 2 // starting zoom
    });
</script>
```

--------------------------------

### setLight() example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Sets any combination of light values. The example shows retrieving a layout property, which is unrelated to setting light.

```javascript
let layerVisibility = map.getLayoutProperty('my-layer', 'visibility');
```

--------------------------------

### calculateCameraOptionsFromTo example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Calculates camera options to look from a camera position to a target point, then applies them with map.jumpTo. The example uses from (1°, 0°, 1000m) to (1°, 1°, 0m).

```javascript
// Calculate options to look from (1°, 0°, 1000m) to (1°, 1°, 0m)
const cameraLngLat = new LngLat(1, 0);
const cameraAltitude = 1000;
const targetLngLat = new LngLat(1, 1);
const targetAltitude = 0;
const cameraOptions = map.calculateCameraOptionsFromTo(cameraLngLat, cameraAltitude, targetLngLat, targetAltitude);
// Apply calculated options
map.jumpTo(cameraOptions);
```

--------------------------------

### LngLatBounds.toString() example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/LngLatBounds

Creates a LngLatBounds instance and calls toString() to get a string representation in the format 'LngLatBounds(LngLat(lng, lat), LngLat(lng, lat))'.

```javascript
let llb = new LngLatBounds([-73.9876, 40.7661], [-73.9397, 40.8002]);
llb.toString(); // = "LngLatBounds(LngLat(-73.9876, 40.7661), LngLat(-73.9397, 40.8002))"

```

--------------------------------

### calculateCameraOptionsFromCameraLngLatAltRotation example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Calculates camera options from a camera position (lng, lat, altitude) and rotation (bearing, pitch, roll), then applies them with map.jumpTo. The example uses a camera at (1°, 0°, 1000m) with bearing 90°, pitch 30°, roll 45°.

```javascript
// Calculate options to look from camera position(1°, 0°, 1000m) with bearing = 90°, pitch = 30°, and roll = 45°
const cameraLngLat = new LngLat(1, 0);
const cameraAltitude = 1000;
const bearing = 90;
const pitch = 30;
const roll = 45;
const cameraOptions = map.calculateCameraOptionsFromCameraLngLatAltRotation(cameraLngLat, cameraAltitude, bearing, pitch, roll);
// Apply calculated options
map.jumpTo(cameraOptions);
```

--------------------------------

### setSky example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Sets the value of the style's sky properties. The argument must conform to the MapLibre Style Specification. The example sets the atmosphere-blend property to 1.0.

```javascript
map.setSky({'atmosphere-blend': 1.0});
```

--------------------------------

### calculateAnchoredCameraOptions example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Calculates camera options to place an anchor at a screen point with optional zoom, then applies them with map.jumpTo. Uses map.unproject to get the anchor location from a pointer position.

```javascript
const cameraOptions = map.calculateAnchoredCameraOptions({
  anchorLocation: map.unproject(pointerDownPosition),
  anchorScreenPoint: currentPointerPosition,
  zoom: map.getZoom() + 1,
});
map.jumpTo(cameraOptions);
```

--------------------------------

### shaderData.vertexShaderPrelude example: vertex shader with projectTile

Source: https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/CustomRenderMethodInput

Example for the `vertexShaderPrelude` property of `shaderData`. Shows how to construct a vertex shader source that uses MapLibre's `projectTile` projection function.

```glsl
const vertexSource = `#version 300 es
${shaderData.vertexShaderPrelude}
${shaderData.define}
in vec2 a_pos;
void main() {
    gl_Position = projectTile(a_pos);
}`;
```

--------------------------------

### setZoom example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Zooms to zoom level 5 without an animated transition.

```javascript
map.setZoom(5);
```

--------------------------------

### createTileMesh()

Source: https://maplibre.org/maplibre-gl-js/docs/API/functions/createTileMesh

Documentation for the createTileMesh function, including parameters, return type, and an example.

```APIDOC
## createTileMesh()

### Description
Creates a mesh of a quad that covers the entire tile (covering positions in range 0..EXTENT), is optionally subdivided into finer quads, optionally includes a border and optionally extends to the north and/or special pole vertices. Additionally the resulting mesh indices type can be specified using `forceIndicesSize`.

### Method
Function

### Signature
`createTileMesh(options: CreateTileMeshOptions, forceIndicesSize?: IndicesType): TileMesh`

### Parameters
#### `options` (CreateTileMeshOptions) - Required
Specify options for tile mesh creation such as granularity or border.

#### `forceIndicesSize` (IndicesType) - Optional
Specifies what indices type to use. The values '32bit' and '16bit' force their respective indices size. If undefined, the mesh may use either size, and will pick 16 bit indices if possible. If '16bit' is specified and the mesh exceeds 65536 vertices, an exception is thrown.

### Returns
`TileMesh` - Typed arrays of the mesh vertices and indices.

### Example
```js
// Creating a mesh for a tile that can be used for raster layers, hillshade, etc.
const meshBuffers = createTileMesh({
    granularity: map.style.projection.subdivisionGranularity.tile.getGranularityForZoomLevel(tileID.z),
    generateBorders: true,
    extendToNorthPole: tileID.y === 0,
    extendToSouthPole: tileID.y === (1 << tileID.z) - 1,
}, '16bit');
```

### See Also
- Add a custom layer with tiles to a globe
```

--------------------------------

### Install MapLibre GL JS with npm

Source: https://maplibre.org/maplibre-gl-js/docs/guides/leaflet-migration-guide

Install the maplibre-gl package using npm. This is the first step in migrating from Leaflet to MapLibre.

```bash
npm install maplibre-gl

```

--------------------------------

### ImageSource usage example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/ImageSource

Shows how to add an image source to the map, update its coordinates, update URL and coordinates simultaneously, update with a decoded image, create an empty source and feed it via updateImage, and remove the source. The example uses the MapLibre GL JS API.

```javascript
// add to map
map.addSource('some id', {
   type: 'image',
   url: 'https://www.maplibre.org/images/foo.png',
   coordinates: [
       [-76.54, 39.18],
       [-76.52, 39.18],
       [-76.52, 39.17],
       [-76.54, 39.17]
   ]
});

// update coordinates
let mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

// update url and coordinates simultaneously
mySource.updateImage({
   url: 'https://www.maplibre.org/images/bar.png',
   coordinates: [
       [-76.54335737228394, 39.18579907229748],
       [-76.52803659439087, 39.1838364847587],
       [-76.5295386314392, 39.17683392507606],
       [-76.54520273208618, 39.17876344106642]
   ]
})

// update with an already-decoded image (no network request)
const bitmap = await createImageBitmap(myCanvas);
mySource.updateImage({image: bitmap});

// create an empty source (no url), then feed it entirely via updateImage
map.addSource('empty id', {
   type: 'image',
   coordinates: [
       [-76.54, 39.18],
       [-76.52, 39.18],
       [-76.52, 39.17],
       [-76.54, 39.17]
   ]
});
(map.getSource('empty id') as ImageSource).updateImage({image: bitmap});

map.removeSource('some id');  // remove
```

--------------------------------

### shaderData.define example: vertex shader with GLOBE conditional

Source: https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/CustomRenderMethodInput

Example for the `define` property of `shaderData`. Shows how to include the prelude and defines in a vertex shader source string, with a conditional block for globe-specific logic.

```glsl
const vertexSource = `#version 300 es
${shaderData.vertexShaderPrelude}
${shaderData.define}
in vec2 a_pos;
void main() {
    gl_Position = projectTile(a_pos);
    #ifdef GLOBE
    // Do globe-specific things
    #endif
}`;
```

--------------------------------

### getZoom example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Returns the map's current zoom level.

```javascript
map.getZoom();

```

--------------------------------

### VideoSource

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/VideoSource

Documentation for the VideoSource class, including its methods and usage examples.

```APIDOC
## VideoSource

### Description
A data source containing video. (See the Style Specification for detailed documentation of options.)

### Example
```js
// add to map
map.addSource('some id', {
   type: 'video',
   url: [
       'https://www.mapbox.com/blog/assets/baltimore-smoke.mp4',
       'https://www.mapbox.com/blog/assets/baltimore-smoke.webm'
   ],
   coordinates: [
       [-76.54, 39.18],
       [-76.52, 39.18],
       [-76.52, 39.17],
       [-76.54, 39.17]
   ]
});

// update
let mySource = map.getSource('some id');
mySource.setCoordinates([
    [-76.54335737228394, 39.18579907229748],
    [-76.52803659439087, 39.1838364847587],
    [-76.5295386314392, 39.17683392507606],
    [-76.54520273208618, 39.17876344106642]
]);

map.removeSource('some id');  // remove
```

### See
Add a video

Note that when rendered as a raster layer, the layer's `raster-fade-duration` property will cause the video to fade in. This happens when playback is started, paused and resumed, or when the video's coordinates are updated. To avoid this behavior, set the layer's `raster-fade-duration` property to `0`.

### Extends
* `ImageSource`

### Methods

#### fire()

##### Call Signature
> **fire**(`event`: `ErrorEvent` | `MapSourceDataEvent`): `this`

Calls every listener registered for the event's type.

###### Parameters
| Parameter | Type |
|-----------|------|
| `event` | `ErrorEvent` \| `MapSourceDataEvent` |

###### Returns
`this`

###### Inherited from
`ImageSource`.`fire`

##### Call Signature
> **fire**(`type`: keyof `SourceEventType`, `properties?`: `object`): `this`

Compatibility with the (type: string, properties: Object) signature from previous versions. See https://github.com/mapbox/mapbox-gl-js/issues/6522, https://github.com/mapbox/mapbox-gl-draw/issues/766

###### Parameters
| Parameter | Type |
|-----------|------|
| `type` | keyof `SourceEventType` |
| `properties?` | `object` |

###### Returns
`this`

###### Inherited from
`ImageSource`.`fire`

#### getVideo()
> **getVideo**(): `HTMLVideoElement`

Returns the HTML `video` element.

##### Returns
`HTMLVideoElement`
The HTML `video` element.

#### getWarp()
> **getWarp**(): `ImageSourceWarp`

**`Experimental`**
Returns how the image is warped onto its coordinates.

##### Returns
`ImageSourceWarp`
The warp in use, see ImageSourceWarp.

##### Inherited from
`ImageSource`.`getWarp`

#### listens()
> **listens**(`type`: keyof `SourceEventType`): `boolean`

Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type.

##### Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| `type` | keyof `SourceEventType` | The event type |

##### Returns
`boolean`
`true` if there is at least one registered listener for specified event type, `false` otherwise

##### Inherited from
`ImageSource`.`listens`

#### loaded()
> **loaded**(): `boolean`

True if the source is loaded, false otherwise.

##### Returns
`boolean`

##### Inherited from
`ImageSource`.`loaded`

#### loadTile()
> **loadTile**(`tile`: `Tile`): `Promise`<`void`>

This method does the heavy lifting of loading a tile. In most cases it will defer the work to the relevant worker source.

##### Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| `tile` | `Tile` | The tile to load |

##### Returns
`Promise`<`void`>

##### Inherited from
`ImageSource`.`loadTile`

#### off()
> **off** <`T` _extends_ keyof `SourceEventType`>(`type`: `T`, `listener`: (`event`: `SourceEventType`[`T`]) => `void`): `this`

Removes a previously registered event listener.

##### Type Parameters
| Type Parameter |
|----------------|
| `T` _extends_ keyof `SourceEventType` |

##### Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| `type` | `T` | The event type to remove listeners for. |
| `listener` | (`event`: `SourceEventType`[`T`]) => `void` | The listener function to remove. |

##### Returns
`this`

##### Inherited from
`ImageSource`.`off`

#### on()
> **on** <`T` _extends_ keyof `SourceEventType`>(`type`: `T`, `listener`: (`event`: `SourceEventType`[`T`]) => `void`): `Subscription`

Adds a listener to a specified event type.

##### Type Parameters
| Type Parameter |
|----------------|
| `T` _extends_ keyof `SourceEventType` |

##### Parameters
| Parameter | Type | Description |
|-----------|------|-------------|
| `type` | `T` | The event type to add a listen for. |
| `listener` | (`event`: `SourceEventType`[`T`]) => `void` | The function to be called when the event is fired. The listener function is called with the data object passed to `fire`, extended with `target` and `type` properties. |

##### Returns
`Subscription`

##### Inherited from
`ImageSource`.`on`
```

--------------------------------

### CameraOptions

Source: https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/CameraOptions

Documentation for the CameraOptions type alias, including its properties and an example usage.

```APIDOC
## CameraOptions

### Description
Options common to Map.jumpTo, Map.easeTo, and Map.flyTo, controlling the desired location, zoom, bearing, pitch, and roll of the camera. All properties are optional, and when a property is omitted, the current camera value for that property will remain unchanged.

### Type Declaration

#### elevation?
- **Type**: `number`
- **Optional**: Yes
- **Description**: The elevation of the center point in meters above sea level.

#### pitch?
- **Type**: `number`
- **Optional**: Yes
- **Description**: The desired pitch in degrees. The pitch is the angle towards the horizon measured in degrees with a range between 0 and 60 degrees. For example, pitch: 0 provides the appearance of looking straight down at the map, while pitch: 60 tilts the user's perspective towards the horizon. Increasing the pitch value is often used to display 3D objects.

#### roll?
- **Type**: `number`
- **Optional**: Yes
- **Description**: The desired roll in degrees. The roll is the angle about the camera boresight.

### Example
Set the map's initial perspective with CameraOptions

```typescript
let map = new Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  center: [-73.5804, 45.53483],
  pitch: 60,
  bearing: -60,
  zoom: 10
});
```

### See
- Set pitch and bearing
- Jump to a series of locations
- Fly to a location
- Display buildings in 3D
```

--------------------------------

### setSubpixelPositioning() example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Marker

Enables subpixel positioning for the marker by passing true to setSubpixelPositioning().

```javascript
let marker = new Marker()
marker.setSubpixelPositioning(true);

```

--------------------------------

### zoomIn example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Zooms the map in one level with a custom animation duration of 1000 ms.

```javascript
map.zoomIn({duration: 1000});
```

--------------------------------

### Get projection with map.getProjection()

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Gets the ProjectionSpecification. The example assigns the result to a variable.

```javascript
let projection = map.getProjection();

```

--------------------------------

### unproject example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Gets the geographic coordinate from a click event using map.unproject(e.point).

```javascript
map.on('click', (e) => {
  // When the map is clicked, get the geographic coordinate.
  let coordinate = map.unproject(e.point);
});
```

--------------------------------

### transformRequest callback example

Source: https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/RequestParameters

Example of a transformRequest callback that modifies requests starting with 'http://myHost'. It changes the URL to HTTPS, adds a custom header, and includes credentials for cross-origin requests.

```javascript
// use transformRequest to modify requests that begin with `http://myHost`
transformRequest: function(url, resourceType) {
 if (resourceType === 'Source' && url.indexOf('http://myHost') > -1) {
   return {
     url: url.replace('http', 'https'),
     headers: { 'my-custom-header': true },
     credentials: 'include'  // Include cookies for cross-origin requests
   }
  }
}

```

--------------------------------

### prepare()

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/VideoSource

Sets the video's coordinates and re-renders the map.

```APIDOC
## prepare()

### Description
Sets the video's coordinates and re-renders the map.

### Method
prepare

### Signature
`prepare(): this`

### Returns
`this`

### Overrides
`ImageSource.prepare`
```

--------------------------------

### Import and create Map with maplibre-gl

Source: https://maplibre.org/maplibre-gl-js/docs

Imports the Map class and CSS, then creates a new map instance with a style URL, center, and zoom.

```javascript
import {Map} from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

const map = new Map({
    container: 'map', // container id
    style: 'https://demotiles.maplibre.org/globe.json', // style URL
    center: [0, 0], // starting position [lng, lat]
    zoom: 1 // starting zoom
});

```

--------------------------------

### Get sky with map.getSky()

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Returns the value of the style's sky. The example calls the method directly.

```javascript
map.getSky();

```

--------------------------------

### Get render world copies with map.getRenderWorldCopies()

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Returns the state of renderWorldCopies. The example assigns the result to a variable.

```javascript
let worldCopiesRendered = map.getRenderWorldCopies();

```

--------------------------------

### cameraForBounds example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Calculates camera options to fit given bounds with padding. Returns center, zoom, and bearing if the map can fit the bounds; otherwise warns and returns undefined.

```javascript
let bbox = [[-79, 43], [-73, 45]];
let newCameraTransform = map.cameraForBounds(bbox, {
  padding: {top: 10, bottom:25, left: 15, right: 5}
});
```

--------------------------------

### LngLatBounds.toArray() example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/LngLatBounds

Creates a LngLatBounds instance and calls toArray() to get the bounding box as an array of southwest and northeast coordinates.

```javascript
let llb = new LngLatBounds([-73.9876, 40.7661], [-73.9397, 40.8002]);
llb.toArray(); // = [[-73.9876, 40.7661], [-73.9397, 40.8002]]

```

--------------------------------

### Get minimum zoom with map.getMinZoom()

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Returns the map's minimum allowable zoom level. The example assigns the result to a variable.

```javascript
let minZoom = map.getMinZoom();

```

--------------------------------

### prepare()

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/ImageSource

Executes a prepare step before the source is used.

```APIDOC
## prepare()

### Description
Allows to execute a prepare step before the source is used.

### Method
prepare

### Signature
`prepare(): void`

### Returns
`void`

### Implementation of
`Source.prepare`
```

--------------------------------

### setPadding example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Sets a left padding of 300px and a top padding of 50px. Equivalent to jumpTo({padding: padding}). Triggers movestart and moveend events.

```javascript
map.setPadding({ left: 300, top: 50 });
```

--------------------------------

### Get maximum zoom with map.getMaxZoom()

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Returns the map's maximum allowable zoom level. The example assigns the result to a variable.

```javascript
let maxZoom = map.getMaxZoom();

```

--------------------------------

### Initialize map with MapLibre

Source: https://maplibre.org/maplibre-gl-js/docs/guides/leaflet-migration-guide

Create a MapLibre map with a container, style URL, center, and zoom. Requires importing the CSS and Map class.

```javascript
import 'maplibre-gl/dist/maplibre-gl.css';
import {Map} from 'maplibre-gl';

const map = new Map({
  container: 'map',
  style: 'https://demotiles.maplibre.org/style.json',
  center: [0, 0],
  zoom: 2
});

```

--------------------------------

### getFeatureState() example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Gets the state of a feature under the mouse when moving over the 'my-layer' layer. Uses the feature's id from the event to call getFeatureState.

```javascript
map.on('mousemove', 'my-layer', (e) => {
  if (e.features.length > 0) {
    map.getFeatureState({
      source: 'my-source',
      sourceLayer: 'my-source-layer',
      id: e.features[0].id
    });
  }
});

```

--------------------------------

### Get maximum bounds with map.getMaxBounds()

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Returns the maximum geographical bounds the map is constrained to, or null if none set. The example assigns the result to a variable.

```javascript
let maxBounds = map.getMaxBounds();

```

--------------------------------

### Create a LngLat instance

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/LngLat

Shows how to instantiate a LngLat object with longitude and latitude values, and access the lng property.

```javascript
let ll = new LngLat(-123.9749, 40.7736);
ll.lng; // = -123.9749
```

--------------------------------

### LngLatBounds.fromLngLat() example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/LngLatBounds

Creates a LngLatBounds from a center coordinate and a radius in meters using the static fromLngLat() method. The radius defaults to 0 if not provided.

```javascript
let center = new LngLat(-73.9749, 40.7736);
LngLatBounds.fromLngLat(100).toArray(); // = [[-73.97501862141328, 40.77351016847229], [-73.97478137858673, 40.77368983152771]]

```

--------------------------------

### flyTo example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Changes center, zoom, bearing, pitch, and roll with an animated transition. The animation is skipped if reduced motion is enabled unless essential: true is provided.

```javascript
// fly with default options to null island
map.flyTo({center: [0, 0], zoom: 9});
// using flyTo options
map.flyTo({
  center: [0, 0],
  zoom: 9,
  speed: 0.2,
  curve: 1,
  easing(t) {
    return t;
  }
});
```

--------------------------------

### Vite worker URL setup with ?worker&url

Source: https://maplibre.org/maplibre-gl-js/docs

Uses Vite's ?worker&url query to get a self-contained worker URL. Avoid plain ?url because the worker fails without its sibling module.

```javascript
import {Map, setWorkerUrl} from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';

setWorkerUrl(workerUrl);

const map = new Map({/* … */});

```

--------------------------------

### enable()

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/KeyboardHandler

Enables the keyboard rotate and zoom interaction.

```APIDOC
## enable()

### Description
Enables the "keyboard rotate and zoom" interaction.

### Method
`enable`

### Returns
`void`

### Example
```js
map.keyboard.enable();
```

```

--------------------------------

### getCenter() example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/LngLatBounds

Returns the geographical center of the bounding box. The example shows the resulting LngLat object.

```javascript
let llb = new LngLatBounds([-73.9876, 40.7661], [-73.9397, 40.8002]);
llb.getCenter(); // = LngLat {lng: -73.96365, lat: 40.78315}
```

--------------------------------

### new FullscreenControl(options?)

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/FullscreenControl

Creates a new FullscreenControl instance with optional options.

```APIDOC
## Constructor

### new FullscreenControl(options?)

Creates a new FullscreenControl instance.

#### Parameters
- `options` (FullscreenControlOptions) - Optional - The control's options.

#### Returns
- `FullscreenControl` - The new control instance.

#### Example
```js
map.addControl(new FullscreenControl({container: document.querySelector('body')}));
```
```

--------------------------------

### hasControl example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Checks if a control exists on the map. The example creates a NavigationControl, adds it to the map, then checks for its presence.

```javascript
// Define a new navigation control.
let navigation = new NavigationControl();
// Add zoom and rotation controls to the map.
map.addControl(navigation);
// Check that the navigation control exists on the map.
map.hasControl(navigation);

```

--------------------------------

### setSprite example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Sets the value of the style's sprite property. The example passes a placeholder sprite URL string.

```javascript
map.setSprite('YOUR_SPRITE_URL');
```

--------------------------------

### new Popup(options?)

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Popup

Creates a new Popup instance. The constructor accepts an optional options object for configuration such as offset and className.

```APIDOC
## [CONSTRUCTOR] new Popup(options?)

### Description
Creates a new popup component.

### Constructor
`new Popup(options?)`

### Parameters
#### Options
- **offset** (Object) - Optional - An object specifying the offset of the popup position. The keys are anchor positions ('top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right') and the values are [x, y] arrays.
- **className** (string) - Optional - A CSS class name to add to the popup element.

### Example
```javascript
let popup = new Popup({offset: popupOffsets, className: 'my-class'});
```
```

--------------------------------

### enable()

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/TwoFingersTouchPitchHandler

Enables the "drag to pitch" interaction.

```APIDOC
## enable()

### Description
Enables the "drag to pitch" interaction.

### Method
`enable`

### Signature
`enable(options?: boolean | AroundCenterOptions): void`

### Parameters
- `options?` (boolean | AroundCenterOptions) - Optional - Options for enabling the interaction.

### Returns
`void`

### Example
```js
map.touchPitch.enable();
```
```

--------------------------------

### contains() example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/LngLatBounds

Checks if a geographic point is within the bounding box. The example logs true for a point inside the bounds.

```javascript
let llb = new LngLatBounds(
  new LngLat(-73.9876, 40.7661),
  new LngLat(-73.9397, 40.8002)
);

let ll = new LngLat(-73.9567, 40.7789);

console.log(llb.contains(ll)); // = true
```

--------------------------------

### restoreNow() usage example

Source: https://maplibre.org/maplibre-gl-js/docs/API/functions/restoreNow

Shows how to freeze time with setNow(0), perform deterministic rendering (e.g., export frames), then call restoreNow() to resume normal map animations.

```javascript
// After video export, resume normal time
setNow(0);
// ... export frames ...
restoreNow(); // Map animations resume normally
```

--------------------------------

### getTerrain example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Returns the terrain options if terrain is loaded, otherwise undefined. The example shows the returned object with a source property.

```javascript
map.getTerrain(); // { source: 'terrain' };

```

--------------------------------

### prewarm() example

Source: https://maplibre.org/maplibre-gl-js/docs/API/functions/prewarm

Call prewarm() to pre-initialize shared resources. Must be called after setWorkerUrl() and setWorkerCount() if those are used. Resources are not cleared automatically after the last map is removed; use clearPrewarmedResources() to manually clear them.

```javascript
prewarm()
```

--------------------------------

### adjustAntiMeridian() example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/LngLatBounds

Adjusts bounds that cross the 180th meridian. The example shows the resulting adjustedBounds with the eastern longitude wrapped to 181.659097.

```javascript
let bounds = new LngLatBounds([175.813127, -20.157768], [-178. 340903, -15.449124]);
let adjustedBounds = bounds.adjustAntiMeridian();
// adjustedBounds will be: [[175.813127, -20.157768], [181.659097, -15.449124]]
```

--------------------------------

### Replace mapboxgl with maplibregl in Map constructor and CSS class

Source: https://maplibre.org/maplibre-gl-js/docs/guides/mapbox-migration-guide

Shows the required changes: replace `mapboxgl.Map` with `maplibregl.Map` and `mapboxgl-ctrl` with `maplibregl-ctrl`.

```diff
-    var map = new mapboxgl.Map({
+    var map = new maplibregl.Map({

-    <button class="mapboxgl-ctrl">
+    <button class="maplibregl-ctrl">

```

--------------------------------

### Get cluster options from a GeoJSON source

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/GeoJSONSource

Gets the current cluster options from a GeoJSON source. Destructures the returned object to obtain cluster, clusterMaxZoom, and clusterRadius values.

```javascript
const {cluster, clusterMaxZoom, clusterRadius} = map.getSource('some id').getClusterOptions();
```

--------------------------------

### Get covering tiles for a 512x512 tile source

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Use map.coveringTiles({tileSize: 512}) to get an array of OverscaledTileID objects covering the current viewport for a 512x512px tile source.

```javascript
// Get the tiles to cover the view for a 512x512px tile source
const tiles = map.coveringTiles({tileSize: 512});
```

--------------------------------

### setPadding() example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Popup

Sets the popup's padding constraints for positioning using a PaddingOptions object.

```javascript
popup.setPadding({ top: 10, right: 20, bottom: 30, left: 40 });
```

--------------------------------

### enable(options?)

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/TwoFingersTouchZoomRotateHandler

Enables the 'pinch to rotate and zoom' interaction. An optional options object can be provided to specify the rotation center.

```APIDOC
## enable(options?)

### Description
Enables the "pinch to rotate and zoom" interaction.

### Method
`enable(options?: boolean | AroundCenterOptions)`

### Parameters
- `options?` (boolean | AroundCenterOptions) - Optional - Options object.

### Returns
`void`

### Example
```js
map.touchZoomRotate.enable();
map.touchZoomRotate.enable({ around: 'center' });
```
```

--------------------------------

### getProjection

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Gets the ProjectionSpecification.

```APIDOC
## getProjection(): ProjectionSpecification

### Description
Gets the ProjectionSpecification.

### Returns
`ProjectionSpecification` - the projection specification.

### Example
```
let projection = map.getProjection();
```
```

--------------------------------

### Initialize map with Leaflet

Source: https://maplibre.org/maplibre-gl-js/docs/guides/leaflet-migration-guide

Create a Leaflet map centered at [0, 0] with zoom level 2 and add an OpenStreetMap tile layer.

```javascript
const map = L.map('map').setView([0, 0], 2);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

```

--------------------------------

### Create a compact AttributionControl

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/AttributionControl

Use this example to create a map with the attribution control disabled and then add a new AttributionControl with the compact option set to true. This is useful for reducing the space taken by the attribution control.

```javascript
let map = new Map({attributionControl: false})
    .addControl(new AttributionControl({
        compact: true
    }));
```

--------------------------------

### Replace Mapbox CDN links with MapLibre CDN links

Source: https://maplibre.org/maplibre-gl-js/docs/guides/mapbox-migration-guide

Shows how to replace the Mapbox CDN script and stylesheet links with MapLibre's unpkg.com links. Replace the `#.#.#` version placeholder with the desired version.

```diff
-    <script src="https://api.mapbox.com/mapbox-gl-js/v#.#.#/mapbox-gl.js"></script>
-    <link
-      href="https://api.mapbox.com/mapbox-gl-js/v#.#.#/mapbox-gl.css"
-      rel="stylesheet"
-    />


+    <script type="module">
+      import * as maplibregl from 'https://unpkg.com/maplibre-gl@#.#.#/dist/maplibre-gl.mjs';
+    </script>
+    <link
+      href="https://unpkg.com/maplibre-gl@#.#.#/dist/maplibre-gl.css"
+      rel="stylesheet"
+    />

```

--------------------------------

### setSourceTileLodParams example

Source: https://maplibre.org/maplibre-gl-js/docs/API/classes/Map

Changes the tile Level of Detail behavior for a specified source. Parameters have no effect when pitch is 0 and the largest effect when the horizon is visible. The example sets maxZoomLevelsOnScreen to 4.0, tileCountMaxMinRatio to 3.0, and sourceId to 'terrain'.

```javascript
map.setSourceTileLodParams(4.0, 3.0, 'terrain');
```
Tokens:
Raw