remapgl

Declarative Mapbox GL bindings <🌎>

Quickly and easily create Mapbox GL maps with React components.

Install

yarn add remapgl

Use

Components accept most of the properties described in the Mapbox GL documentation as props.

Create a map

The root component of a map is RemapGL, all other components must be children of RemapGL.

import { RemapGL } from "remapgl";

export function App() {
  return <RemapGL accessToken="your access token" />;
}

Add Markers to a map

import { Marker, RemapGL } from "remapgl";

export function App() {
  return (
    <RemapGL accessToken="your access token">
      <Marker lnglat={{ lng: -68.2954881, lat: 44.3420759 }} />
    </RemapGL>
  );
}

Map layers

Layer order in the map is controlled by the order of the elements in the array provided to <LayerCollection> via its layers prop.

import { CircleLayer, CirclePaint } from "mapbox-gl";
import { FeatureCollection, Geometry } from "geojson";
import { LayerCollection, RemapGL } from "remapgl";

export function App() {
  return (
    <RemapGL accessToken="your access token">
      <LayerCollection layers={layerData} />
    </RemapGL>
  );
}

const data: FeatureCollection<Geometry, Record<string, any>> = {
  features: [
    {
      geometry: {
        coordinates: [-68.18928528, 44.32134247],
        type: "Point"
      },
      properties: {
        title: "Thunder Hole"
      },
      type: "Feature"
    }
  ],
  type: "FeatureCollection"
};

const paint: CirclePaint = {
  "circle-color": "#222",
  "circle-radius": {
    base: 1.15,
    stops: [
      [10, 5],
      [14, 5]
    ]
  },
  "circle-stroke-color": "#FFF",
  "circle-stroke-opacity": 0.8,
  "circle-stroke-width": {
    base: 1.15,
    stops: [
      [10, 3],
      [14, 3]
    ]
  }
};

const layerData: CircleLayer[] = [
  {
    id: "black",
    paint,
    source: { data, type: "geojson" },
    type: "circle"
  }
];

Other controls

import {
  AttributionControl,
  GeolocateControl,
  NavigationControl,
  RemapGL,
  ScaleControl,
  FullscreenControl
} from "remapgl";

export function App() {
  return (
    <RemapGL accessToken="your access token">
      <AttributionControl />
      <FullscreenControl />
      <GeolocateControl />
      <NavigationControl showCompass showZoom />
      <ScaleControl />
    </RemapGL>
  );
}

Control instance members

remapgl adopts a similar convention regarding Mapbox GL controls as React does for HTML DOM objects. Components that wrap a Mapbox GL control, which exposes instance members, support the MbxObj interface. A callback function provided to such a component's obj prop will be invoked with a single argument that is the current instance of the Mapbox GL control.

The following components support the MbxObj interface:

• RemapGL: returns mapboxgl.Map.
• Marker: returns: mapboxgl.Marker.
• MapPopup: returns mapboxgl.Popup.
• GeolocateControl: returns mapboxgl.GeoLocateControl.

In the following example the GeolocateControl returns the underlying Mapbox GL control which is used to trigger the request to start using geo-location.

import { GeolocateControl, RemapGL } from "remapgl";

export function App() {
  return (
    <RemapGL accessToken="your access token">
      <GeolocateControl obj={control => control.trigger()} />
    </RemapGL>
  );
}