Home

Awesome

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/vinayakkulkarni/v-mapbox/releases" rel="nofollow"> <img alt="GitHub release (latest by date including pre-releases)" src="https://img.shields.io/github/v/release/vinayakkulkarni/v-mapbox?include_prereleases&logo=github"> </a> <a title="CI Status" href="https://github.com/vinayakkulkarni/v-mapbox/actions?query=workflow%3Aci" rel="nofollow"> <img alt="Total alerts" src="https://github.com/vinayakkulkarni/v-mapbox/workflows/ci/badge.svg"> </a> <a title="DeepScan Grade" href="https://deepscan.io/dashboard#view=project&tid=9381&pid=14423&bid=267899"> <img src="https://deepscan.io/api/teams/9381/projects/14423/branches/267899/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="Last Commit" href="https://github.com/vinayakkulkarni/v-mapbox/commits/main" rel="nofollow"> <img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/vinayakkulkarni/v-mapbox"> </a> <a title="Contributors" href="https://github.com/vinayakkulkarni/v-mapbox/graphs/contributors" rel="nofollow"> <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/vinayakkulkarni/v-mapbox"> </a> <a title="maintenance" href="https://github.com/vinayakkulkarni/v-mapbox/commits/main" rel="nofollow"> <img alt="Maintenance" src="https://img.shields.io/maintenance/yes/2024"> </a> <a href="https://app.fossa.com/projects/git%2Bgithub.com%2Fvinayakkulkarni%2Fv-mapbox?ref=badge_shield" alt="FOSSA Status"> <img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fvinayakkulkarni%2Fv-mapbox.svg?type=shield"/> </a>

Combine powers of Vue and Mapbox GL JS (v3.x) & MaplibreGL (v4.x) 🗺

V-Mapbox is wrapper around Mapbox GL JS for >v1.x to <=v3.x & Maplibre GL JS for > v4.x library that provides vueish-way to interact with the map.

Description and documentation

Installation

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

Demo

Edit v-mapbox-vue-3

Deck.gl 🆕

Edit v-mapbox-with-deck-gl-geojson

Development

git clone git@github.com:vinayakkulkarni/v-mapbox.git
cd v-mapbox
npm install

Running in dev mode:

npm run serve

Build for production:

npm run build

Documentation

Start documentation site in development mode:

npm run docs:dev

Build documentation:

npm run docs:build

Inspired by KoRiGaN's Vue2Leaflet.

Contributing

  1. Fork it (https://github.com/vinayakkulkarni/v-mapbox/fork)
  2. Create your feature branch (git checkout -b feat/new-feature)
  3. Commit your changes (git commit -Sam 'feat: add feature')
  4. Push to the branch (git push origin feat/new-feature)
  5. Create a new Pull Request

Note:

  1. Please contribute using GitHub Flow
  2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
  3. PS. Ensure your commits are signed. Read why

Author

v-mapbox © Vinayak, Released under the MIT License.<br> Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k

License

MIT

FOSSA Status