remapgl

Declarative MapboxGL bindings <🌎>

Quickly and easily create MapboxGL maps with React components. Create a Map then add children like Marker, Layer, Popup, and other remapgl React components. See it live at CodeSandbox.

Getting Started

Add the remapgl package to your application:

yarn add remapgl

Then import the components you want to use:

import { Map, Layer, Marker } from "remapgl";

The Map component is the parent element of a map. Simply add other components as children to build a map with data and interactive components like Layer and Marker.

It's easy to customize Marker and Popup components by giving them child components. This allows you to use styled components and other React libraries you already know to create custom content.

API

You probably want to start with the Map component.

Attribution

An AttributionControl control presents the map's attribution information.

Layer

Display a set of information on a map.

Map

The root component of remapgl; creates and displays a map.

Marker

Creates a marker component.

Navigation

Creates the navigation control in the map that contains zoom buttons and a compass.

Popup

Provides information when the user manipulates a control.

Guides

There are guides with accompanying CodeSandbox projects that illustrate how to use the remapgl components.

Sample

<Map
  accessToken="my_token"
  center={[-68.8008887, 44.5591077]}
  zoom={9}
>
  {
    markers.map(marker => (
      <Marker
        location={marker.location}
      >{marker.name}</Marker>
    ))
  }
  <Layer
    id={selectedLayer.id}
    paint={selectedLayerPaint}
    source={selectedLayer.source}
    type="path"
  />
  {
    layers.filter(layer => layer.id !== selectedLayer.id)
      .map(layer => (
        <Layer
          id={layer.id}
          paint={layerPaint}
          source={layer.source}
          type="path"
        />
      ))
  }
</Map>