Sources
The source types MapLibre GL JS can handle in addition to the ones described in the MapLibre Style Specification.
GeoJSONSource
A source containing GeoJSON. (See the Style Specification for detailed documentation of options.)
Example
Instance Members
For clustered sources, fetches the children of the given cluster on the next zoom level (as an array of GeoJSON features).
Parameters
(Callback<Array<GeoJSON.Feature>>)A
callback to be called when the features are retrieved (
(error, features) => { ... }
).
Returns
GeoJSONSource:
this
For clustered sources, fetches the zoom at which the given cluster expands.
Parameters
(Callback<number>)A
callback to be called when the zoom value is retrieved (
(error, zoom) => { ... }
).
Returns
GeoJSONSource:
this
For clustered sources, fetches the original points that belong to the cluster (as an array of GeoJSON features).
Parameters
(Callback<Array<GeoJSON.Feature>>)A
callback to be called when the features are retrieved (
(error, features) => { ... }
).
Returns
GeoJSONSource:
this
Example
Sets the GeoJSON data and re-renders the map.
Parameters
((Object | string))A
GeoJSON data object or a URL to one. The latter is preferable in the case of large GeoJSON files.
Returns
GeoJSONSource:
this
Related
VideoSource
A data source containing video. (See the Style Specification for detailed documentation of options.)
Example
Instance Members
Pauses the video.
Plays the video.
Related
ImageSource
A data source containing an image. (See the Style Specification for detailed documentation of options.)
Example
Instance Members
Sets the image's coordinates and re-renders the map.
Parameters
(Array<Array<number>>)Four
geographical coordinates,
represented as arrays of longitude and latitude numbers, which define the corners of the image.
The coordinates start at the top left corner of the image and proceed in clockwise order.
They do not have to represent a rectangle.
Returns
ImageSource:
this
Updates the image URL and, optionally, the coordinates. To avoid having the image flash after changing,
set the raster-fade-duration paint property on the raster layer to 0.
Parameters
(Object)Options
object.
| Name | Description |
|---|---|
| options.url | Required image URL. |
| options.coordinates | Four geographical coordinates, represented as arrays of longitude and latitude numbers, which define the corners of the image. The coordinates start at the top left corner of the image and proceed in clockwise order. They do not have to represent a rectangle. |
Returns
ImageSource:
this
CanvasSource
A data source containing the contents of an HTML canvas. See CanvasSourceOptions for detailed documentation of options.
Example
Instance Members
Disables animation. The map will display a static copy of the canvas image.
Enables animation. The image will be copied from the canvas to the map on each frame.
CanvasSourceOptions
Options to add a canvas source type to the map.
Properties
((string | HTMLCanvasElement)):
Canvas source from which to read pixels. Can be a string representing the ID of the canvas element, or the
HTMLCanvasElement
itself.
(Array<Array<number>>):
Four geographical coordinates denoting where to place the corners of the canvas, specified in
[longitude, latitude]
pairs.
(boolean?):
Whether the canvas source is animated. If the canvas is static (i.e. pixels do not need to be re-read on
every frame),
animate
should be set to
false
to improve performance.
JavaScript Maps API
Tutorials
- 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
- Geocoding
- 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
Examples
- 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