https://github.com/maptiler/angular-template-maplibre-gl-js
A quick way to start a web map application with Angular using MapLibre GL JS
https://github.com/maptiler/angular-template-maplibre-gl-js
angular angular-cli docs map maplibre maplibre-gl-js maptiler template tutorial-code
Last synced: 7 months ago
JSON representation
A quick way to start a web map application with Angular using MapLibre GL JS
- Host: GitHub
- URL: https://github.com/maptiler/angular-template-maplibre-gl-js
- Owner: maptiler
- License: mit
- Created: 2021-11-18T15:52:08.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-08-03T05:57:15.000Z (over 3 years ago)
- Last Synced: 2024-03-26T15:22:49.027Z (almost 2 years ago)
- Topics: angular, angular-cli, docs, map, maplibre, maplibre-gl-js, maptiler, template, tutorial-code
- Language: TypeScript
- Homepage: https://labs.maptiler.com/angular-template-maplibre-gl-js/
- Size: 5.55 MB
- Stars: 6
- Watchers: 6
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# MapLibre GL JS map using Angular
[](https://opensource.org/licenses/MIT)
A quick way to start a web map application with Angular using MapLibre GL JS.
A simple fullscreen map application is used to showcase how to utilize MapTiler maps together with Angular and MapLibre GL JS for your Angular app.
## Screenshot
## Step-by-step tutorial - How to display a map in Angular using MapLibre GL JS
Documentation: [How to display a map in Angular using MapLibre GL JS](https://docs.maptiler.com/angular/maplibre-gl-js/how-to-use-maplibre-gl-js/?utm_medium=referral&utm_source=github&utm_campaign=2022-05%20%7C%20js%20frameworks%20%7C%20angular)
## Demo
Online demo: https://labs.maptiler.com/angular-template-maplibre-gl-js/
## Build With
* [Angular](https://angular.io/)
* [MapLibre GL JS](https://maplibre.org/)
* [MapTiler](https://www.maptiler.com/)
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.2.
## Getting Started
### Prerequisites
* npm
```sh
npm install npm@latest -g
```
* Angular CLI
```sh
npm install -g @angular/cli
```
### Create an app
Clone the repo to create a new angular project. Run in your command-line:
```
git clone https://github.com/maptiler/angular-template-maplibre-gl-js.git my-angular-map
```
Navigate to the newly created project folder **my-angular-map**
Install the NPM packages dependencies. Run in your command-line:
```
npm install
```
### API KEY
Navigate to the `src/environments` folder
Open the `environment.ts` and `environment.prod.ts` 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](https://cloud.maptiler.com/account/keys/) 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:
```
ng serve --open
```
You will find your app on address http://localhost:4200/.
Now you should see the app in your browser.
### Build
To build for production, run:
```
ng build --base-href /angular-template-maplibre-gl-js/
```
### gh-pages
To deploy the app to the gh-pages branch, run:
```
node gh-pages.js
```
## 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 [Angular binding of maplibre-gl-js (ngx-maplibre-gl)](https://maplibre.org/ngx-maplibre-gl/).
Checkout to [Get started with Angular and MapLibre GL JS](https://github.com/maptiler/get-started-angular-maplibre-gl-js) repo to use de ngx-maplibre-gl component.