React-city-space-mapbox NPM

react-city-space-mapbox

by the Growth Lab at Harvard's Center for International Development

Visualize the City Space using Mapbox

This package is part of Harvard Growth Lab’s portfolio of software packages, digital products and interactive data visualizations. To browse our entire portfolio, please visit The Viz Hub at growthlab.app. To learn more about our research, please visit Harvard Growth Lab’s home page.

View live example ↗

Install

npm install --save react-city-space-mapbox

Usage

import React, {useRef} from 'react'
import OptionsBar from './OptionsBar' // child components can use the map context to trigger events
import CitySpaceMap from 'react-city-space-mapbox'

const App = () => {
  const rootRef = useRef<HTMLDivElement | null>(null);
  return (
    <React.Fragment>
      <CitySpaceMap
        accessToken={accessToken}
        rootRef={rootRef}
        cityGeoJson={cityGeoJson}
        cityUMapJson={cityUMapJson}
      >
        <OptionsBar />
      </CitySpaceMap>
      <Root ref={rootRef} />
    </React.Fragment>
  );
}

export default App