Repository files navigation

Declarative MapboxGL bindings <🌎>

Quickly and easily createMapboxGL maps withReact components. Create aMap then add children likeMarker,Layer,Popup, and other remapgl React components. See itlive at CodeSandbox.

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 usestyled components and other React libraries you already know to create custom content.

Full API and component documentation is available:https://limnous.com/remapgl/docs/.

There areguides with accompanyingCodeSandbox projects that illustrate how to use the remapgl components.

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