vue-maplibre-gl

vue-maplibre-gl

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

Features

• Supports MapLibre GL JS v5.x
• Typescript support
• Components for map, controls, sources, markers and layers
• ⚠ NEW: Simple Draw Control to draw: polygon, circle and circle (static to camera viewport)
• 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
• Usage
• Draw Plugin
• Demo

Installation

yarn add vue-maplibre-gl maplibre-gl mitt

Default import

Global Install:

import VueMaplibreGl from 'vue-maplibre-gl'

app.use(VueMaplibreGl)

Add CSS:

@use "~maplibre-gl/dist/maplibre-gl.css";
@use "~vue-maplibre-gl/dist/vue-maplibre-gl.css";
@use "~vue-maplibre-gl/dist/vue-maplibre-gl-draw.css"; /* optional: only needed for draw component */

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>

Draw Plugin

Draw Plugin adds few dependencies from Turf.js. That's all.

Features

• draw/edit polygon
• draw/edit circle like polygon or viewport drag/zoom
• visualize area below minimal area size (in m²)

Usage

Add CSS:

@use "~vue-maplibre-gl/dist/vue-maplibre-gl-draw.css";

<template>
    <mgl-map>
        <mgl-draw-control v-model="myDrawModel"/>
    </mgl-map>
</template>

You can use the draw plugin without using the MglDrawComponent. See src/components/controls/draw.control.ts to get an example.

Modes

Polygon

Circle

Circle Static

This mode uses a circle which behaves static to camera viewport. Can be very handy for usage on smartphones.

Styling Polygon and Circle Mode

There is a default style used which can be found in src/plugins/draw/styles.ts. To customize the design when drawing polygon or circle, you can set your own by:

<template>
    <mgl-map>
        <mgl-draw-control :style="myCustomStyle"/>
    </mgl-map>
</template>

Styling Circle Static Mode

The draw component automatically uses padding settings from fitBoundsOptions of map instance. If you want to set them manually, you can do this by:

.maplibregl-draw-circle-mode {
  top: 50px;
  right: 50px;
  bottom: 50px;
  left: 50px;
}

Custom colors for static circle mode can be set by:

.maplibregl-draw-circle-mode-circle {
  background: rgba(231, 75, 60, 0.2);
  border: 2px solid #e74b3c;
}

See src/plugins/draw/draw.plugin.scss for more details to style your own static circle mode.

Usage

See dev/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

License

MIT