use-atlas v0.6.3
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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago