---
title: "Coordinates | JavaScript maps SDK"
description: "Geographic coordinate utilities and types in MapTiler SDK JS."
---

# Coordinates

General utilities and types for working with and manipulating geographic information or geometries.

## LngLat

A `LngLat` object represents a longitude and latitude coordinate, measured in degrees. These coordinates are based on the [WGS84 (EPSG:4326) standard](https://en.wikipedia.org/wiki/World_Geodetic_System#WGS84).

SDK JS uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match the [GeoJSON specification](https://tools.ietf.org/html/rfc7946).

Any SDK JS method that accepts a `LngLat` object as an argument or option can also accept an `Array` of two numbers and will perform an implicit conversion. This flexible type is documented as [LngLatLike](#lnglatlike).

**Example**

```js
const ll = new maptilersdk.LngLat(-123.9749, 40.7736);
ll.lng; // = -123.9749
```

### API reference

[Class LngLat](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLat/)

### Related examples

-   [Get coordinates of the mouse pointer](https://docs.maptiler.com/sdk-js/examples/mouse-position/)
-   [Display a popup](https://docs.maptiler.com/sdk-js/examples/popup/)
-   [Create a timeline animation](https://docs.maptiler.com/sdk-js/examples/timeline-animation/)

## Point

A `Point` represents `x` and `y` screen coordinates in pixels.

**Example**

```js
const p1 = new Point(-77, 38); // a PointLike which is a Point
const p2 = [-77, 38]; // a PointLike which is an array of two numbers
```

### API reference

[Class Point](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.Point/)

## LngLatBounds

A `LngLatBounds` object represents a geographical bounding box, defined by its southwest and northeast points in longitude and latitude.

If no arguments are provided to the constructor, a `null` bounding box is created.

Any SDK JS method that accepts a `LngLatBounds` object as an argument or option can also accept an `Array` of two [LngLatLike](#lnglatlike) constructs and will perform an implicit conversion. This flexible type is documented as [LngLatBoundsLike](#lnglatboundslike).

**Example**

```js
const sw = maptilersdk.LngLat(-73.9876, 40.7661);
const ne = maptilersdk.LngLat(-73.9397, 40.8002);
const llb = new maptilersdk.LngLatBounds(sw, ne);
```

### API reference

[Class LngLatBounds](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.LngLatBounds/)

## LngLatLike

A [LngLat](#lnglat) object, an array of two numbers representing longitude and latitude, or an object with `lng` and `lat` or `lon` and `lat` properties.

**Example**

```js
const v1 = new maptilersdk.LngLat(-122.420679, 37.772537);
const v2 = [-122.420679, 37.772537];
const v3 = {lon: -122.420679, lat: 37.772537};
```

### API reference

[Type Alias LngLatLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatLike/)

## PointLike

A [Point](#point) or an array of two numbers representing `x` and `y` screen coordinates in pixels.

**Example**

```js
const p1 = new Point(-77, 38); // a PointLike which is a Point
const p2 = [-77, 38]; // a PointLike which is an array of two numbers
```

### API reference

[Type Alias PointLike](https://docs.maptiler.com/sdk-js/api-reference/types/PointLike/)

## LngLatBoundsLike

A [LngLatBounds](#lnglatbounds) object, an array of [LngLatLike](#lnglatlike) objects in `[sw, ne]` order, or an array of numbers in `[west, south, east, north]` order.

**Example**

```js
const v1 = new maptilersdk.LngLatBounds(
  new maptilersdk.LngLat(-73.9876, 40.7661),
  new maptilersdk.LngLat(-73.9397, 40.8002)
);
const v2 = new maptilersdk.LngLatBounds([-73.9876, 40.7661], [-73.9397, 40.8002])
const v3 = [[-73.9876, 40.7661], [-73.9397, 40.8002]];
```

### API reference

[Type Alias LngLatBoundsLike](https://docs.maptiler.com/sdk-js/api-reference/types/LngLatBoundsLike/)

## MercatorCoordinate

A `MercatorCoordinate` object represents a projected three-dimensional position.

`MercatorCoordinate` uses the Web Mercator projection ([EPSG:3857](https://epsg.io/3857)) with slightly different units:

-   The size of 1 unit is the width of the projected world instead of the “mercator meter”
-   The origin of the coordinate space is at the northwest corner instead of the middle

For example, `MercatorCoordinate(0, 0, 0)` is the northwest corner of the mercator world and `MercatorCoordinate(1, 1, 0)` is the southeast corner. If you are familiar with [vector tiles](https://github.com/mapbox/vector-tile-spec), it may be helpful to think of the coordinate space as the `0/0/0` tile with an extent of `1`.

The `z` dimension of `MercatorCoordinate` is conformal. A cube in the mercator coordinate space would be rendered as a cube.

**Example**

```js
const nullIsland = new maptilersdk.MercatorCoordinate(0.5, 0.5, 0);
```

### API reference

[Class MercatorCoordinate](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.MercatorCoordinate/)

### Related examples

-   [Add a custom style layer](https://docs.maptiler.com/sdk-js/examples/custom-style-layer/)

## EdgeInsets

An `EdgeInsets` object represents screen space padding applied to the edges of the viewport. This shifts the apparent center or the vanishing point of the map. This is useful for adding floating UI elements on top of the map and having the vanishing point shift as UI elements resize.

### API reference

[Class EdgeInsets](https://docs.maptiler.com/sdk-js/api-reference/classes/Externals.EdgeInsets/)