Skip to content

Latest commit

 

History

History
100 lines (69 loc) · 2.34 KB

README.md

File metadata and controls

100 lines (69 loc) · 2.34 KB
Raw

vue-maplibre-gl

npm TypeScript vue2

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

yarn add @vladvesa/vue-maplibre-gl maplibre-gl

Default import

Global Install:

import VueMaplibreGl from '@vladvesa/vue-maplibre-gl';

app.use(VueMaplibreGl);

Add CSS:

@import 'vue-maplibre-gl/dist/style.css';

Use specific components:

import { MglMap } from '@vladvesa/vue-maplibre-gl';

app.component('MglMap', MglMap);

or in a parent components .vue file

<script>
	import { MglMap } from '@vladvesa/vue-maplibre-gl';

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

Usage

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

Demo

git clone https://github.com/vladvesa/vue-maplibre-gl.git
cd vue-maplibre-gl
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 Web-types
  • Add frame rate control

License

MIT