{"id":28576968,"url":"https://github.com/maptiler/angular-template-maplibre-gl-js","last_synced_at":"2025-06-11T00:08:28.663Z","repository":{"id":45969720,"uuid":"429489505","full_name":"maptiler/angular-template-maplibre-gl-js","owner":"maptiler","description":"A quick way to start a web map application with Angular using MapLibre GL JS ","archived":false,"fork":false,"pushed_at":"2022-08-03T05:57:15.000Z","size":5818,"stargazers_count":6,"open_issues_count":2,"forks_count":2,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-03-26T15:22:49.027Z","etag":null,"topics":["angular","angular-cli","docs","map","maplibre","maplibre-gl-js","maptiler","template","tutorial-code"],"latest_commit_sha":null,"homepage":"https://labs.maptiler.com/angular-template-maplibre-gl-js/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maptiler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-11-18T15:52:08.000Z","updated_at":"2023-05-11T06:48:56.000Z","dependencies_parsed_at":"2022-09-05T23:41:35.452Z","dependency_job_id":null,"html_url":"https://github.com/maptiler/angular-template-maplibre-gl-js","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fangular-template-maplibre-gl-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fangular-template-maplibre-gl-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fangular-template-maplibre-gl-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fangular-template-maplibre-gl-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maptiler","download_url":"https://codeload.github.com/maptiler/angular-template-maplibre-gl-js/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptiler%2Fangular-template-maplibre-gl-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259172986,"owners_count":22816560,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-cli","docs","map","maplibre","maplibre-gl-js","maptiler","template","tutorial-code"],"created_at":"2025-06-11T00:08:26.945Z","updated_at":"2025-06-11T00:08:28.650Z","avatar_url":"https://github.com/maptiler.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MapLibre GL JS map using Angular\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nA quick way to start a web map application with Angular using MapLibre GL JS.\n\nA simple fullscreen map application is used to showcase how to utilize MapTiler maps together with Angular and MapLibre GL JS for your Angular app.\n\n## Screenshot\n\n![angular maplibre template](/assets/angular-maplibre-template.png \"Angular MapLibre template\")\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Step-by-step tutorial - How to display a map in Angular using MapLibre GL JS\n\nDocumentation: [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\u0026utm_source=github\u0026utm_campaign=2022-05%20%7C%20js%20frameworks%20%7C%20angular)\n\n## Demo\n\nOnline demo: https://labs.maptiler.com/angular-template-maplibre-gl-js/\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n## Build With\n\n* [Angular](https://angular.io/)\n* [MapLibre GL JS](https://maplibre.org/)\n* [MapTiler](https://www.maptiler.com/)\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.2.\n\n## Getting Started\n\n### Prerequisites\n\n* npm\n  ```sh\n  npm install npm@latest -g\n  ```\n* Angular CLI\n  ```sh\n  npm install -g @angular/cli\n  ```\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Create an app\n\nClone the repo to create a new angular project. Run in your command-line:\n\n```\n  git clone https://github.com/maptiler/angular-template-maplibre-gl-js.git my-angular-map\n```\n\nNavigate to the newly created project folder **my-angular-map**\n\nInstall the NPM packages dependencies. Run in your command-line:\n\n```\n  npm install\n```\n\n### API KEY\n\nNavigate to the `src/environments` folder\n\nOpen the `environment.ts` and `environment.prod.ts` file, :warning: you will need to replace **YOUR_MAPTILER_API_KEY** with your own MapTiler API key.\n\nYour MapTiler account access key is on your MapTiler [Cloud](https://cloud.maptiler.com/account/keys/) account page. \n\n:information_source: If you don't have an API KEY, you can create it for free at https://www.maptiler.com/cloud/\n\n### Run\n\nTo start your local environment, run: \n\n```\n  ng serve --open\n``` \n\nYou will find your app on address http://localhost:4200/.\n\nNow you should see the app in your browser.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n### Build\n\nTo build for production, run: \n```\n  ng build --base-href /angular-template-maplibre-gl-js/\n``` \n\n### gh-pages\n\nTo deploy the app to the gh-pages branch, run:\n```\n  node gh-pages.js\n```\n\n\u003c!-- LICENSE --\u003e\n## License\n\nDistributed under the MIT License. See `LICENSE` for more information.\n\n\u003cp align=\"right\"\u003e(\u003ca href=\"#top\"\u003eback to top\u003c/a\u003e)\u003c/p\u003e\n\n\u003c!-- ACKNOWLEDGMENTS --\u003e\n## Acknowledgments\n\nInstead 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/).\n\nCheckout 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.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaptiler%2Fangular-template-maplibre-gl-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaptiler%2Fangular-template-maplibre-gl-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaptiler%2Fangular-template-maplibre-gl-js/lists"}