MapLibre GL JS map using React JS
Quick way to star 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.
Screenshot
Step-by-step tutorial - How to display a map in React JS using MapLibre GL JS
Documentation: How to display a map in React JS using MapLibre GL JS
Demo
Online demo: https://labs.maptiler.com/cra-template-maplibre-gl-js/
Build With
Getting Started
Prerequisites
- npm
npm install npm@latest -g
Create an app
To create a new react project run in your command-line:
npx create-react-app my-react-map --template @maptiler/cra-template-maplibre-gl-js
Navigate to the newly created project folder my-react-map
cd my-react-map
API KEY
Rename or copy the .env.example
file to .env
cp .env.example .env
Open the .env
file,
Your MapTiler account access key is on your MapTiler Cloud account page.
Run
To start your local environment run:
npm start
You will find your app on address http://localhost:3000/.
Now you should see the app in your browser.
Build
To build for production, run:
npm run build
gh-pages
To deploy the app to the gh-pages branch, run:
npm run deploy
License
Distributed under the MIT License. See LICENSE
for more information.
Acknowledgments
Instead of using or developing a custom map component you can use the reac-map-gl component