Geography and geometry
General utilities and types that relate to working with and manipulating geographic information or geometries.
LngLat object represents a given longitude and latitude coordinate, measured in degrees.
These coordinates are based on the WGS84
MapLibre GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match the GeoJSON specification.
Note that any MapLibre GL 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.
(number)Longitude, measured in degrees.
(number)Latitude, measured in degrees.
Converts an array of two numbers or an object with
LngLat object is passed in, the function returns it unchanged.
(LngLatLike)An array of two numbers or object to convert, or a
LngLatobject to return.
LngLat: A new
LngLatobject, if a conversion occurred, or the original
Returns the approximate distance between a pair of coordinates in meters Uses the Haversine Formula (from R.W. Sinnott, "Virtues of the Haversine", Sky and Telescope, vol. 68, no. 2, 1984, p. 159)
(LngLat)coordinates to compute the distance to
number: Distance in meters between the two coordinates.
LngLatBounds from the coordinates extended by a given
LngLatBounds completely contains the
0)Distance in meters from the coordinates to extend the bounds.
LngLatBounds: A new
LngLatBoundsobject representing the coordinates extended by the
A LngLat object, an array of two numbers representing
longitude and latitude,
or an object with
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.
Note that any Mapbox GL method that accepts a
LngLatBounds object as an argument or option
can also accept an
Array of two LngLatLike constructs and will perform an implicit
This flexible type is documented as LngLatBoundsLike.
(LngLatLike?)The southwest corner of the bounding box.
(LngLatLike?)The northeast corner of the bounding box.
Converts an array to a
LngLatBounds object is passed in, the function returns it unchanged.
Internally, the function calls
LngLat#convert to convert arrays to
(LngLatBoundsLike)An array of two coordinates to convert, or a
LngLatBoundsobject to return.
LngLatBounds: A new
LngLatBoundsobject, if a conversion occurred, or the original
A Point or an array of two numbers representing
y screen coordinates in pixels.
MercatorCoordinate object represents a projected three dimensional position.
MercatorCoordinate uses the web mercator projection (EPSG: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 north-west corner instead of the middle
MercatorCoordinate(0, 0, 0) is the north-west corner of the mercator world and
MercatorCoordinate(1, 1, 0) is the south-east corner. If you are familiar with
vector tiles it may be helpful to think
of the coordinate space as the
0/0/0 tile with an extent of
z dimension of
MercatorCoordinate is conformal. A cube in the mercator coordinate
space would be rendered as a cube.
(number)The x component of the position.
(number)The y component of the position.
0)The z component of the position.
EdgeInset object represents screen space padding applied to the edges of the viewport.
This shifts the apprent 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.
- Get Started
- Learn the basics
- Display Marker
- GeoJSON Polygon Layer
- GeoJSON Line Layer
- GeoJSON Point Layer
- Raster Layer
- GeoJSON MultiGeom Layer
- Custom Map
- 3D Map
- Choropleth GeoJSON
- Reverse Geocoding
- Geocoder component
- Countries filter
- Countries with data
- Elevation profile
- Center map by IP
- Disputed borders by IP
- Map language by IP
- Cookie consent by IP
- Scale control
- Style switcher
- Minimap control
- Legend control
- Choropleth Legend
- Add a 3D model
- Add a WMS source
- Add a canvas source
- Add a custom style layer
- Add a generated icon to the map
- Add a new layer below labels
- Add a pattern to a polygon
- Add a raster tile source
- Add a stretchable image to the map
- Add a third party vector tile source
- Add a vector tile source
- Add a video
- Add an animated icon to the map
- Add custom icons with Markers
- Add live realtime data
- Add multiple geometries from one GeoJSON source
- Add support for right-to-left scripts
- Animate a line
- Animate a marker
- Animate a point
- Animate a point along a route
- Animate a series of images
- Animate map camera around a point
- Attach a popup to a marker instance
- Center the map on a clicked symbol
- Change a layer's color with buttons
- Change a map's language
- Change building color based on zoom level
- Change the case of labels
- Change the default position for attribution
- Check if MapLibre GL JS is supported
- Create a draggable Marker
- Create a draggable point
- Create a gradient line using an expression
- Heatmap layer
- Hillshade layer
- Create a hover effect
- Polygon extrusion
- Create a time slider
- Style clusters
- Customize camera animations
- Disable map rotation
- Disable scroll zoom
- Display HTML clusters with custom properties
- Display a non-interactive map
- Display a popup
- Display a popup on click
- Display a popup on hover
- Display a satellite map
- Display and style rich text labels
- Display buildings in 3D
- Display line that crosses 180th meridian
- Display map navigation controls
- Draw GeoJSON points
- Extrude polygons for 3D indoor mapping
- Filter symbols by text input
- Filter symbols by toggling a list
- Fit a map to a bounding box
- Fit to the bounds of a LineString
- Fly to a location
- Fly to a location based on scroll position
- Generate and add a missing icon to the map
- Get coordinates of the mouse pointer
- Get features under the mouse pointer
- Jump to a series of locations
- Locate the user
- Measure distances
- Navigate the map with game-like controls
- Offset the vanishing point using padding
- Render world copies
- Restrict map panning to an area
- Set pitch and bearing
- Show drawn polygon area
- Show polygon information on click
- Slowly fly to a location
- Style lines with a data-driven property
- Toggle interactions
- Update a feature in realtime
- Use a fallback image
- Use locally generated ideographs
- Variable label placement
- View a fullscreen map
- View local GeoJSON
- View local GeoJSON (experimental)
- Visualize population density