Layer

This component allows apps to create a map layer using Solidjs.

Note

This Component must be wrapped by a source layer

The underlying factory function for each layer component encompasses a createLayerComponent utility which generates SolidJS components for MapLibre GL JS layers.

It abstracts the boilerplate for adding, updating, and removing layers declaratively.

This function is used to define typed components like :

• BackgroundLayerSpecification
• FillLayerSpecification
• LineLayerSpecification
• SymbolLayerSpecification
• RasterLayerSpecification
• CircleLayerSpecification
• HeatmapLayerSpecification
• HillshadeLayerSpecification
• FillExtrusionLayerSpecification
• SkyLayerSpecification
• ColorReliefLayerSpecification

import {
  Source,
  Layer
  Maplibre,
} from  "solidjs-maplibre-gl";
const App: Component = () => {
  return (
        <Maplibre
          style={{
            "margin-top": "20px",
            height: "400px",
            width: "100%",
          }}
          options={{
            center: [-122.4, 37.8],
            zoom: 14,
          }}
        >
          <Source
            id="my-data"
            source={{
              type: "geojson",
              data: geojson,
            }}
          >
            <CircleLayer
              layer={{
                paint: {
                  "circle-radius": 10,
                  "circle-color": "#007cbf",
                },
              }}
            />
          </Source>
        </Maplibre>
    );
};

export default App;

Properties

---

Reactive Properties

---

id: string

Optional ID for the layer. If omitted, a default id will be assigned using Solidjs createUniqueId genertor.

layer: Omit<LineLayerSpecification, “type” | “id” | “source”>

T The layer definition excluding the id, source, and type fields. These are automatically injected by the factory component.

This includes:

paint: Paint properties (e.g. colors, opacity, radius)

layout: Layout properties

filter: An expression used to filter features

minzoom, maxzoom: Optional zoom range

Callbacks

---

onclick: (evt: MapEvent) => void

Called when the layer is clicked on.

ondblclick: (event: MapLayerMouseEvent ) => void

Called when a pointing device (usually a mouse) is pressed and released twice at the same point on the layer in rapid succession.

onmousedown: (event: MapLayerMouseEvent ) => void

Called when a pointing device (usually a mouse) is pressed within the layer.

onmouseup: (event: MapLayerMouseEvent ) => void

Called when a pointing device (usually a mouse) is released within the layer.

onmousemove: (event: MapLayerMouseEvent ) => void

Called when a pointing device (usually a mouse) is moved while the cursor is inside the map. As you move the cursor across the layer, the event will fire every time the cursor changes position within the layer.

onmouseenter: (event: MapLayerMouseEvent ) => void

Called when a pointing device (usually a mouse) enters a visible portion of the layer(s).

onmouseleave: (event: MapLayerMouseEvent ) => void

Called when a pointing device (usually a mouse) leaves a visible portion of the layer(s) or moves from the layer to outside the map canvas.

onmouseout: (event: MapLayerMouseEvent ) => void

Called when a point device (usually a mouse) leaves the map’s canvas.

ontouchstart: (event: MapLayerTouchEvent) => void

Called when a touchstart event occurs within the layer.

ontouchend: (event: MapLayerTouchEvent) => void

Called when a touchend event occurs within the layer.

ontouchmove: (event: MapLayerTouchEvent) => void

Called when a touchmove event occurs within the layer.

ontouchcancel: (event: MapLayerTouchEvent) => void

Called when a touchcancel event occurs within the layer.

Source

---

layer.tsx

Examples

---

3D Terrain and Sky

Animate a series of images

Video on a map

Further Reading

---

You can refer to the layer specification docs for full option details for each layer type.