https://github.com/gishub4/solid-map-gl
Solid JS Components Library for Mapbox & MapLibre 🌏
https://github.com/gishub4/solid-map-gl
gis map mapbox mapbox-gl mapbox-gl-js maplibre maps solidjs webgl
Last synced: 7 months ago
JSON representation
Solid JS Components Library for Mapbox & MapLibre 🌏
- Host: GitHub
- URL: https://github.com/gishub4/solid-map-gl
- Owner: GIShub4
- License: mit
- Created: 2021-12-27T11:07:23.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-08-22T04:28:36.000Z (8 months ago)
- Last Synced: 2025-08-22T05:24:25.585Z (8 months ago)
- Topics: gis, map, mapbox, mapbox-gl, mapbox-gl-js, maplibre, maps, solidjs, webgl
- Language: TypeScript
- Homepage: https://gis-hub.gitbook.io/solid-map-gl/
- Size: 3.53 MB
- Stars: 126
- Watchers: 1
- Forks: 11
- Open Issues: 9
-
Metadata Files:
- Readme: .github/README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://gis-hub.gitbook.io/solid-map-gl)
# **_Solid Map GL_** for Mapbox & MapLibre
[](https://www.npmjs.com/package/solid-map-gl)
[](https://www.npmjs.com/package/solid-map-gl)
[](LICENSE/)
[](https://bundlephobia.com/package/solid-map-gl)
[](https://bundlephobia.com/package/solid-map-gl)
[SolidJS](https://www.solidjs.com/) Component Library for [Mapbox GL JS](https://github.com/mapbox/mapbox-gl-js) and [MapLibre GL.](https://maplibre.org/projects/maplibre-gl-js/) 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.](https://docs.mapbox.com/mapbox-gl-js/api/)
## [Documentation & Examples](https://gis-hub.gitbook.io/solid-map-gl)
[](https://gis-hub.gitbook.io/solid-map-gl)
## [Getting Started](https://gis-hub.gitbook.io/solid-map-gl/start)
### Installation
```shell
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](https://github.com/solidjs/solid-start)
```shell
pnpm create solid && pnpm i
pnpm add mapbox-gl solid-map-gl
pnpm dev
```
## [Components](https://gis-hub.gitbook.io/solid-map-gl/components)
| Component | Description |
| --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| [MapGL](https://gis-hub.gitbook.io/solid-map-gl/components/mapgl) | Represents map on the page |
| [Source](https://gis-hub.gitbook.io/solid-map-gl/components/source) | [Sources](https://docs.mapbox.com/mapbox-gl-js/api/#sources) specify the geographic features to be rendered on the map |
| [Layer](https://gis-hub.gitbook.io/solid-map-gl/components/layer) | [Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) specify the `Sources` |
| [Layer3D](https://gis-hub.gitbook.io/solid-map-gl/components/layer3d) | Component for [BabylonJS](https://www.babylonjs.com/) or [ThreeJS](https://threejs.org/) |
| [Atmosphere](https://gis-hub.gitbook.io/solid-map-gl/components/atmosphere) | Specify the Atmosphere |
| [Light](https://gis-hub.gitbook.io/solid-map-gl/components/light) | Specify the Light Source |
| [Terrain](https://gis-hub.gitbook.io/solid-map-gl/components/terrain) | Specify the Terrain |
| [Image](https://gis-hub.gitbook.io/solid-map-gl/components/image) | Adds an image to the map style |
| [Popup](https://gis-hub.gitbook.io/solid-map-gl/components/popup) | Component for [Mapbox GL JS Popup](https://docs.mapbox.com/mapbox-gl-js/api/#popup) |
| [Marker](https://gis-hub.gitbook.io/solid-map-gl/components/marker) | Component for [Mapbox GL JS Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker) |
| [Control](https://gis-hub.gitbook.io/solid-map-gl/components/control) | Represents the map's control |
| [Camera](https://gis-hub.gitbook.io/solid-map-gl/components/camera) | Map's camera view |
| [Draw](https://gis-hub.gitbook.io/solid-map-gl/components/draw) | Draw Control view |
## Usage with [Mapbox](https://docs.mapbox.com/mapbox-gl-js/guides/)
Pass the _Mapbox access token_ via ` options` or `.env` file as `VITE_MAPBOX_ACCESS_TOKEN`
```jsx
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 (
setViewport(evt)}
>
);
};
render(() => , document.getElementById("app")!);
```
## Usage with [MapLibre](https://maplibre.org/maplibre-gl-js-docs/api/)
Install MapLibre package and placeholder Mapbox package
```shell
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
```
```jsx
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 (
setViewport(evt)}
/>
);
};
render(() => , 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 library support