# @idleaustralia/ngx-mapbox-gl

> A Angular binding of mapbox-gl-js

Latest version **2.3.0** (published 2018-11-08) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @idleaustralia/ngx-mapbox-gl
pnpm add @idleaustralia/ngx-mapbox-gl
yarn add @idleaustralia/ngx-mapbox-gl
bun add @idleaustralia/ngx-mapbox-gl
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2018-11-08 |
| First published | 2018-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 358 |
| Maintainers | thomasraydeniscool |
| Keywords | mapbox, angular, map, webgl, mapbox-gl, ngx |

## Links

- npm: https://www.npmjs.com/package/@idleaustralia/ngx-mapbox-gl
- Repository: https://github.com/Wykks/ngx-mapbox-gl
- Homepage: https://github.com/Wykks/ngx-mapbox-gl#readme
- Issues: https://github.com/Wykks/ngx-mapbox-gl/issues
- npm.io page: https://npm.io/package/@idleaustralia/ngx-mapbox-gl

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [@turf/bbox](https://npm.io/package/@turf/bbox.md) ^6.0.1
- [supercluster](https://npm.io/package/supercluster.md) ^4.1.1
- [@turf/helpers](https://npm.io/package/@turf/helpers.md) ^6.1.4

## Recent versions

- 2.3.0 (latest) — 2018-11-08
- 2.2.2 — 2018-11-08
- 2.2.1 — 2018-11-08

## README

# ngx-mapbox-gl

[![npm version](https://img.shields.io/npm/v/ngx-mapbox-gl.svg?style=flat)](https://www.npmjs.com/package/ngx-mapbox-gl)

Angular 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.

v1.X : Angular 5 & 6 (rxjs 5)

v2.X : Angular 6 & 7 (rxjs 6)

v3.X : Angular 7.2

v4.X : Angular 8 - 10 (rxjs >= 6.5)

v5.X - 6.X : Angular 9 - 11 (rxjs >= 6.5)

v7.X : Angular 12 (rxjs >= 6.6)

v8.X : Angular 13

v9.X : Angular 14

v10.X : Angular 16 - 17

v11.X : Angular 18

v12.X : Angular 19, Mapbox-gl >= 3.5

v13.X : Angular 20, Mapbox-gl >= 3.5

v14.X : Angular 21 & 22, Mapbox-gl >= 3.5

Include the following components:

- [mgl-map](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-map)
- [mgl-layer](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-layer)
- [mgl-geojson-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-geojson-source)
- [mgl-canvas-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-canvas-source)
- [mgl-image-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-image-source)
- mgl-raster-dem-source
- [mgl-raster-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-raster-source)
- [mgl-vector-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-vector-source)
- [mgl-video-source](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-video-source)
- [mgl-image](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-image)
- [mgl-control](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-control) with builtin control:
  - mglScale
  - mglFullscreen
  - mglAttribution
  - mglGeolocate
  - mglNavigation
- [mgl-marker](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-marker)
- [mgl-popup](https://wykks.github.io/ngx-mapbox-gl/doc#mgl-popup)
- [mgl-markers-for-clusters](https://wykks.github.io/ngx-mapbox-gl/doc#-ngx-mgl-markers-for-clusters)

(Documentation here: https://wykks.github.io/ngx-mapbox-gl/doc)

## How to start

```
npm install ngx-mapbox-gl mapbox-gl
yarn add ngx-mapbox-gl mapbox-gl
```

Load the CSS of `mapbox-gl`

For example, with _angular-cli_ add this in `angular.json`:

```json
"styles": [
        ...
        "mapbox-gl/dist/mapbox-gl.css"
      ],
```

Or in the global CSS file (called `styles.css` for example in _angular-cli_):

```css
@import 'mapbox-gl/dist/mapbox-gl.css';
```

Then, you can configure the access token this way:
NOTE: This is optional, you can also set the access tokenper map (accessToken input of mgl-map)

```ts
...
import { ApplicationConfig } from '@angular/core';
import { provideMapboxGL } from 'ngx-mapbox-gl';

export const appConfig: ApplicationConfig = {
    providers: [
      provideMapboxGL({
          accessToken: 'TOKEN'
      }),
      [...]
    ]
}
```

How to get a Mapbox token: https://www.mapbox.com/help/how-access-tokens-work/

Note: `mapbox-gl` cannot work without a token anymore.
If 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.

Display a map:

```ts
import { Component } from '@angular/core';

@Component({
  template: `<mgl-map [style]="'mapbox://styles/mapbox/streets-v12'" [zoom]="9" [center]="[-74.5, 40]" />`,
  styles: [
    `
      mgl-map {
        height: 100%;
        width: 100%;
      }
    `,
  ],
})
export class DisplayMapComponent {}
```

---
_Source: https://npm.io/package/@idleaustralia/ngx-mapbox-gl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._