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

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

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