Flying Dice - World Map Kit React
React Components for Rendering the World Map Kit
Installation
yarn add @flying-dice/world-map-kit-reactSetup
Add Associated CSS Classes to ensure mapbox is displayed correctly:
// index.scss
@import "~mapbox-gl/dist/mapbox-gl.css";
@import "~@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
@import "~@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";Additionally, In a Production Bundle include the Mapbox JS script, i.e. here is an example of including the JS from a CDN.
<head>
<!-- Before -->
<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js'></script>
<!-- After -->
</head>This is a Workaround for the following issue: https://github.com/mapbox/mapbox-gl-js/issues/4359
Usage
Add a Context Provider in your Application
export const App: React.FC = () => {
return (
<WorldMapContextProvider>
...
</WorldMapContextProvider>
)
}Inside your chosen child container create a WorldMap component
import { WorldMap } from "@flying-dice/world-map-kit-react";
export const MapContainer: React.FC = () => {
return (
<WorldMap accessToken="..." enableGeocoder={true} elevation={true} />
)
}The WorldMap component will instantiate the WorldMap instance and set it via the
useWorldMapContext hook.
In Other Application Items throughout the tree you can now use the hook to access the WorldMapKit instance from the provider
For example this Status Bar component is using the onMouseMovement Observable from the WorldMapKit:
export const StatusBarContainer: React.FC = () => {
const { worldMapKit } = useWorldMapContext<WorldMap>()
const [cursorLocation, setCursorLocation] = useState<LatLong>({
lat: 0,
lng: 0,
})
useEffect(() => {
worldMapKit?.onMouseMovement.subscribe((e) => setCursorLocation(e.lngLat))
}, [worldMapKit])
return (
<>
<StatusBar cursorLocation={cursorLocation} />
</>
)
}To instantiate a Drawable world map simply use the DrawableWorldMap component rather than the
WorldMap component and replace the generic type in the Hook from WorldMapKit to
DrawableWorldMapKit