vue-leaflet-minimap

A Vue2Leaflet wrapper component for the Leaflet-MiniMap plugin.

Dependencies

• Vue.js
• Vue2Leaflet
• Leaflet.js
• Leaflet-MiniMap

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 &copy; 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

Author

Patrick Cate