react-mapbox-light
A modern and light adaptation of mapbox-gl for React.
Components
- MapboxMap
- GeoJSON
- PopUp
Getting Started
npm i @carnallfarrar/react-mapbox-light mapbox-gl --save
You will need to add mapbox CSS by importing it into your JS/TS files or inject it into your HTML
import "mapbox-gl/dist/mapbox-gl.css";
<html>
<head>
...
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css"
rel="stylesheet"
/>
</head>
</html>import { MapboxMap, GeoJSON, PopUp } from 'react-mapbox-light';
...
<MapboxMap
token={process.env.REACT_APP_MAPBOX_TOKEN!}
control="bottom-left"
scrollZoom={false}
mapboxOptions={{
style: "mapbox://styles/mapbox/light-v10",
center: [-2.2783131, 53.1400067],
zoom: 6,
}}
>
<GeoJSON
data={geojson}
id="outline-layer"
layers={[
{
id: "outline",
type: "line",
source: "outline-layer",
layout: {},
paint: {
"line-color": "#fff",
"line-width": 2,
},
},
]}
onMouseMove={(e, features) => handleMouseMove(e, features)}
/>
<PopUp
lnglat={popUpProperty?.lnglat}
closeButton={false}
closeOnClick={true}
>
<div>Popup content here!</div>
</PopUp>
</MapboxMap>Documentation
MapboxMap
This is the main component used to render a Mapbox map into the DOM.
Properties
| Property | type | Required | Description |
|---|---|---|---|
| token | string | Yes | Mapbox GL token to use for the map |
| control | string | No | No control is diplayed if not provided, if provided value should be the position of the control. |
| scrollZoom | boolean | No | default to True. if provided with false it will disable zoom on scroll |
| mapboxOptions | object | No | Mapbox options to pass to the map, see mapbox doc |
| onStyleLoad | Function | No | a callback function called when the map style has loaded |
GeoJSON
a GeoJSON component instantiating a source and multiple layer for a given geojson.
Properties
| Property | type | Required | Description |
|---|---|---|---|
| data | Object | Yes | The data for the GeoJSON to display |
| id | string | No | The ID to use to display the source provided as data |
| layers | Array | Yes | Mapbox layer(s) to use to display GeoJSON provided as data |
| onClick | Function | No | onClick event provided to all layers displayed |
| onMouseEnter | Function | No | onMouseEnter event provided to all layers displayed |
| onMouseLeave | Function | No | onMouseLeave event provided to all layers displayed |
PopUp
using the mapboxgl inbuilt popup functionality you can include a React component or plain HTML as a child component to populate the popup content
Properties
| Property | type | Required | Description |
|---|---|---|---|
| latlng | mapboxgl.LngLat | Yes | The lat and long coordinates of the mouse position |
| closeButton | Boolean | Yes | Add a close button to the popup |
| closeOnClick | Boolean | Yes | Close the popup on click anywhere in the map |