# ngx-mapbox-gl-patch

> A Angular binding of mapbox-gl-js

Latest version **1.5.2** (published 2018-03-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-mapbox-gl-patch
pnpm add ngx-mapbox-gl-patch
yarn add ngx-mapbox-gl-patch
bun add ngx-mapbox-gl-patch
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.2 |
| Published | 2018-03-13 |
| First published | 2018-03-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 337.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | barrman |
| Keywords | mapbox, angular, map, webgl, mapbox-gl, ngx |

## Links

- npm: https://www.npmjs.com/package/ngx-mapbox-gl-patch
- Repository: https://github.com/BarrMan/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/ngx-mapbox-gl-patch

## Dependencies (3)

- [@turf/bbox](https://npm.io/package/@turf/bbox.md) ^5.1.5
- [supercluster](https://npm.io/package/supercluster.md) ^3.0.2
- [@turf/helpers](https://npm.io/package/@turf/helpers.md) ^5.1.5

## Recent versions

- 1.5.2 (latest) — 2018-03-13
- 1.5.1 — 2018-03-13
- 1.5.0 — 2018-03-13
- 1.0.0 — 2018-03-13
- 1.0.0-rc.1 — 2018-03-12

## README

# ngx-mapbox-gl

[![Build Status](https://travis-ci.org/Wykks/ngx-mapbox-gl.svg?branch=master)](https://travis-ci.org/Wykks/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 (5+) wrapper for [mapbox-gl-js](https://www.mapbox.com/mapbox-gl-js/api/). Expose a bunch of component meant to be simple to use for Angular.

Play with ngx-mapbox-gl on stackblitz: https://stackblitz.com/edit/ngx-mapbox-gl

Include the following components:
- [mgl-map](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-map-mapbox-gl-api)
- [mgl-layer](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-layer-mapbox-gl-style-spec)
- [mgl-geojson-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-geojson-source-mapbox-gl-style-spec)
- [mgl-canvas-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-canvas-source-mapbox-gl-style-spec)
- [mgl-image-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-image-source-mapbox-gl-style-spec)
- [mgl-raster-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-raster-source-mapbox-gl-style-spec)
- [mgl-vector-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-vector-source-mapbox-gl-style-spec)
- [mgl-video-source](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-video-source-mapbox-gl-style-spec)
- [mgl-image](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-image-mapbox-gl-api)
- [mgl-control](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-control) with builtin control:
  - mglScale
  - mglFullscren
  - mglAttribution
  - mglGeolocate
  - mglNavigation
- [mgl-marker](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-marker-mapbox-gl-api)
- [mgl-popup](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#mgl-popup-mapbox-gl-api)
- [mgl-marker-cluster](https://github.com/Wykks/ngx-mapbox-gl/wiki/API-Documentation#ngx-mgl-marker-cluster-supercluster-api)

## How to start

```
npm install ngx-mapbox-gl mapbox-gl --save
```
Also add mapbox-gl types if using typescript
```
npm install @types/mapbox-gl --save-dev
```

Load the css of mapbox-gl

For example, with angular-cli add this in .angular-cli.json
```json
"styles": [
        ...
        "../node_modules/mapbox-gl/dist/mapbox-gl.css"
      ],
```
Or in global css 
```css
@import "../node_modules/mapbox-gl/dist/mapbox-gl.css";
```


Then, in your app's main module (or in any other module), import the NgxMapboxGLModule
```typescript
...
import { NgxMapboxGLModule } from 'ngx-mapbox-gl';

@NgModule({
  imports: [
    ...
    NgxMapboxGLModule.forRoot({
      accessToken: 'TOKEN' // accessToken can also be set per map (accessToken input of mgl-map)
    })
  ]
})
export class AppModule {}
```

Display a map
```typescript
import { Component } from '@angular/core';

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

## Important notes for **production** build

### @angular/cli users:

\>= 1.5.5 version is required (https://github.com/angular/angular-cli/issues/5804)

< 1.5.5 version users can use this patch: https://github.com/angular/angular-cli/pull/7931 (available in this repo as ngcli-comparisons-false.patch)

### Webpack users:

Add `noParse: /(mapbox-gl)\.js$/`

## Built with ngx-mapbox-gl
Todo

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