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)

Table of contents

• 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
• [x] Add layer events
• [x] Add lang switcher
• [ ] Add Web-types
• [x] Add frame rate control

License

MIT