vue-leaflet-minimap
A Vue2Leaflet wrapper component for the Leaflet-MiniMap plugin.
Dependencies
Installation
npm install leaflet-minimap vue-leaflet-minimap
or
yarn add leaflet-minimap vue-leaflet-minimap
You can add the plugin by either adding it as a <script>
tag or importing it into a SFC.
Usage
You will need to create a Leaflet TileLayer to pass to the minimap component. The plugin authors recommend either making a copy of an existing base layer or using a different one. Custom options can also be passed.
Example:
<script>
import L from 'leaflet'
import { LMap, LTileLayer } from 'vue2-leaflet'
import VueLeafletMinimap from 'vue-leaflet-minimap'
export default {
components: { LMap, LTileLayer, VueLeafletMinimap },
data() {
return {
zoom: 5,
center: [47.41322, -1.219482],
url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: 'Map data © OpenStreetMap contributors',
layer: new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
options: {
position: 'bottomleft',
width: 200,
height: 175,
},
}
},
}
</script>
<template>
<l-map :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<vue-leaflet-minimap
:layer="layer"
:options="options"
></vue-leaflet-minimap>
</l-map>
</template>
Styling
This plugin does not include the default Minimap CSS. To include it you will need to add it as a link rel="stylesheet"
tag in the head, or import it in the <style>
section of a component.
<style>@import '~leaflet-minimap/dist/Control.MiniMap.min.css';</style>
Props
Name | Type | Required | Description |
---|---|---|---|
layer |
Object |
Yes | A Leaflet TileLayer. |
options |
Object |
No | Options to pass to the plugin. See Leaflet-MiniMap for a full list. |
Events
Name | Description |
---|---|
ready |
Fired when plugin has been mounted. |
minimize |
Fired when minimap is minimized. Only works when the toggleDisplay option is set to true . |
restore |
Fired when minimap is expanded. Only works when the toggleDisplay option is set to true . |
toggle |
Fired both when minimap is minimized or expanded. Only works when the toggleDisplay option is set to true . |
Methods
Name | Arguments | Description |
---|---|---|
changeLayer |
TileLayer |
Swaps out the minimap layer with the one provided. |
Development
Project setup
yarn install
Compiles and hot-reloads for development
yarn serve
Compiles and minifies for production
yarn build
Lints and fixes files
yarn lint