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
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";
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