SolidJS Component Library for Mapbox GL & MapLibre GL

SolidJS Component Library for Mapbox GL JS and MapLibre GL. Both libraries render interactive maps from vector tiles and Map styles using WebGL. This project is intended to be as close as possible to the Mapbox GL JS API.

Documentation & Examples

Getting Started

Mapbox GL

pnpm add mapbox-gl solid-map-gl
yarn add mapbox-gl solid-map-gl
npm  i   mapbox-gl solid-map-gl

MapLibre

pnpm create solid && pnpm i
# Install MapLibre package and placeholder Mapbox package
pnpm add solid-map-gl maplibre-gl mapbox-gl@npm:[email protected]
pnpm dev

[!NOTE] npm enforces peer-dependency version ranges more strictly than pnpm/yarn — the placeholder above satisfies them on pnpm/yarn, but npm install will fail with an ERESOLVE error since the placeholder's version doesn't match solid-map-gl's declared mapbox-gl range. Use pnpm/yarn for this install, or run npm install --legacy-peer-deps if you must use npm.

Solid Start

pnpm create solid && pnpm i
pnpm add mapbox-gl solid-map-gl
pnpm dev

[!CAUTION] If you use vite and get the error 'mapbox-gl.js' does not provide an export named 'default', add this to your vite.config.ts:

optimizeDeps: { include: ['mapbox-gl'] }

Components

| Component | Description | | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | MapGL | Represents map on the page | | Source | Sources specify the geographic features to be rendered on the map | | Layer | Layers specify the Sources | | Layer3D | Component for BabylonJS or ThreeJS | | Atmosphere | Specify the Atmosphere | | Light | Specify the Light Source | | Terrain | Specify the Terrain | | Image | Adds an image to the map style | | Popup | Component for Mapbox GL JS Popup | | Marker | Component for Mapbox GL JS Marker | | Control | Represents the map's control | | Camera | Map's camera view | | Draw | Draw Control view | | DeckOverlay | Adds a deck.gl overlay on top of the map |

Usage with Mapbox

Pass the Mapbox access token via <MapGL> options or .env file as VITE_MAPBOX_ACCESS_TOKEN

import { render } from "solid-js/web";
import { Component, createSignal } from "solid-js";
import MapGL, { Viewport, Source, Layer } from "solid-map-gl";
import 'mapbox-gl/dist/mapbox-gl.css'

const App: Component = () => {
  const [viewport, setViewport] = createSignal<Viewport>({
    center: [-122.45, 37.78],
    zoom: 11,
  });

  return (
    <MapGL
      options={{ style: "mb:light" }}
      viewport={viewport()}
      onViewportChange={(evt: Viewport) => setViewport(evt)}
    >
      <Source
        source={{
          type: "geojson",
          data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
        }}
      >
        <Layer
          type="circle"
          paint={{
            "circle-radius": 8,
            "circle-color": "red",
          }}
        />
      </Source>
    </MapGL>
  );
};

render(() => <App />, document.getElementById("app")!);

Usage with MapLibre

Install MapLibre package and placeholder Mapbox package

pnpm add solid-map-gl maplibre-gl mapbox-gl@npm:[email protected]
yarn add solid-map-gl maplibre-gl mapbox-gl@npm:[email protected]
npm  i   solid-map-gl maplibre-gl mapbox-gl@npm:[email protected]

[!NOTE] npm enforces peer-dependency version ranges more strictly than pnpm/yarn — the placeholder above satisfies them on pnpm/yarn, but npm install will fail with an ERESOLVE error since the placeholder's version doesn't match solid-map-gl's declared mapbox-gl range. Use pnpm/yarn for this install, or run npm install --legacy-peer-deps if you must use npm.

import { render } from "solid-js/web";
import { Component, createSignal } from "solid-js";
import MapGL, { Viewport } from "solid-map-gl";
import * as maplibre from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'

const App: Component = () => {
  const [viewport, setViewport] = createSignal<Viewport>({
    center: [-122.45, 37.78],
    zoom: 11,
  });

  return (
    <MapGL
      mapLib={maplibre} // <- Pass MapLibre package here
      options={{ style: 'https://demotiles.maplibre.org/style.json' }}
      viewport={viewport()}
      onViewportChange={(evt: Viewport) => setViewport(evt)}
    />
  );
};

render(() => <App />, document.getElementById("app")!);

Roadmap

• [x] Basic Mapbox GL Functionality
• [x] Include Map Controls
• [x] Include Fog, Sky, and Terrain
• [x] Include Popup and Markers
• [x] Minify bundle & reduce size
• [x] Add basemap switching
• [x] Include event handling
• [x] Sync Maps
• [x] Add MapLibre support
• [x] Add debug functionality
• [x] Add draw functionality
• [x] Add 3D Layer support
• [x] Add deck.gl support