MapProvider

The MapProvider component (imported from @carbonplan/maps/core) allows use of an external map object from Maplibre GL JS or Mapbox GL JS. Only the web-mercator projection is supported at this time. All imports should be from the /core namespace when used with MapProvider to avoid bundling unneeded mapbox-gl dependencies and mixing react context.

import { useRef, useEffect, useState } from 'react'
import { useThemedColormap } from '@carbonplan/colormaps'

import { MapProvider, Raster } from '@carbonplan/maps/core'
import { Map } from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'

const BringYourOwnMap = () => {
  const colormap = useThemedColormap('warm')
  const mapContainer = useRef()
  const map = useRef(null)
  const [isMapLoaded, setIsMapLoaded] = useState(false)

  useEffect(() => {
    if (mapContainer.current && !map.current) {
      map.current = new Map({
        container: mapContainer.current,
        style: {
          version: 8,
          sources: {
            // basemap sources
          },
          layers: [
            // basemap layers
          ],
        },
      })
      map.current.on('load', () => {
        setIsMapLoaded(true)
      })
    }
  }, [])

  return (
    <Box ref={mapContainer}>
      {isMapLoaded && map.current && (
        <MapProvider
          map={map.current}
          style={{
            zIndex: -1, // place raster below main map
          }}
        >
          <Raster
            colormap={colormap}
            clim={[-20, 30]}
            source={'demo/tavg'}
            variable={'tavg'}
          />
        </MapProvider>
      )}
    </Box>
  )
}