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 full-screen map application as an example of how to use MapTiler maps together with Angular and MapLibre GL JS for your own Angular app.

Installation and setting up

1. 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
   

2. Navigate to the newly created project folder my-angular-map

    cd my-angular-map
   

3. Install dependencies

    npm install
   

4. Now navigate to the src/app folder and open the app.component.html file. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key or Get your FREE API key here.

5. Start your local environment

    npm start
   

6. You will find your app on the address http://localhost:4200/. Now you should see the map in your browser.

Learn more

If you want to learn how to create an Angular component to render a map using MapLibre GL JS see the How to display a map in Angular using MapLibre GL JS tutorial.

Angular with MapTiler maps

If you’re looking to develop Angular applications with MapTiler SDK JS, check out our tutorial titled Angular with MapTiler maps. This step-by-step tutorial will provide you with the necessary guidance and examples to create an Angular component that leverages the power of MapTiler SDK JS mapping library to render maps.