README

vue-leaflet-minimap

A Vue2Leaflet wrapper component for the Leaflet-MiniMap plugin.

Dependencies

Installation

npm install leaflet-minimap vue-leaflet-minimap

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

Usage no npm install needed!