https://github.com/maptiler/get-started-react-maplibre-gl-js
Quick way to star a web map application with MapLibre GL JS using Create React App.
https://github.com/maptiler/get-started-react-maplibre-gl-js
example-code react reactjs template tutorial-code
Last synced: 4 months ago
JSON representation
Quick way to star a web map application with MapLibre GL JS using Create React App.
- Host: GitHub
- URL: https://github.com/maptiler/get-started-react-maplibre-gl-js
- Owner: maptiler
- License: mit
- Created: 2022-06-28T16:56:03.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-18T14:37:15.000Z (almost 2 years ago)
- Last Synced: 2024-03-26T15:22:49.160Z (over 1 year ago)
- Topics: example-code, react, reactjs, template, tutorial-code
- Language: JavaScript
- Homepage:
- Size: 317 KB
- Stars: 14
- Watchers: 4
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Get started with React JS and MapLibre GL JS
[](https://opensource.org/licenses/MIT)
Quick way to start a web map application with MapLibre GL JS using Create React App.
A simple fullscreen map application as an example on how to use MapTiler maps together with React and MapLibre GL JS for your own React app.
1. Clone this repo
```sh
git clone https://github.com/maptiler/get-started-react-maplibre-gl-js.git my-react-map
```
2. Navigate to the newly created project folder **my-react-map**
```sh
cd my-react-map
```
3. Install dependencies
```sh
npm install
```
4. :warning: Open the App.js file and replace **YOUR_MAPTILER_API_KEY_HERE** with your actual [MapTiler API key](https://cloud.maptiler.com/account/keys/).
:information_source: If you don't have an API KEY you can create it for **FREE** at https://www.maptiler.com/cloud/
5. Start your local environment
```sh
npm start
```
6. You will find your app on address http://localhost:3000/. Now you should see the map in your browser.
## Build With
* [React.js](https://reactjs.org/)
* [MapLibre GL JS](https://maplibre.org/)
* [MapTiler](https://www.maptiler.com/)
* [react-map-gl](https://visgl.github.io/react-map-gl/docs/get-started)
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Learn More
You can learn more at [How to display MapLibre GL JS map using React JS](https://docs.maptiler.com/react/maplibre-gl-js/how-to-use-maplibre-gl-js/?utm_medium=referral&utm_source=github&utm_campaign=2022-05%20%7C%20js%20frameworks%20%7C%20react).
## License
Distributed under the MIT License. See `LICENSE` for more information.