@flying-dice/world-map-kit-react NPM

Flying Dice - World Map Kit React

React Components for Rendering the World Map Kit

Installation

yarn add @flying-dice/world-map-kit-react

Setup

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