README

remapgl

Declarative Mapbox GL bindings <🌎>

Quickly and easily create Mapbox GL maps with React components.

install

yarn install remapgl

use

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

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" />;
}

markers

import { Marker, RemapGL } from "remapgl";

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

layers

Layer order in the map is controlled by the order of the elements in the array provided to the 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>
  );
}

imperative functions

remapgl adopts a similar convention regarding Mapbox GL controls as React does for DOM objects. Components that wrap a Mapbox GL control, which exposes callable functions, 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.
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>
  );
}

Usage no npm install needed!