Get started with React JS and MapLibre GL JS
In this tutorial, you’ll learn how to display a map in React JS using MapLibre GL JS. Together we will make 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.
Installation and setting up
- Clone the Get started with React JS and MapLibre GL JS repo
git clone https://github.com/maptiler/get-started-react-maplibre-gl-js.git my-react-map
- Navigate to the newly created project folder my-react-map
cd my-react-map
- Install dependencies
npm install
-
Now navigate to the
src
folder and open theApp.js
file. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key or Get your FREE API key here - Start your local environment
npm start
- You will find your app on address http://localhost:3000/. Now you should see the map in your browser.
Learn more
If you want to learn how to create a React component to render a map using MapLibre GL JS see the How to display a map in React using MapLibre GL JS tutorial.