Get started with Angular and MapLibre GL JS
In this tutorial, you’ll learn how to display a map in Angular using MapLibre GL JS. Together we will make a simple fullscreen map application as an example on how to use MapTiler maps together with Angular and MapLibre GL JS for your own Angular app.
Installation and setting up
- Clone the Get started with Angular and MapLibre GL JS repo
git clone https://github.com/maptiler/get-started-angular-maplibre-gl-js.git my-angular-map
- Navigate to the newly created project folder my-angular-map
cd my-angular-map
- Install dependencies
npm install
-
Now navigate to the
src/app
folder and open theapp.component.html
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:4200/. Now you should see the map in your browser.
Learn more
If you want to learn how to create a Angular component to render a map using MapLibre GL JS see the How to display a map in Angular using MapLibre GL JS tutorial.