# angular-mapboxgl-directive

> An AngularJS directive for Mapbox GL

Latest version **0.46.0** (published 2018-04-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install angular-mapboxgl-directive
pnpm add angular-mapboxgl-directive
yarn add angular-mapboxgl-directive
bun add angular-mapboxgl-directive
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.46.0 |
| Published | 2018-04-22 |
| First published | 2016-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 2.8 MB |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| Author | https://github.com/Naimikan/angular-mapboxgl-directive/graphs/contributors |
| Maintainers | naimikan |
| Keywords | webgl, angularjs, mapbox, mapboxgl, javascript, directive, cli |

## Links

- npm: https://www.npmjs.com/package/angular-mapboxgl-directive
- Repository: https://github.com/Naimikan/angular-mapboxgl-directive
- Homepage: https://naimikan.github.io/angular-mapboxgl-directive/
- Issues: https://github.com/Naimikan/angular-mapboxgl-directive/issues
- npm.io page: https://npm.io/package/angular-mapboxgl-directive

## Dependencies (2)

- [angular](https://npm.io/package/angular.md) >=1.5
- [mapbox-gl](https://npm.io/package/mapbox-gl.md) >=0.23.0

## Recent versions

- 0.46.0 (latest) — 2018-04-22
- 0.45.0 — 2018-04-22
- 0.44.0 — 2018-03-05
- 0.43.3 — 2018-01-09
- 0.43.2 — 2018-01-08
- 0.43.1 — 2018-01-08
- 0.43.0 — 2017-11-11
- 0.42.1 — 2017-11-11
- 0.42.0 — 2017-11-11
- 0.41.0 — 2017-09-12
- 0.40.0 — 2017-08-29
- 0.39.0 — 2017-08-01
- 0.38.0 — 2017-07-11
- 0.37.0 — 2017-05-12
- 0.36.1 — 2017-04-22
- … 77 more at https://npm.io/package/angular-mapboxgl-directive/versions

## README

<p align="right">
  <a href="https://www.npmjs.com/package/angular-mapboxgl-directive">
    <img src="https://img.shields.io/npm/v/angular-mapboxgl-directive.svg" alt="version" />
  </a>
  <a href="https://bower.io/search/?q=angular-mapboxgl-directive">
    <img src="https://img.shields.io/bower/v/angular-mapboxgl-directive.svg" alt="bower version" />
  </a>
  <a href="https://cdnjs.com/libraries/angular-mapboxgl-directive">
    <img src="https://img.shields.io/cdnjs/v/angular-mapboxgl-directive.svg" alt="cdnjs version" />
  </a>
  <a href="https://codeclimate.com/github/Naimikan/angular-mapboxgl-directive">
    <img src="https://codeclimate.com/github/Naimikan/angular-mapboxgl-directive/badges/gpa.svg" alt="codeclimate" />
  </a>
  <a href="LICENSE">
    <img src="https://img.shields.io/npm/l/angular-mapboxgl-directive.svg" alt="license" />
  </a>
</p>

<h1 align="center">angular-mapboxgl-directive | <a href="https://github.com/Naimikan/angular-mapboxgl-directive/wiki">Wiki</a></h1>

<h5 align="center">AngularJS directive for Mapbox GL</h5>

<p align="center"><img src="pinpinmap png.png" width="350" /></p>

<h2 align="center">Installation</h2>

NPM
```shell
npm install angular-mapboxgl-directive --save
```

Bower
```shell
bower install angular-mapboxgl-directive --save
```

<h2 align="center">Get Started</h2>

Include the files in your `index.html`:
```html
<link href="angular-mapboxgl-directive.css" rel="stylesheet" />

<script src="angular-mapboxgl-directive.min.js"></script>
```

Or you can include them from CDN:
```html
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-mapboxgl-directive/X.X.X/angular-mapboxgl-directive.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-mapboxgl-directive/X.X.X/angular-mapboxgl-directive.min.js"></script>
```

Add `mapboxgl-directive` module in your AngularJS project:
```javascript
var app = angular.module('YourProject', ['mapboxgl-directive']);
```

<h2 align="center">Usage</h2>

<h5>mapboxgl</h5>

```html
<mapboxgl></mapboxgl>
```
or
```html
<div mapboxgl></div>
```

<h5>mapboxglCompare</h5>

```html
<mapboxgl-compare>
   <mapboxgl></mapboxgl>
   <mapboxgl></mapboxgl>
</mapboxgl-compare>
```
or
```html
<div mapboxgl-compare>
   <div mapboxgl></div>
   <div mapboxgl></div>
</div>
```

<h2 align="center">Developing</h2>

Install dependencies, build the source files and preview

```shell
git clone https://github.com/Naimikan/angular-mapboxgl-directive.git
npm install & bower install
grunt & grunt preview
```

<!-- Urls -->
[npm-image]: https://img.shields.io/npm/v/angular-mapboxgl-directive.svg?style=flat-square
[bower-image]: https://img.shields.io/bower/v/angular-mapboxgl-directive.svg?style=flat-square
[license-image]: https://img.shields.io/npm/l/angular-mapboxgl-directive.svg?style=flat-square
[codeclimate-image]: https://codeclimate.com/github/Naimikan/angular-mapboxgl-directive/badges/gpa.svg

[npm-url]: https://www.npmjs.com/package/angular-mapboxgl-directive
[bower-url]: https://bower.io/search/?q=angular-mapboxgl-directive
[codeclimate-url]: https://codeclimate.com/github/Naimikan/angular-mapboxgl-directive

---
_Source: https://npm.io/package/angular-mapboxgl-directive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._