Merge pull request #1 from patrickcate/v1

Initial work.

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended', '@vue/prettier'],
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+  },
+}

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+dist/demo.html

.prettierrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  arrowParens: 'avoid',
+  bracketSpacing: true,
+  endOfLine: 'lf',
+  htmlWhitespaceSensitivity: 'strict',
+  jsxBracketSameLine: true,
+  jsxSingleQuote: true,
+  printWidth: 80,
+  proseWrap: 'never',
+  quoteProps: 'as-needed',
+  semi: false,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  useTabs: false,
+  vueIndentScriptAndStyle: false,
+}

README.md

@@ -0,0 +1,126 @@
+# vue-leaflet-minimap
+
+A [Vue2Leaflet](https://github.com/vue-leaflet/Vue2Leaflet) wrapper component for the [Leaflet-MiniMap](https://github.com/Norkart/Leaflet-MiniMap) plugin.
+
+## Dependencies
+
+- [Vue.js](https://github.com/vuejs/vue)
+- [Vue2Leaflet](https://github.com/vue-leaflet/Vue2Leaflet)
+- [Leaflet.js](https://leafletjs.com/)
+- [Leaflet-MiniMap](https://github.com/Norkart/Leaflet-MiniMap)
+
+## Installation
+
+```bash
+npm install leaflet-minimap vue-leaflet-minimap
+```
+
+or
+
+```bash
+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](https://github.com/Norkart/Leaflet-MiniMap#using-the-minimap-control). Custom options can also be passed.
+
+**Example:**
+
+```js
+<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.
+
+```js
+<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](https://github.com/Norkart/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
+
+```bash
+yarn install
+```
+
+### Compiles and hot-reloads for development
+
+```bash
+yarn serve
+```
+
+### Compiles and minifies for production
+
+```bash
+yarn build
+```
+
+### Lints and fixes files
+
+```bash
+yarn lint
+```
+
+### Author
+
+[Patrick Cate](https://github.com/patrickcate)

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+}

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "vue-leaflet-minimap",
+  "version": "1.0.0",
+  "description": "A Vue2Leaflet wrapper for the Leaflet-MiniMap control plugin.",
+  "main": "dist/vue-leaflet-minimap.umd.min.js",
+  "module": "dist/vue-leaflet-minimap.common.js",
+  "keywords": [
+    "vue",
+    "vue2leaflet",
+    "leaflet",
+    "minimap"
+  ],
+  "author": "Patrick Cate",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/patrickcate/vue-leaflet-minimap.git"
+  },
+  "bugs": {
+    "url": "https://github.com/patrickcate/vue-leaflet-minimap/issues"
+  },
+  "homepage": "https://github.com/patrickcate/vue-leaflet-minimap",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build --mode production --target lib --name vue-leaflet-minimap ./src/vue-leaflet-minimap.vue",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "leaflet-minimap": "^3.6.1",
+    "vue2-leaflet": "^2.5.2"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-service": "~4.3.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "lint-staged": "^9.5.0",
+    "prettier": "^1.19.1",
+    "vue-template-compiler": "^2.6.11",
+    "vue": "^2.6.11",
+    "leaflet": "^1.6.0"
+  },
+  "peerDependencies": {
+    "leaflet": "^1.6.0"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  },
+  "files": [
+    "src/vue-leaflet-minimap.vue",
+    "dist/*.js"
+  ]
+}

public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="example"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/example.vue

@@ -0,0 +1,42 @@
+<script>
+import L from 'leaflet'
+import { LMap, LTileLayer } from 'vue2-leaflet'
+import VueLeafletMinimap from './vue-leaflet-minimap.vue'
+
+const mapUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+const mapAttribution = 'Map data &copy; OpenStreetMap contributors'
+
+export default {
+  name: 'Example',
+  components: { LMap, LTileLayer, VueLeafletMinimap },
+  data() {
+    return {
+      zoom: 5,
+      url: mapUrl,
+      attribution: mapAttribution,
+    }
+  },
+  created() {
+    this.layer = new L.TileLayer(mapUrl)
+  },
+}
+</script>
+
+<template>
+  <div id="example" style="height: 700px; width: 100%">
+    <l-map :zoom="zoom" :center="[47.41322, -1.219482]">
+      <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
+      <vue-leaflet-minimap :layer="layer" :options="{}"></vue-leaflet-minimap>
+    </l-map>
+  </div>
+</template>
+
+<style>
+@import '~leaflet/dist/leaflet.css';
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+</style>

src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import Example from './example.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(Example),
+}).$mount('#example')