useAtlas-beta

A powerful and easy to use react-hooks library to accelerate web maps development.

useAtlas is built on top of deck.gl so they are fully compatible with each other.

Install

npm install --save use-atlas

yarn add use-atlas

Usage

useAtlas is easy to use and setup.

First setup the provider

AtlasProvider provides the Atlas state and dispatcher witch will be consumed by all its hooks.

import App from './App';
import { AtlasProvider } from 'use-atlas';

export default function App() {
  return (
    <AtlasProvider>
      <App />
    </AtlasProvider>
  );
}

Import the Atlas component and hooks

You can now have maps and layers wherever you like inside your App.

import { StaticMap } from 'react-map-gl';

import { Atlas, useLayer } from 'use-atlas';

function App() {
  const [setData, setConfig] = useLayer(geojson);

  return (
    <>
      <div className='map-container'>
        <Atlas>
          <StaticMap mapboxApiAccessToken={TOKEN} />
        </Atlas>
      </div>
    </>
  );
}

export default App;

Did you notice the StaticMap? It is your choice. useAtlas is agnostic about which static map service you chose. For more information see using-with-map.

API

useAtlas is built on top of deck.gl, so they share most of the same API. The hooks are abstrations on top of deck.gl layers.

Components

AtlasProvider

AtlasProvider provides the Atlas state and dispatcher witch will be consumed by all its hooks.

import { AtlasProvider } from 'use-atlas'

export default function App() {
  return (
    <AtlasProvider>
      <App>
    </AtlasProvider>
  )
}

Atlas

The map compoment, it is a wrapper around DeckGL React component.

Hooks

useLayer

The more basic hook, it renders a geoJson or a array of features. All other hooks are composed from it.

const [setData, setConfig] = useLayer(geojson);

useChoroplet

Renders a choroplet from a array of features

const [setData, setIndicator, setDomain] = useChoropleth(
  featuresArray,
  'someIndicator',
  [1, 3, 6, 11]
);

License

MIT © DaviTeodoro