A small Vue 3 plugin for maplibre-gl-js. Only additional dependency is mitt.
- Supports MapLibre GL JS v3.x
- Typescript support
- Components for map, controls, sources, markers and layers
- Support for custom controls
- Customizable style switch which reloads sources and layers automatically
- Frame rate control included
- Support for multiple instances and global access by
useMap(key: string | symbol)
- Simple way to switch displayed map language
- Automatic restart on CONTEXT_LOST_WEBGL which can happen on mobile devices when tab was in background for longer time
- Small size
yarn add vue-maplibre-gl maplibre-gl mitt
Global Install:
import VueMaplibreGl from 'vue-maplibre-gl'
app.use(VueMaplibreGl)
Add CSS:
@import "~maplibre-gl/dist/maplibre-gl.css";
@import "~vue-maplibre-gl/dist/vue-maplibre-gl.css";
Use specific components:
import { MglMap } from 'vue-maplibre-gl'
app.component('MglMap', MglMap)
or in a parent components .vue
file
<script>
import { MglMap } from 'vue-maplibre-gl'
export default {
components: {
MglMap
},
// ...
}
</script>
See src/App.vue for a real world example.
git clone https://github.com/razorness/vue-maplibre-gl.git
cd vue-maplibre-gl
yarn
yarn dev
If you have ideas, improvements, suggestions etc. don't hesitate to open a pull request.
- Usage examples
- Demo
- API documentation
- Support
v-model:...
for some basic props - Add layer events
- Add Web-types
- Add frame rate control