Solid Map GL for Mapbox & MapLibre

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

Installation

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

Use with Solid Start

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

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

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({
    center: [-122.45, 37.78],
    zoom: 11,
  } as Viewport);

  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
          style={{
            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:empty-npm-package@1.0.0
yarn add solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0
npm  i   solid-map-gl maplibre-gl mapbox-gl@npm:empty-npm-package@1.0.0

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({
    center: [-122.45, 37.78],
    zoom: 11,
  } as Viewport);

  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 library support