remapgl
v2.4.5
Published
Declarative Mapbox GL bindings <๐>
Downloads
28
Readme
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>
);
}