README

Solid Mapbox GL JS

Solid 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.

Installation
Components
Usage
Examples
Roadmap

Gallery

Installation

yarn add solid-map-gl

npm install --save solid-map-gl

Optional Dependencies

If you want to use LanguageControl and TrafficControl:

yarn add @mapbox/mapbox-gl-language @mapbox/mapbox-gl-traffic

npm install --save @mapbox/mapbox-gl-language @mapbox/mapbox-gl-traffic

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` style
Sky	Specify the Sky Layer
Fog	Specify the Fog Layer
Terrain	Specify the Terrain Layer
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

Usage

To use any of Mapbox’s tools, APIs, or SDKs, you’ll need a Mapbox access token. Mapbox uses access tokens to associate requests to API resources with your account. You can find all your access tokens, create new ones, or delete existing ones on your API access tokens page.

Static Map

By default, MapGL component renders in a static mode. That means that the user cannot interact with the map.

import MapGL from 'solid-map-gl'
;<MapGL
  options={{
    accessToken: { MAPBOX_ACCESS_TOKEN },
    style: 'mapbox://styles/mapbox/light-v10',
  }}
  viewport={{
    center: [-122.41, 37.78],
    zoom: 11,
  }}></MapGL>

Interactive Map

In most cases, you will want the user to interact with the map. To do this, you need to provide onViewportChange handler, that will update the map's viewport state.

import { createSignal } from 'solid-js'
import MapGL, { Viewport } from 'solid-map-gl'

const [viewport, setViewport] = createSignal({
    center: [-122.41, 37.78],
    zoom: 11
} as Viewport);

<MapGL
    options={{
        accessToken: { MAPBOX_ACCESS_TOKEN },
        style: 'mapbox://styles/mapbox/light-v10'
    }}
    viewport={viewport()}
    onViewportChange={evt => setViewport(evt)}>
</MapGL>

Map with Source and Layer

Sources specify the geographic features to be rendered on the map.

Layers specify the Sources styles. The type of layer is specified by the "type" property in the layers style object, and must be one of background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade.

Except for layers of the background type, each layer needs to refer to a source. Either buy referencing the id in sourceId or by nesting the layer within the source component. Layers take the data that they get from a source, optionally filter features, and then define how those features are styled.

import MapGL, { Source, Layer } from 'solid-map-gl';

<MapGL
    options={{
        accessToken: { MAPBOX_ACCESS_TOKEN },
        style: 'mapbox://styles/mapbox/light-v10'
    }}>
    <Source
        source={{
        type: 'vector',
        url: 'mapbox://mapbox.mapbox-terrain-v2'
    }}>
        <Layer style={{
            type: 'line',
            'source-layer': 'contour'
            paint: {
                'line-color': '#877b59',
                'line-width': 1,
            }
        }} />
    </Source>
</MapGL>

Map with GeoJSON Source

To draw a GeoJSON on a map, add Source with the type property set to geojson and data property set to a URL or inline GeoJSON.

import { createSignal } from 'solid-js'
import MapGL, { Source, Layer } from 'solid-map-gl'

const [viewport, setViewport] = createSignal({
  center: [-122.486052, 37.830348],
  zoom: 15,
})

const data = {
  type: 'Feature',
  geometry: {
    type: 'LineString',
    coordinates: [
      [-122.48369693756104, 37.83381888486939],
      [-122.48348236083984, 37.83317489144141],
      [-122.48339653015138, 37.83270036637107],
      [-122.48356819152832, 37.832056363179625],
      [-122.48404026031496, 37.83114119107971],
      [-122.48404026031496, 37.83049717427869],
      [-122.48348236083984, 37.829920943955045],
      [-122.48356819152832, 37.82954808664175],
      [-122.48507022857666, 37.82944639795659],
      [-122.48610019683838, 37.82880236636284],
      [-122.48695850372314, 37.82931081282506],
      [-122.48700141906738, 37.83080223556934],
      [-122.48751640319824, 37.83168351665737],
      [-122.48803138732912, 37.832158048267786],
      [-122.48888969421387, 37.83297152392784],
      [-122.48987674713133, 37.83263257682617],
      [-122.49043464660643, 37.832937629287755],
      [-122.49125003814696, 37.832429207817725],
      [-122.49163627624512, 37.832564787218985],
      [-122.49223709106445, 37.83337825839438],
      [-122.49378204345702, 37.83368330777276],
    ],
  },
}

;<MapGL
  options={{
    accessToken: { MAPBOX_ACCESS_TOKEN },
    style: 'mapbox://styles/mapbox/light-v10',
  }}
  viewport={viewport()}
  onViewportChange={evt => setViewport(evt)}>
  <Source
    source={{
      type: 'geojson',
      data: { data },
    }}>
    <Layer
      style={{
        type: 'line',
        layout: {
          'line-join': 'round',
          'line-cap': 'round',
        },
        paint: {
          'line-color': '#888',
          'line-width': 8,
        },
      }}
    />
  </Source>
</MapGL>

Custom Layers support

Custom layers allow a user to render directly into the Map's GL context using the map's camera.

Here is an example using deck.gl.

import { createSignal } from 'solid-js'
import MapGL, { Source, Layer } from 'solid-map-gl'
import { MapboxLayer } from '@deck.gl/mapbox'
import { ScatterplotLayer } from '@deck.gl/layers'

const [viewport, setViewport] = createSignal({
  center: [-74.5, 40],
  zoom: 9,
})

const myDeckLayer = new MapboxLayer({
  id: 'my-scatterplot',
  type: ScatterplotLayer,
  data: [{ position: [-74.5, 40], size: 1000 }],
  getPosition: d => d.position,
  getRadius: d => d.size,
  getColor: [255, 0, 0],
})

;<MapGL
  options={{
    accessToken: { MAPBOX_ACCESS_TOKEN },
    style: 'mapbox://styles/mapbox/light-v10',
  }}
  viewport={viewport()}
  onViewportChange={evt => setViewport(evt)}>
  <Layer customLayer={myDeckLayer} />
</MapGL>

Examples

Coming Soon

Roadmap

Basic Mapbox GL Functionality
Include Map Controls
Include Fog, Sky, and Terrain
Include Popup and Markers
Minify bundle & reduce size
Add basemap switching
Add edit functionality

Usage no npm install needed!