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

• React.js
• MapLibre GL JS
• MapTiler

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, :warning: you will need to replace YOUR_MAPTILER_API_KEY with your own MapTiler API key.

Your MapTiler account access key is on your MapTiler Cloud account page.

:information_source: If you don't have an API KEY you can create it for free at https://www.maptiler.com/cloud/

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