New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

vue-maplibre-gl

Package Overview
Dependencies
Maintainers
0
Versions
82
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-maplibre-gl

Vue 3 plugin for maplibre-gl

  • 5.5.4
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
777
decreased by-1.52%
Maintainers
0
Weekly downloads
 
Created
Source

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

Polygon Mode

Circle

Circle Mode

Circle Static

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

Circle Static Mode

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

Keywords

FAQs

Package last updated on 19 Feb 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc