Package Exports

maplibre-gl-vue3-plugin
maplibre-gl-vue3-plugin/dist/vue-maplibre-gl.esm.js
maplibre-gl-vue3-plugin/dist/vue-maplibre-gl.ssr.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (maplibre-gl-vue3-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

maplibre-gl-vue3-plugin

A vue plugin for maplibre-gl-js. Only additional dependency is mitt.

Size: 36 KB

Features

Typescript support
Components for map, controls, sources, marker 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)

Installation
Usage

Installation

yarn add maplibre-gl-vue3-plugin maplibre-gl

Default import

Global Install:

import VueMaplibreGl from 'maplibre-gl-vue3-plugin'

app.use(VueMaplibreGl)

Add SCSS:

@import "~maplibre-gl-vue3-plugin/src/css/maplibre";

Use specific components:

import { MglMap } from 'maplibre-gl-vue3-plugin'

app.component('MglMap', MglMap)

or in a parent components .vue file

<script>
    import { MglMap } from 'maplibre-gl-vue3-plugin'

    export default {
        components: {
            MglMap
        },
        // ...
    }
</script>

Usage

See /dev/serve.vue for a real world example.

Demo

git clone https://github.com/yevgen4989/maplibre-gl-vue3-plugin.git
cd maplibre-gl-vue3-plugin
yarn
yarn serve

PRs welcome ♥

If you have ideas, improvements, suggestions etc. don't hesitate to open a pull request.

Todos

Generate separate css file to be included (currently, you have to use scss)
Usage examples
Demo
API documentation
Support v-model:... for some basic props
Add layer events
Add lang switcher
Add Web-types
Add frame rate control

License

MIT