{"id":13774029,"url":"https://github.com/maplibre/ngx-maplibre-gl","last_synced_at":"2026-01-04T15:14:03.457Z","repository":{"id":37585565,"uuid":"376024794","full_name":"maplibre/ngx-maplibre-gl","owner":"maplibre","description":"Angular binding of maplibre-gl","archived":false,"fork":false,"pushed_at":"2025-02-19T20:46:03.000Z","size":51721,"stargazers_count":87,"open_issues_count":4,"forks_count":28,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-11T03:14:34.157Z","etag":null,"topics":["angular","hacktoberfest","maplibre","maps"],"latest_commit_sha":null,"homepage":"https://maplibre.org/ngx-maplibre-gl/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"Wykks/ngx-mapbox-gl","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maplibre.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":null,"code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["maplibre"],"open_collective":"maplibre"}},"created_at":"2021-06-11T12:54:10.000Z","updated_at":"2025-04-01T05:23:06.000Z","dependencies_parsed_at":"2023-02-12T10:16:07.144Z","dependency_job_id":"c4a656c4-9a9e-41e8-bc18-a3f9116762b5","html_url":"https://github.com/maplibre/ngx-maplibre-gl","commit_stats":{"total_commits":652,"total_committers":50,"mean_commits":13.04,"dds":0.6288343558282208,"last_synced_commit":"14dbccce566e5259f5c02bd2579932582c1257ce"},"previous_names":[],"tags_count":85,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maplibre%2Fngx-maplibre-gl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maplibre%2Fngx-maplibre-gl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maplibre%2Fngx-maplibre-gl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maplibre%2Fngx-maplibre-gl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maplibre","download_url":"https://codeload.github.com/maplibre/ngx-maplibre-gl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355722,"owners_count":22057435,"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","hacktoberfest","maplibre","maps"],"created_at":"2024-08-03T17:01:23.025Z","updated_at":"2026-01-04T15:14:03.446Z","avatar_url":"https://github.com/maplibre.png","language":"TypeScript","funding_links":["https://github.com/sponsors/maplibre","https://opencollective.com/maplibre"],"categories":["Bindings","Third Party Components"],"sub_categories":["JavaScript","Maps"],"readme":"\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/maplibre/ngx-maplibre-gl/main/projects/showcase/src/assets/ngx-maplibre-gl-red.svg\" height=\"128\"\u003e\n\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003engx-maplibre-gl\u003c/h1\u003e\n\u003c/div\u003e\n\nAngular wrapper for [maplibre-gl](https://www.maplibre.org/). It exposes a bunch of components meant to be simple to use with Angular.\n\n[![npm version](https://img.shields.io/npm/v/@maplibre/ngx-maplibre-gl.svg?style=flat)](https://www.npmjs.com/package/@maplibre/ngx-maplibre-gl)\n\n### Demo site\n\nCan be found here (based on the generated gh-pages in this repo):\nhttps://maplibre.org/ngx-maplibre-gl/\n\n### Attribution\n\nThis is a fork of [ngx-mapbox-gl](https://github.com/Wykks/ngx-mapbox-gl) and I would like to thank the maintainers there for their amazing work to build this up. It's truly a great piece of software!\n\n### API Documentation\n\n[The API documentation can be found here](https://maplibre.org/ngx-maplibre-gl/API/modules.html).\n\n## How to start\n\n```\nnpm install @maplibre/ngx-maplibre-gl maplibre-gl\nyarn add @maplibre/ngx-maplibre-gl maplibre-gl\n```\n\nThere might be a need to add the following configuration to `tsconfig.json` file\n\n```\n\"compilerOptions\": {\n    ...\n    \"strictNullChecks\": false,\n    \"skipLibCheck\": true,\n}\n```\n\nLoad the CSS of `maplibre-gl`\n\nFor example, with _angular-cli_ add this in `angular.json`:\n\n```json\n\"styles\": [\n  ...,\n  \"./node_modules/maplibre-gl/dist/maplibre-gl.css\"\n],\n```\n\nOr in the global CSS file (called `styles.css` for example in _angular-cli_):\n\n```css\n@import '~maplibre-gl/dist/maplibre-gl.css';\n```\n\nThen, in your app's main module (or in any other module), import the `MapComponent`:\n\n```ts\nimport { Component } from '@angular/core';\nimport { MapComponent } from '@maplibre/ngx-maplibre-gl';\n\n@Component({\n  template: `\n    \u003cmgl-map\n      [mapStyle]=\"'https://demotiles.maplibre.org/style.json'\"\n      [zoom]=\"[9]\"\n      [center]=\"[-74.5, 40]\"\n    \u003e\n    \u003c/mgl-map\u003e\n  `,\n  styles: [\n    `\n      mgl-map {\n        height: 100%;\n        width: 100%;\n      }\n    `,\n  ],\n  imports: [MapComponent],\n})\nexport class AppComponent {}\n```\n\nIf you use several components, it will be convenient to import `NgxMapLibreGLModule` instead:\n\n```ts\nimport { Component } from '@angular/core';\nimport { NgxMapLibreGLModule } from '@maplibre/ngx-maplibre-gl';\n\n@Component({\n  template: `\n    \u003cmgl-map\n      [mapStyle]=\"'https://demotiles.maplibre.org/style.json'\"\n      [zoom]=\"[9]\"\n      [center]=\"[-74.5, 40]\"\n    \u003e\n      \u003cmgl-control\n        mglNavigation\n        [visualizePitch]=\"true\"\n    /\u003e\n    \u003c/mgl-map\u003e\n  `,\n  styles: [\n    `\n      mgl-map {\n        height: 100%;\n        width: 100%;\n      }\n    `,\n  ],\n  imports: [NgxMapLibreGLModule]\n})\nexport class AppComponent {}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaplibre%2Fngx-maplibre-gl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaplibre%2Fngx-maplibre-gl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaplibre%2Fngx-maplibre-gl/lists"}