{"id":13497461,"url":"https://github.com/Wykks/ngx-mapbox-gl","last_synced_at":"2025-03-28T22:31:44.495Z","repository":{"id":25658126,"uuid":"105458215","full_name":"Wykks/ngx-mapbox-gl","owner":"Wykks","description":"Angular binding of mapbox-gl-js","archived":false,"fork":false,"pushed_at":"2024-08-19T07:40:15.000Z","size":27478,"stargazers_count":349,"open_issues_count":73,"forks_count":142,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-03-18T03:06:50.920Z","etag":null,"topics":["angular","mapbox-gl"],"latest_commit_sha":null,"homepage":"https://wykks.github.io/ngx-mapbox-gl","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/Wykks.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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}},"created_at":"2017-10-01T17:00:33.000Z","updated_at":"2025-03-17T23:08:35.000Z","dependencies_parsed_at":"2023-02-18T16:31:14.422Z","dependency_job_id":"267b196e-0d0f-4878-849e-67ad7dcee70d","html_url":"https://github.com/Wykks/ngx-mapbox-gl","commit_stats":{"total_commits":501,"total_committers":39,"mean_commits":"12.846153846153847","dds":0.5169660678642715,"last_synced_commit":"a0d968a5bc975ed7998fc9e866b2d85b572139a6"},"previous_names":[],"tags_count":69,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wykks%2Fngx-mapbox-gl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wykks%2Fngx-mapbox-gl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wykks%2Fngx-mapbox-gl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wykks%2Fngx-mapbox-gl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wykks","download_url":"https://codeload.github.com/Wykks/ngx-mapbox-gl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246100539,"owners_count":20723478,"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","mapbox-gl"],"created_at":"2024-07-31T20:00:31.252Z","updated_at":"2025-03-28T22:31:44.002Z","avatar_url":"https://github.com/Wykks.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Third Party Components"],"sub_categories":["Uncategorized","Maps"],"readme":"# ngx-mapbox-gl\n\n[![npm version](https://img.shields.io/npm/v/ngx-mapbox-gl.svg?style=flat)](https://www.npmjs.com/package/ngx-mapbox-gl)\n\nAngular wrapper for [mapbox-gl-js](https://www.mapbox.com/mapbox-gl-js/api/). It exposes a bunch of components meant to be simple to use with Angular.\n\nv1.X : Angular 5 \u0026 6 (rxjs 5)\n\nv2.X : Angular 6 \u0026 7 (rxjs 6)\n\nv3.X : Angular 7.2\n\nv4.X : Angular 8 - 10 (rxjs \u003e= 6.5)\n\nv5.X - 6.X : Angular 9 - 11 (rxjs \u003e= 6.5)\n\nv7.X : Angular 12 (rxjs \u003e= 6.6)\n\nv8.X : Angular 13\n\nv9.X : Angular 14\n\nv10.X : Angular 16 - 17\n\nv11.X : Angular 18\n\nInclude the following components:\n\n- [mgl-map](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-map)\n- [mgl-layer](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-layer)\n- [mgl-geojson-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-geojson-source)\n- [mgl-canvas-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-canvas-source)\n- [mgl-image-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-image-source)\n- mgl-raster-dem-source\n- [mgl-raster-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-raster-source)\n- [mgl-vector-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-vector-source)\n- [mgl-video-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-video-source)\n- [mgl-image](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-image)\n- [mgl-control](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-control) with builtin control:\n  - mglScale\n  - mglFullscreen\n  - mglAttribution\n  - mglGeolocate\n  - mglNavigation\n- [mgl-marker](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-marker)\n- [mgl-popup](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-popup)\n- [mgl-markers-for-clusters](https://wykks.github.io/ngx-mapbox-gl/doc#-ngx-mgl-markers-for-clusters)\n\n(Documentation here: https://wykks.github.io/ngx-mapbox-gl/doc)\n\n## How to start\n\n```\nnpm install ngx-mapbox-gl mapbox-gl\nyarn add ngx-mapbox-gl mapbox-gl\n```\n\nIf using typescript add mapbox-gl types\n\n```\nnpm install @types/mapbox-gl --save-dev\nyarn add @types/mapbox-gl --dev\n```\n\nLoad the CSS of `mapbox-gl`\n\nFor example, with _angular-cli_ add this in `angular.json`:\n\n```json\n\"styles\": [\n        ...\n        \"mapbox-gl/dist/mapbox-gl.css\"\n      ],\n```\n\nOr in the global CSS file (called `styles.css` for example in _angular-cli_):\n\n```css\n@import '~mapbox-gl/dist/mapbox-gl.css';\n```\n\nThen, in your app's main module (or in any other module), import the `NgxMapboxGLModule`:\n\n```ts\n...\nimport { NgxMapboxGLModule } from 'ngx-mapbox-gl';\n\n@NgModule({\n  imports: [\n    ...\n    NgxMapboxGLModule.withConfig({\n      accessToken: 'TOKEN', // Optional, can also be set per map (accessToken input of mgl-map)\n    })\n  ]\n})\nexport class AppModule {}\n```\n\nHow to get a Mapbox token: https://www.mapbox.com/help/how-access-tokens-work/\n\nNote: `mapbox-gl` cannot work without a token anymore.\nIf you want to keep using their services then make a free account, generate a new token for your application and use it inside your project.\n\nDisplay a map:\n\n```ts\nimport { Component } from '@angular/core';\n\n@Component({\n  template: `\n    \u003cmgl-map\n      [style]=\"'mapbox://styles/mapbox/streets-v9'\"\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})\nexport class DisplayMapComponent {}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWykks%2Fngx-mapbox-gl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWykks%2Fngx-mapbox-gl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWykks%2Fngx-mapbox-gl/lists"}