Layers

A layer, also known as a style layer, provides style instructions that describe the visual properties that apply when rendering the layer on a map. The required properties and available options are defined by the GL Style Specification.

Except for layers of the background type, each layer needs to refer to a source. Layers take the data that they get from a source, optionally filter features, and then define how those features are styled.

AnimatedRouteLayer

AnimatedRouteLayer is custom layer that animates a path or route on the map based on keyframes or GeoJSON data. It supports animated line styling and camera following, making it ideal for visualizing routes, playback tracks, or timeline-based geographic events.

At present, to avoid problems arising from the camera being manipulated by two animations at any one time, there can only ever be one instance of AnimatedRouteLayer on the map at any time. This API may change in the future, but at present you must remove each instance of AnimatedRouteLayer from the map before adding another.

Features

  • Animate a path using keyframes or GeoJSON data
  • Optional animated stroke styles to indicate progress
  • Camera movement smoothing, following along the route
  • Configurable duration, easing, delay, and iterations via geojson properties
  • Event-based lifecycle hooks for adaptability
  • Optional manual frame advancement (e.g., for scrubbing or syncing with map events, scroll, etc.)

Source types: GeoJSONSource

Example

background

The background style layer covers the entire map. Use a background style layer to configure a color or pattern to show below all other map content. Check out all the background layer options and properties.

Example

circle

The circle style layer renders one or more filled circles on a map. You can use a circle layer to configure the visual appearance of point or point collection features in vector tiles. A circle layer renders circles whose radii are measured in screen units. Check out all the circle layer options and properties.

Source types: GeoJSONSource | Vector

Example

fill

The fill style layer renders one or more filled (and optionally stroked) polygons on a map. You can use a fill layer to configure the visual appearance of polygon or multipolygon features. Check out all the fill layer options and properties.

Source types: GeoJSONSource | Vector

Example

fill-extrusion

The fill-extrusion style layer renders one or more filled (and optionally stroked) extruded (3D) polygons on a map. You can use a fill-extrusion layer to configure the extrusion and visual appearance of polygon or multipolygon features. Check out all the fill-extrusion layer options and properties.

Source types: GeoJSONSource | Vector

Example

heatmap

The heatmap style layer renders a range of colors to represent the density of points in an area. Check out all the heatmap layer options and properties.

Source types: GeoJSONSource | Vector

Example

hillshade

The hillshade style layer renders digital elevation model (DEM) data on the client-side. The implementation only supports Terrain RGB and Mapzen Terrarium tiles. Check out all the hillshade layer options and properties.

Source types: Raster DEM

Example

line

The line style layer renders one or more stroked polylines on the map. You can use a line layer to configure the visual appearance of polyline or multipolyline features. Check out all the line layer options and properties.

Source types: GeoJSONSource | Vector

Example

raster

The raster style layer renders icon and text labels at points or along lines on a map. You can use a symbol layer to configure the visual appearance of labels for features in vector tiles. Check out all the raster layer options and properties.

Source types: ImageSource | Raster | VideoSource

Example

symbol

The symbol style layer renders icon and text labels at points or along lines on a map. You can use a symbol layer to configure the visual appearance of labels for features in vector tiles. Check out all the symbol layer options and properties.

Source types: GeoJSONSource | Vector

Example

Reference documentation of MapTiler SDK JS, an extension of MapLibre GL JS