0.9.1 • Published 4 years ago
@sofarocean/mapbox-context v0.9.1
mapbox-context
: A React wrapper for Mapbox GL JS built for the era of React context and hooks
Setup
To include this library in your project, you must also link the Mapbox CSS in your document <head>
section:
<link
href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css"
rel="stylesheet"
/>
Usage
Create a Mapbox map:
<MapboxMap
token={mapboxPublicAccessToken}
styleUrl={mapboxStyleUrl}
width="100%"
height="100%"
/>
Render layers as children of the map:
<MapboxMap
token={mapboxPublicAccessToken}
styleUrl={mapboxStyleUrl}
width="100%"
height="100%"
>
<LineLayer id="line" color="rgba(255,0,0,1)" width={4} line={geojsonLine} />
<DOMLayer position={{ longitude: -122, latitude: 38 }}>
Any custom DOM Content
</DOMLayer>
</MapboxMap>
Access the map and its properties from within a child component using context:
import { MapboxMapContext } from "@sofarocean/mapbox-context";
const MyMapComponent: React.FC<{}> = () => {
const { map, transform } = useContext(MapboxMapContext);
return <div>Zoom level is: {transform.zoom}</div>;
};
Declaratively register map even handlers:
import { useMapEvent } from "@sofarocean/mapbox-context";
// Must be mounted within a `MapboxMap` context
const MyMapComponent: React.FC<{}> = () => {
const [position, setPosition] = useState<[number, number] | null>(null);
const handleClick = useCallback((ev) => {
setPosition(ev.lngLat);
}, []);
// Whenver the map is clicked, update this component's state
useMapEvent("click", handleClick);
return <div>Last clicked position was: ({position?.join(", ")})</div>;
};
0.9.1
4 years ago
0.9.0
4 years ago
0.8.0
4 years ago
0.7.0
4 years ago
0.6.0
4 years ago
0.5.2
4 years ago
0.5.1
4 years ago
0.5.0
4 years ago
0.4.7
4 years ago
0.4.6
4 years ago
0.4.5
4 years ago
0.4.3
4 years ago
0.4.2
4 years ago
0.4.1
4 years ago
0.3.3
4 years ago
0.3.0
4 years ago
0.3.2
4 years ago
0.3.1
4 years ago
0.2.0
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago