remapgl v2.3.2-alpha.16
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>
);
}
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago