description: Solid Map GL provides Mapbox functionality within SolidJS applications cover: docs/header.png coverY: -136.56381942189023 layout: landing

Introduction

SolidJS Component Library for Mapbox GL JS. Mapbox GL JS is a JavaScript library that renders interactive maps from vector tiles and Mapbox styles using WebGL. This project is intended to be as close as possible to the Mapbox GL JS API.

{% content-ref url="docs/start.md" %} start.md {% endcontent-ref %}

Code example

import { render } from "solid-js/web";
import { Component, createSignal } from "solid-js";
import MapGL, { Viewport } from "solid-map-gl";

const Map: Component = () => {
  const [viewport, setViewport] = createSignal({
    center: [0, 0],
    zoom: 6,
  } as Viewport);

  return (
    <MapGL
      options={{
        accessToken: MAPBOX_ACCESS_TOKEN,
        style: "mb:light",
      }}
      viewport={viewport()}
      onViewportChange={(evt: Event) => setViewport(evt)}
    ></MapGL>
  );
};

render(() => <Map />, 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 draw functionality
• Add debug console