https://github.com/rlmcneary2/remapgl
Declarative MapboxGL bindings <🌎>
https://github.com/rlmcneary2/remapgl
geography latitiude longitude map mapbox mapbox-gl mapboxgl react reactjs
Last synced: 30 days ago
JSON representation
Declarative MapboxGL bindings <🌎>
- Host: GitHub
- URL: https://github.com/rlmcneary2/remapgl
- Owner: rlmcneary2
- Created: 2019-08-30T01:13:34.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T22:00:07.000Z (over 3 years ago)
- Last Synced: 2025-05-22T01:09:05.871Z (about 1 year ago)
- Topics: geography, latitiude, longitude, map, mapbox, mapbox-gl, mapboxgl, react, reactjs
- Language: TypeScript
- Homepage:
- Size: 16.4 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# remapgl
Declarative MapboxGL bindings <🌎>
Quickly and easily create [MapboxGL](https://docs.mapbox.com/mapbox-gl-js/api/) maps with [React](https://reactjs.org/) components. Create a [Map](/map) then add children like [Marker](/marker), [Layer](/layer), [Popup](/popup), and other remapgl React components. See it [live at CodeSandbox](https://codesandbox.io/dashboard/teams/e4d38869-8850-4bdf-b24b-6c8f52e2256c/sandboxes).
## Getting Started
Add the remapgl package to your application:
```
yarn add remapgl
```
Then import the components you want to use:
```
import { Map, Layer, Marker } from "remapgl";
```
The Map component is the parent element of a map. Simply add other components as children to build a map with data and interactive components like Layer and Marker.
It's easy to customize Marker and Popup components by giving them child components. This allows you to use [styled components](https://emotion.sh/docs/styled) and other React libraries you already know to create custom content.
## API
Full API and component documentation is available: [https://limnous.com/remapgl/docs/](https://limnous.com/remapgl/docs/).
## Guides
There are [guides](https://limnous.com/remapgl/docs/) with accompanying [CodeSandbox](https://codesandbox.io/dashboard/teams/e4d38869-8850-4bdf-b24b-6c8f52e2256c/sandboxes) projects that illustrate how to use the remapgl components.
## Sample
```jsx
{
markers.map(marker => (
{marker.name}
))
}
{
layers.filter(layer => layer.id !== selectedLayer.id)
.map(layer => (
))
}
```