Skip to content

razorness/vue-maplibre-gl

Repository files navigation

vue-maplibre-gl

npm npm size vue3 MaplibreGL-JS TypeScript

A small Vue 3 plugin for maplibre-gl-js. Only additional dependency is mitt.

Features

  • 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

Table of contents

Installation

yarn add vue-maplibre-gl maplibre-gl mitt

Default import

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>

Usage

See src/App.vue for a real world example.

Demo

git clone https://github.com/razorness/vue-maplibre-gl.git
cd vue-maplibre-gl
yarn
yarn dev

PRs welcome ♥

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

Todos

License

MIT