Skip to content

A Vue2Leaflet wrapper for the Leaflet-MiniMap control plugin.

License

Notifications You must be signed in to change notification settings

patrickcate/vue-leaflet-minimap

Repository files navigation

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