@advisr/v-mapbox/README.md

Mapbox with Vue 💚

# V-Mapbox 🗺 

<a title="npm" href="https://www.npmjs.com/package/v-mapbox" rel="nofollow">
  <img alt="npm" src="https://img.shields.io/npm/v/v-mapbox?label=npm%40latest&logo=npm">
</a>
<a title="GitHub Release" href="https://github.com/geospoc/v-mapbox/releases" rel="nofollow">
  <img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/geospoc/v-mapbox?include_prereleases&logo=github">
</a>
<a title="CI Status" href="https://github.com/geospoc/v-mapbox/actions?query=workflow%3Aci" rel="nofollow">
  <img alt="Total alerts" src="https://github.com/geospoc/v-mapbox/workflows/ci/badge.svg">
</a>
<a href="https://lgtm.com/projects/g/geospoc/v-mapbox/alerts/" rel="nofollow">
  <img alt="Total alerts" src="https://img.shields.io/lgtm/alerts/g/geospoc/v-mapbox.svg?logo=lgtm&logoWidth=18"/>
</a>
<a href="https://lgtm.com/projects/g/geospoc/v-mapbox/context:javascript">
  <img alt="Language grade: JavaScript" src="https://img.shields.io/lgtm/grade/javascript/g/geospoc/v-mapbox.svg?logo=lgtm&logoWidth=18"/>
</a>
<a title="DeepScan Grade" href="https://deepscan.io/dashboard#view=project&tid=9055&pid=12397&bid=190811">
  <img src="https://deepscan.io/api/teams/9055/projects/12397/branches/190811/badge/grade.svg" alt="DeepScan grade">
</a>
<a title="downloads" href="http://npm-stat.com/charts.html?package=v-mapbox" rel="nofollow">
  <img alt="npm" src="https://img.shields.io/npm/dm/v-mapbox">
</a>
<a title="deploy" href="https://github.com/algolia/shipjs" rel="nofollow">
  <img src="https://img.shields.io/badge/deploy-🛳%20Ship.js-blue?style=flat" />
</a>
<a title="Dependencies" href="https://david-dm.org/geospoc/v-mapbox" rel="nofollow">
  <img alt="David" src="https://img.shields.io/david/geospoc/v-mapbox">
</a>
<a title="Dev Dependencies" href="https://david-dm.org/geospoc/v-mapbox?type=dev" rel="nofollow">
  <img alt="David" src="https://img.shields.io/david/dev/geospoc/v-mapbox">
</a>
<a title="Peer Dependencies" href="https://david-dm.org/geospoc/v-mapbox?type=peer" rel="nofollow">
  <img alt="David" src="https://img.shields.io/david/peer/geospoc/v-mapbox">
</a>
<a title="Last Commit" href="https://github.com/geospoc/v-mapbox/commits/main" rel="nofollow">
  <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/geospoc/v-mapbox">
</a>
<a title="Contributors" href="https://github.com/geospoc/v-mapbox/graphs/contributors" rel="nofollow">
  <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/geospoc/v-mapbox">
</a>
<a title="maintenance" href="https://github.com/geospoc/v-mapbox/commits/main" rel="nofollow">
  <img alt="Maintenance" src="https://img.shields.io/maintenance/yes/2022">
</a>
<a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fgeospoc%2Fv-mapbox?ref=badge_shield" alt="FOSSA Status"><img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fgeospoc%2Fv-mapbox.svg?type=shield"/></a>

> Combine powers of [Vue.js](https://vuejs.org/) and [Mapbox GL JS](https://mapbox.com/mapbox-gl-js)

_NOTE_: This is a maintained version of [vue-mapbox](https://github.com/soal/vue-mapbox)

V-Mapbox is wrapper around Mapbox GL JS library that provides vueish-way to interact with the map.

[Description and documentation](https://v-mapbox.netlify.app/)

## Installation

```sh
# For Vue 2
$ npm i v-mapbox@legacy
# For Vue 3
$ npm i v-mapbox
```

## Demo

[![Edit v-mapbox-demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/v-mapbox-map-demo-k1l1n?file=/src/App.vue?fontsize=14&hidenavigation=1&theme=dark)

## Development

```sh
git clone git@github.com:geospoc/v-mapbox.git
cd v-mapbox
npm install
```

Build for production:

```sh
npm run build
```

### Documentation

Start documentation site in development mode:
```sh
npm run docs:dev
```

Build documentation:
```sh
npm run docs:build
```

Inspired by KoRiGaN's [Vue2Leaflet](https://github.com/KoRiGaN/Vue2Leaflet).

## License
MIT

[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fgeospoc%2Fv-mapbox.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fgeospoc%2Fv-mapbox?ref=badge_large)

## Contributing
Please contribute using [Github Flow](https://guides.github.com/introduction/flow/). Create a branch, add commits, and [open a pull request](https://github.com/geospoc/v-mapbox/compare)