> Combine powers of [Vue](https://vuejs.org/) and [Mapbox GL JS](https://mapbox.com/mapbox-gl-js) (v3.x) & [MaplibreGL](https://maplibre.org/maplibre-gl-js/docs/) (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](https://v-mapbox.netlify.app/)
## Installation
```sh
# For Vue 2
$ npm i v-mapbox@legacy
# For Vue 3
$ npm i v-mapbox
```
## Demo
[](https://codesandbox.io/s/v-mapbox-uq9ri2?fontsize=14&hidenavigation=1&theme=dark)
## Deck.gl 🆕
[](https://codesandbox.io/s/v-mapbox-with-deck-gl-geojson-f8nn5q?fontsize=14&hidenavigation=1&theme=dark)
## Development
```sh
git clone git@github.com:vinayakkulkarni/v-mapbox.git
cd v-mapbox
npm install
```
Running in dev mode:
```sh
npm run serve
```
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).
## Contributing
1. Fork it ([https://github.com/vinayakkulkarni/v-mapbox/fork](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](https://github.com/vinayakkulkarni/v-mapbox/compare)
_Note_:
1. Please contribute using [GitHub Flow](https://web.archive.org/web/20191104103724/https://guides.github.com/introduction/flow/)
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the [conventional commit standard](https://www.conventionalcommits.org/), _read more about it [here](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)_
3. PS. Ensure your commits are signed. _[Read why](https://withblue.ink/2020/05/17/how-and-why-to-sign-git-commits.html)_
## Author
**v-mapbox** © [Vinayak](https://github.com/vinayakkulkarni), Released under the [MIT](./LICENSE) License.Authored and maintained by Vinayak Kulkarni with help from contributors ([list](https://github.com/vinayakkulkarni/v-mapbox/contributors)). > [vinayakkulkarni.dev](https://vinayakkulkarni.dev) · GitHub [@vinayakkulkarni](https://github.com/vinayakkulkarni) · Twitter [@\_vinayak_k](https://twitter.com/_vinayak_k) ## License MIT [](https://app.fossa.com/projects/git%2Bgithub.com%2Fvinayakkulkarni%2Fv-mapbox?ref=badge_large) ================================================ FILE: commitlint.config.cjs ================================================ module.exports = { extends: ['@commitlint/config-conventional'], }; ================================================ FILE: docs/.vitepress/config.ts ================================================ import { defineConfig } from 'vitepress'; import type { DefaultTheme } from 'vitepress/types/default-theme'; const nav: DefaultTheme.Config['nav'] = [ { text: 'Guide', link: '/guide/', }, { text: 'API', link: '/api/', }, { text: 'Plugin Components', link: '/plugin-components/', }, ]; const sidebar: DefaultTheme.Config['sidebar'] = { '/guide/': [ { text: 'Guide', items: [ { text: 'Index', link: '/guide/index.md' }, { text: 'Basemap', link: '/guide/basemap.md' }, { text: 'Composition', link: '/guide/composition.md' }, { text: 'Controls', link: '/guide/controls.md' }, { text: 'Markers & Popups', link: '/guide/markers-and-popups.md' }, { text: 'Layers & Sources', link: '/guide/layers-and-sources.md' }, ], }, ], '/api/': [ { text: 'API', items: [ { text: 'Index', link: '/api/index.md' }, { text: 'Controls', link: '/api/controls.md' }, { text: 'Markers', link: '/api/marker.md' }, { text: 'Popups', link: '/api/popup.md' }, { text: 'Layers', link: '/api/Layers/index.md' }, { text: 'GeoJSON Layer', link: '/api/Layers/geojsonlayer.md' }, { text: 'Vector Layer', link: '/api/Layers/vectorlayer.md' }, { text: 'Raster Layer', link: '/api/Layers/rasterlayer.md' }, { text: 'Image Layer', link: '/api/Layers/imagelayer.md' }, { text: 'Video Layer', link: '/api/Layers/videolayer.md' }, { text: 'Canvas Layer', link: '/api/Layers/canvaslayer.md' }, ], }, ], '/plugin-components/': [ { text: 'Plugin Components', items: [ { text: 'Index', link: '/plugin-components/index.md' }, { text: 'Development', link: '/plugin-components/plugin-components-development.md', }, ], }, ], }; export default defineConfig({ title: 'V-Mapbox', description: 'Combine powers of Mapbox GL JS and Vue.js', themeConfig: { nav, sidebar, footer: { message: 'Released under the MIT License.', copyright: 'Copyright © 2019-present Vinayak Kulkarni', }, }, }); ================================================ FILE: docs/api/Layers/canvaslayer.md ================================================ # CanvasLayer ::: tip Mapbox GL JS docs: [CanvasSource](https://docs.mapbox.com/mapbox-gl-js/api/#canvassource) ::: ## Props All common [layers props](/api/Layers/index.md#props) ## Events All common layer [events](/api/Layers/#events) ================================================ FILE: docs/api/Layers/geojsonlayer.md ================================================ # GeojsonLayer ## Props All common [layers props](/api/Layers/index.md#props) ### `source` - **Type:** `Object | String` - **Non-Synced** - **Description:** A source containing GeoJSON or URL to it. - **See:** `GeoJSONSource` in [Mapbox API Docs](https://docs.mapbox.com/mapbox-gl-js/api/#geojsonsource) ## Computed getters ### `getSourceFeatures(filter?)` - **Arguments:** - `filter` `Array` A filter to limit query results. - **Description** Returns an array of GeoJSON Feature objects from assosiated source filtered by `filter`. - **See** `.querySourceFeatures()` [map method](https://docs.mapbox.com/mapbox-gl-js/api/#map#querysourcefeatures) ### `getRenderedFeatures(geometry, filter)` - **Arguments:** - `filter` `Array` A filter to limit query results. - `geometry` `Array | Object` The geometry of the query region. - **Description** Returns an array of visible GeoJSON Feature objects from assosiated source filtered by `filter`. - **See** `.queryRenderedFeatures()` [map method](https://docs.mapbox.com/mapbox-gl-js/api/#map#queryrenderedfeatures) ### `getClusterExpansionZoom(clusterId)` - **Arguments:** - `clusterId` `Number` The value of the cluster's cluster_id property. - **Description** For clustered sources, fetches the zoom at which the given cluster expands and returns `Promise` with zoom level as payload. - **See** `.getClusterExpansionZoom()` [GeoJSONSource method](https://docs.mapbox.com/mapbox-gl-js/api/#geojsonsource#getclusterexpansionzoom) ### `getClusterChildren(clusterId)` - **Arguments:** - `clusterId` `Number` The value of the cluster's cluster_id property. - `limit` `Number` The maximum number of features to return. - `offset` `Number` The number of features to skip (e.g. for pagination). - **Description** For clustered sources, fetches the original points that belong to the cluster and returns `Promise` with an `Array` of GeoJSON features as payload. - **See** `.getClusterChildren()` [GeoJSONSource method](https://docs.mapbox.com/mapbox-gl-js/api/#geojsonsource#getclusterchildren) ### `getClusterLeaves(clusterId, limit, offset)` - **Arguments:** - `filter` `Array` A filter to limit query results. - `geometry` `Array | Object` The geometry of the query region. - **Description** Returns `Promise` with an array of visible GeoJSON Feature objects from assosiated source filtered by `filter` in the payload. - **See** `.getClusterLeaves()` [GeoJSONSource method](https://docs.mapbox.com/mapbox-gl-js/api/#geojsonsource#getclusterleaves) ## Methods ### `setFeatureState(featureId, state)` - **Arguments:** - `featureId` `String | Number` Feature identifier. - `state` `Object` A set of key-value pairs. The values should be valid JSON types. - **Description** Sets the state of a feature. The state object is merged in with the existing state of the feature. - **See** `.setFeatureState()` [map method](https://docs.mapbox.com/mapbox-gl-js/api/#map#setfeaturestate) ### `getFeatureState(featureId)` - **Arguments:** - `featureId` `String | Number` Feature identifier. - **Description** Gets the state of a feature. - **See** `.getFeatureState()` [map method](https://docs.mapbox.com/mapbox-gl-js/api/#map#getfeaturestate) ### `removeFeatureState(featureId?, sourceLayer?, key?)` - **Arguments:** - `featureId` `String | Number` Feature identifier. - `sourceLayer` `string` Source layer id. - `key` `string` The key in the feature state to reset. - **Description** Removes feature state, setting it back to the default behavior. If no featureId or key is specified, removes all states of that source. If featureId is also specified, removes all keys for that feature's state. If key is also specified, removes that key from that feature's state. - **See** `.removeFeatureState()` [map method](https://docs.mapbox.com/mapbox-gl-js/api/#map#removefeaturestate) ## Events All common layer [events](/api/Layers/#events) ================================================ FILE: docs/api/Layers/imagelayer.md ================================================ # ImageLayer ## Props All common [layers props](/api/Layers/index.md#props) ### `source` - **Type:** `Object | String` - **Non-Synced** - **Description:** A data source containing an image. - **See:** `ImageSource` in [Mapbox API Docs](https://docs.mapbox.com/mapbox-gl-js/api/#imagesource) ::: tip Reactivity `coordinates` and `url` fields of the `source` prop are reactive. If you change their value, changes automatically applied to the map. ::: ## Events All common layer [events](/api/Layers/#events) ================================================ FILE: docs/api/Layers/index.md ================================================ # Layers common ## Props #### Props for Mapbox GL source ### `sourceId` - **Type:** `String` - **Required** - **Non-Synced** - **Description:** ID of the source to add. Must not conflict with existing sources. - **See:** `.addSource()` [Map method](https://docs.mapbox.com/mapbox-gl-js/api/#map#addsource) ### `source` - **Type:** `Object | String` - **Required** - **Non-Synced** A source for layer or URL to it. - **Description:** - **See:** `sources` in [Mapbox Style Spec](https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources) #### Props for Mapbox GL layer ### `layerId` - **Type** `String` - **Description:** ID of the layer to add. Must not conflict with existing layers. - **Required** - **Non-Synced** - **See:** `id` in [Mapbox Layer Style Spec](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layer-id) ### `layer` - **Type** `String` - **Description:** Layer configuration object. - **Required** - **Non-Synced** - **See:** `layers` in [Mapbox Layer Style Spec](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) ::: tip Reactivity `minzoom`, `maxzoom`, `paint`, `layout` and `filter` fields of `layer` prop are reactive. If you change their value, changes automatically applied to the map. ::: ### `before` - **Type:** `String` - **Default:** `undefined` - **Non-Synced** - **Description:** The ID of an existing layer to insert the new layer before. - **See:** `metadata` in [Mapbox Layer Style Spec](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layer-metadata) #### Props for V-Mapbox component ### `clearSource` - **Type:** `Boolean` - **Default:** `true` - **Non-Synced** - **Description:** If `true`, component will remove layer source from map on component destruction. ### `replaceSource` - **Type:** `Boolean` - **Default:** `false` - **Non-Synced** - **Description:** If source passed to `source` prop of layer component already added ot the map, it will be ignored and existed `source` will be used. If `replaceSource` is `true` source will be replaced with new instead. ### `replace` - **Type:** `Boolean` - **Default:** `false` - **Non-Synced** - **Description:** If `true`, replaces existing layer with same id. Otherwise, error returns. ## Computed properties ### `sourceLoaded` - **Type** `Boolean` - **Description** Flag that indicated if layer source already loaded. ### `mapLayer` - **Type** `Object` - **Description** Mapbox GL layer object. - **See** [`.getLayer()`](https://docs.mapbox.com/mapbox-gl-js/api/#map#getlayer) map method ### `mapSource` - **Type** `Object` - **Description** Source for this layer. - **See** [`Mapbox GL source`](https://docs.mapbox.com/mapbox-gl-js/api/#sources) ## Methods ### `.move(beforeId?)` - **Arguments:** - `beforeId` `String` The ID of an existing layer to insert the new layer before. If this argument is omitted, the layer will be appended to the end of the layers array. - **Description** Moves a layer to a different z-position. - **See** [`.moveLayer()`](https://docs.mapbox.com/mapbox-gl-js/api/#map#movelayer) map method ### `.remove()` - **Description** Removes the layer with and source assosiated with it. - **See** [`.removeLayer()`](https://docs.mapbox.com/mapbox-gl-js/api/#map#removelayer) map method ## Events Payload of events contains object with properties: - `mapboxEvent` Original Mapbox GL JS event - `layerId` ID of current layer - `map` Current map object - `component` Component that emits event ### `@mousedown` ### `@mouseup` ### `@click` ### `@dblclick` ### `@mousemove` ### `@mouseenter` ### `@mouseleave` ### `@mouseover` ### `@mouseout` ### `@contextmenu` ### `@touchstart` ### `@touchend` ### `@touchcancel` ================================================ FILE: docs/api/Layers/rasterlayer.md ================================================ # RasterLayer ## Props All common [layers props](/api/Layers/index.md#props) ### `source` - **Type:** `Object | String` - **Non-Synced** - **Description:** A raster tile source. - **See:** `Raster source` in [Mapbox Style Spec](https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources-raster) ## Events All common layer [events](/api/Layers/#events) ================================================ FILE: docs/api/Layers/vectorlayer.md ================================================ # VectorLayer ## Props All common [layers props](/api/Layers/index.md#props) ### `source` - **Type:** `Object | String` - **Non-Synced** - **Description:** A vector tile source. - **See:** `Vector source` in [Mapbox Style Spec](https://docs.mapbox.com/mapbox-gl-js/style-spec/#sources-vector) ## Computed getters ### `getSourceFeatures(filter?)` - **Arguments:** - `filter` `Array` A filter to limit query results. - **Description** Returns an array of GeoJSON Feature objects from assosiated source filtered by `filter`. - **See** `.querySourceFeatures()` [map method](https://docs.mapbox.com/mapbox-gl-js/api/#map#querysourcefeatures) ### `getRenderedFeatures(geometry, filter)` - **Arguments:** - `filter` `Array` A filter to limit query results. - `geometry` `Array | Object` The geometry of the query region. - **Description** Returns an array of visible GeoJSON Feature objects from assosiated source filtered by `filter`. - **See** `.queryRenderedFeatures()` [map method](https://docs.mapbox.com/mapbox-gl-js/api/#map#queryrenderedfeatures) ## Methods ### `setFeatureState(featureId, state)` - **Arguments:** - `featureId` `String | Number` Feature identifier. - `state` `Object` A set of key-value pairs. The values should be valid JSON types. - **Description** Sets the state of a feature. The state object is merged in with the existing state of the feature. - **See** `.setFeatureState()` [map method](https://docs.mapbox.com/mapbox-gl-js/api/#map#setfeaturestate) ### `getFeatureState(featureId)` - **Arguments:** - `featureId` `String | Number` Feature identifier. - **Description** Gets the state of a feature. - **See** `.getFeatureState()` [map method](https://docs.mapbox.com/mapbox-gl-js/api/#map#getfeaturestate) ## Events All common layer [events](/api/Layers/#events) ================================================ FILE: docs/api/Layers/videolayer.md ================================================ # CanvasLayer ## Props All common [layers props](/api/Layers/index.md#props) ### `source` - **Type:** `Object | String` - **Non-Synced** - **Description:** A data source containing video. - **See:** `Video source` in [Mapbox API Docs](https://docs.mapbox.com/mapbox-gl-js/api/#videosource) ::: tip Reactivity `coordinates` field of the `source` prop is reactive. If you change it's value, changes automatically applied to the map. ::: ## Computed getters ### `video` - **Description** Returns the HTML video element. - **See** `.getVideo()` [method](https://docs.mapbox.com/mapbox-gl-js/api/#videosource#getvideo) ================================================ FILE: docs/api/controls.md ================================================ # Map control components ### Common Props ### `position` - **Type:** `String` - **Default:** `'top-right'` - **Description:** position on the map to which the control will be added. Valid values are 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' - **See:** `position` in [addControl](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addcontrol) ### Common Props ### `position` - **Type:** `String` - **Default:** `'top-right'` - **Description:** position on the map to which the control will be added. Valid values are 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' - **See:** `position` in [addControl](https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addcontrol) ## IControl a versatile control box for your content ### Props none ### Slots ### `default` Your content as text, HTML or Template, will be wrapped in div with `mapboxgl-ctrl mapboxgl-ctrl-group` classes ***See:*** [IControl](https://docs.mapbox.com/mapbox-gl-js/api/markers/#icontrol) ## AttributionControl An AttributionControl control presents the map's attribution information. ### Props ### `compact` - **Type:** `Boolean` - **Default:** `true` - **Non-Synced** - **Description:** If true force a compact attribution - **See:** `options.compact` in [AttributionControl](https://docs.mapbox.com/mapbox-gl-js/api/#attributioncontrol) ### `customAttribution` - **Type:** `string, Array
Hello, I'm popup!
Hello, I'm popup!
Map center is: Lng={{ center.lng }}, Lat={{ center.lat }}
```
## VueMapbox helpers