Vue provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex. To more elegantly in using mapbox-gl, there is a package named [`MapVue`](https://github.com/timeroute/mapvue). MapVue is a comprehensive MapboxGL component library. You can easily and happily apply MapVue to your Vue projects. Import various data sources and layers in the form of components, and update props of layers and sources in map by MVVM. ### How it works? MapVue essentially wraps some classes in MapboxGL and implements componentization through some variable properties of the watch class. For example, the `v-fill-layer` component actually wraps the `FillLayer` class. There are [`25 components`](https://mapvue.netlify.app/components/#common-components) im MapVue, almost contains all of the mapbox-gl APIS. The core component is `VMap` component. It is the top-level component, all other components must be wrapped in `VMap`, it instantiates a `mapboxgl.Map` and provides the `map` instance to child components. ### Components lists - Core Components - VMap - Common Components - VMarker: wrap `mapboxgl.Marker` - VPopup: wrap `mapboxgl.Popup` - VSprit: add an image to the style - VFog: wrap `map.setFog` - VFeatureState: set the state of a feature - Control Components - VAttributionControl: wrap `AttributionControl` control - VNavigationControl: wrap `NavigationControl` control - VScaleControl: wrap `ScaleControl` control - Layer Components - VBackgroundLayer: wrap `background` layer - VCircleLayer: wrap `circle` layer - VFillExtrusionLayer: wrap `fillextrusion` layer - VFillLayer: wrap `fill` layer - VHeatmapLayer: wrap `heatmap` layer - VHillshadeLayer: wrap `hillshade` layer - VLineLayer: wrap `line` layer - VRasterLayer: wrap `raster` layer - VSymbolLayer: wrap `symbol` layer - VCanvasLayer: wrap `canvas` layer - Source Components - VGeoSource: wrap `geojson` source - VVectorSource: wrap `vector` source - VImageSource: wrap `image` source - VVideoSource: wrap `video` source - VRasterSource: wrap `raster` source - VRasterDemSource: wrap `rasterdem` source ### Install ```shell # use yarn yarn add mapvue ``` ```shell # use pnpm pnpm add mapvue ``` ### Import Vite ``` import { createApp } from "vue"; import MapVue from "mapvue"; import "mapvue/dist/mapvue.css"; import App from "./App.vue"; createApp(App).use(MapVue).mount("#app"); ``` ### Use case ``` ``` ![render heatmap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xcgi8wrw5ib7ig1keh6q.png) more examples please visiting [examples](https://codesandbox.io/s/vmap-examples-mnqjgn) github: [MapVue](https://github.com/timeroute/mapvue) docs: [MapVue doc](https://mapvue.netlify.app/)

chinesejar

How to use MapboxGL in Vue more elegantly

Join Our Newsletter. No Spam, Only the good stuff.