
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
vue-maplibre-gl
Advanced tools
A small Vue 3 plugin for maplibre-gl-js. Only additional dependency is mitt.
useMap(key: string | symbol)
yarn add vue-maplibre-gl maplibre-gl mitt
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 adds few dependencies from Turf.js. That's all.
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.
This mode uses a circle which behaves static to camera viewport. Can be very handy for usage on smartphones.
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>
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.
See dev/App.vue for a real world example.
git clone https://github.com/razorness/vue-maplibre-gl.git
cd vue-maplibre-gl
yarn
yarn dev
FAQs
Vue 3 plugin for maplibre-gl
The npm package vue-maplibre-gl receives a total of 753 weekly downloads. As such, vue-maplibre-gl popularity was classified as not popular.
We found that vue-maplibre-gl demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.