https://github.com/maptiler/get-started-angular-maplibre-gl-js
Quick way to star a web map application with MapLibre GL JS using Angular
https://github.com/maptiler/get-started-angular-maplibre-gl-js
angular example-code template tutorial-code
Last synced: 10 months ago
JSON representation
Quick way to star a web map application with MapLibre GL JS using Angular
- Host: GitHub
- URL: https://github.com/maptiler/get-started-angular-maplibre-gl-js
- Owner: maptiler
- License: mit
- Created: 2022-06-29T16:50:47.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-12T13:51:29.000Z (over 3 years ago)
- Last Synced: 2024-03-26T15:22:49.374Z (about 2 years ago)
- Topics: angular, example-code, template, tutorial-code
- Language: TypeScript
- Homepage:
- Size: 229 KB
- Stars: 3
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Get started with Angular and MapLibre GL JS
[](https://opensource.org/licenses/MIT)
Quick way to star a web map application with MapLibre GL JS using Angular.
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.
1. Clone this repo
```sh
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**
```sh
cd my-angular-map
```
3. Install dependencies
```sh
npm install
```
4. :warning: Open the app.component.html file and replace **YOUR_MAPTILER_API_KEY_HERE** with your actual [MapTiler API key](https://cloud.maptiler.com/account/keys/).
:information_source: If you don't have an API KEY you can create it for **FREE** at https://www.maptiler.com/cloud/
5. Start your local environment
```sh
npm start
```
6. You will find your app on address http://localhost:4200/. Now you should see the map in your browser.
## Build With
* [Angulars](https://angular.io/start)
* [MapLibre GL JS](https://maplibre.org/)
* [MapTiler](https://www.maptiler.com/)
* [ngx-maplibre-gl](https://github.com/maplibre/ngx-maplibre-gl)
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.3.
## Learn More
You can learn more at [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).
## License
Distributed under the MIT License. See `LICENSE` for more information.