Source

This component allows one to create a map source using Solidjs. It may contain Layer components as children.

import { Source, Maplibre, CircleLayer } from "solidjs-maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
function App() {
  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>
  );
}

Properties

---

The props provided to this component should be conforming to the Mapbox source specification

id: string

Unique identifier of the source. If not provided, a default id will be assigned using Solidjs createUniqueId genertor.

source: Object

Defines the source specification with the props determined by the type of the source.

Source

---

source.tsx

Examples

---

Hover Styles

3D Terrain and Sky

Animate a series of images

Video on a map

Animate a line

Further Reading

---

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