From 96a0daa05ee837814212b2e47f1bddfbca7b9bce Mon Sep 17 00:00:00 2001
From: Linus Groh <mail@linusgroh.de>
Date: Tue, 1 Oct 2019 21:56:37 +0100
Subject: [PATCH] Fix heatmap

---
 package.json                |   1 -
 src/components/LHeatmap.vue | 115 ++++++++++++++++++++++++++++++++++++
 src/views/Map.vue           |   3 +-
 yarn.lock                   |  33 -----------
 4 files changed, 116 insertions(+), 36 deletions(-)
 create mode 100644 src/components/LHeatmap.vue

diff --git a/package.json b/package.json
index 43f5886..d9619b5 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "vue-js-modal": "^1.3.31",
     "vue-router": "^3.1.3",
     "vue2-leaflet": "^2.2.1",
-    "vue2-leaflet-heatmap": "^1.0.5",
     "vuejs-datepicker": "^1.6.2",
     "vuex": "^3.1.1"
   },
diff --git a/src/components/LHeatmap.vue b/src/components/LHeatmap.vue
new file mode 100644
index 0000000..1363205
--- /dev/null
+++ b/src/components/LHeatmap.vue
@@ -0,0 +1,115 @@
+<template>
+  <div />
+</template>
+
+<style scoped>
+div {
+  display: none;
+}
+</style>
+
+<script>
+// See https://github.com/KoRiGaN/Vue2Leaflet/blob/e0cf0f29bc519f0a70f0f1eb6e579f947e7ea4ce/src/utils/utils.js
+// to understand the `custom` attribute of each prop, how the `set<Prop>`
+// methods are being used and why `mapObject` has to be named `mapObject`.
+
+import { findRealParent, propsBinder } from "vue2-leaflet";
+import L, { DomEvent } from "leaflet";
+import "leaflet.heat";
+
+const props = {
+  latLng: {
+    type: Array,
+    default: () => [],
+    custom: false,
+  },
+  minOpacity: {
+    type: Number,
+    custom: true,
+    default: 0.05,
+  },
+  maxZoom: {
+    type: Number,
+    custom: true,
+    default: 18,
+  },
+  radius: {
+    type: Number,
+    custom: true,
+    default: 25,
+  },
+  blur: {
+    type: Number,
+    custom: true,
+    default: 15,
+  },
+  max: {
+    type: Number,
+    custom: true,
+    default: 1.0,
+  },
+  visible: {
+    type: Boolean,
+    custom: true,
+    default: true,
+  },
+};
+
+export default {
+  props,
+  mounted() {
+    const options = {};
+    if (this.minOpacity) {
+      options.minOpacity = this.minOpacity;
+    }
+    if (this.maxZoom) {
+      options.maxZoom = this.maxZoom;
+    }
+    if (this.radius) {
+      options.radius = this.radius;
+    }
+    if (this.blur) {
+      options.blur = this.blur;
+    }
+    if (this.max) {
+      options.max = this.max;
+    }
+    this.mapObject = L.heatLayer(this.latLng, options);
+    DomEvent.on(this.mapObject, this.$listeners);
+    propsBinder(this, this.mapObject, props);
+    this.parentContainer = findRealParent(this.$parent);
+    this.parentContainer.addLayer(this, !this.visible);
+  },
+  beforeDestroy() {
+    this.parentContainer.removeLayer(this);
+  },
+  methods: {
+    setMinOpacity(minOpacity) {
+      this.mapObject.setOptions({ minOpacity });
+    },
+    setMaxZoom(maxZoom) {
+      this.mapObject.setOptions({ maxZoom });
+    },
+    setRadius(radius) {
+      this.mapObject.setOptions({ radius });
+    },
+    setBlur(blur) {
+      this.mapObject.setOptions({ blur });
+    },
+    setMax(max) {
+      this.mapObject.setOptions({ max });
+    },
+    setVisible(newVal, oldVal) {
+      if (newVal === oldVal) return;
+      if (newVal) {
+        this.parentContainer.addLayer(this);
+      } else {
+        this.parentContainer.removeLayer(this);
+      }
+    },
+    addLatLng(value) {
+      this.mapObject.addLatLng(value);
+    },
+  },
+};
+</script>
diff --git a/src/views/Map.vue b/src/views/Map.vue
index 4821ad1..05ac689 100644
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -104,7 +104,6 @@
 <script>
 import { mapGetters, mapState, mapMutations } from "vuex";
 import L from "leaflet";
-import "leaflet.heat";
 import {
   LMap,
   LTileLayer,
@@ -119,10 +118,10 @@ import "leaflet/dist/leaflet.css";
 import markerIcon from "leaflet/dist/images/marker-icon.png";
 import markerIcon2x from "leaflet/dist/images/marker-icon-2x.png";
 import markerShadow from "leaflet/dist/images/marker-shadow.png";
-import LHeatmap from "vue2-leaflet-heatmap";
 
 import * as types from "@/store/mutation-types";
 import config from "@/config";
+import LHeatmap from "@/components/LHeatmap";
 import LDeviceLocationPopup from "@/components/LDeviceLocationPopup";
 
 // See https://github.com/KoRiGaN/Vue2Leaflet/issues/28#issuecomment-299038157
diff --git a/yarn.lock b/yarn.lock
index b8a808d..4729764 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -956,11 +956,6 @@
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
   integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==
 
-"@types/geojson@*":
-  version "7946.0.7"
-  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.7.tgz#c8fa532b60a0042219cdf173ca21a975ef0666ad"
-  integrity sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==
-
 "@types/glob@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
@@ -990,13 +985,6 @@
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
-"@types/leaflet@^1.2.11":
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.4.3.tgz#62638cb73770eeaed40222042afbcc7b495f0cc4"
-  integrity sha512-jFRBSsPHi1EwQSwrN0cOJLdPhwOZsRl4IMxvm/2ShLh0YM5GfCtQXCzsrv8RE7DWL+AykXdYSAd9bFLWbZT4CQ==
-  dependencies:
-    "@types/geojson" "*"
-
 "@types/minimatch@*":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -6947,11 +6935,6 @@ leaflet.heat@^0.2.0:
   resolved "https://registry.yarnpkg.com/leaflet.heat/-/leaflet.heat-0.2.0.tgz#109d8cf586f0adee41f05aff031e27a77fecc229"
   integrity sha1-EJ2M9Ybwre5B8Fr/Ax4np3/swik=
 
-leaflet@1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.3.1.tgz#86f336d2fb0e2d0ff446677049a5dc34cf0ea60e"
-  integrity sha512-adQOIzh+bfdridLM1xIgJ9VnJbAUY3wqs/ueF+ITla+PLQ1z47USdBKUf+iD9FuUA8RtlT6j6hZBfZoA6mW+XQ==
-
 leaflet@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.5.1.tgz#9afb9d963d66c870066b1342e7a06f92840f46bf"
@@ -11227,22 +11210,6 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue2-leaflet-heatmap@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/vue2-leaflet-heatmap/-/vue2-leaflet-heatmap-1.0.5.tgz#c8a929b99ae33be880b5fa81a74025619a9f8596"
-  integrity sha512-NoHY1+AFe8pDrq91mjqiXXVanANC3EQZIDn0uPaDU8k234+d53R1FM8BxRV5YRpBvFbin38w32d9/S2BVp0G9Q==
-  dependencies:
-    leaflet.heat "^0.2.0"
-    vue2-leaflet "^1.1.1"
-
-vue2-leaflet@^1.1.1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-1.2.3.tgz#00ddeb9db4fb9a5e3b8f9c09cd97a4734366415e"
-  integrity sha512-dsmhswT6Xu2Nm59T64edvG0lpycSgIWQL3pUU7h6foP8QL+mSuT5gnhJGLO2mt+39w+HBTr4Rgz8bQvyELKVPA==
-  dependencies:
-    "@types/leaflet" "^1.2.11"
-    leaflet "1.3.1"
-
 vue2-leaflet@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/vue2-leaflet/-/vue2-leaflet-2.2.1.tgz#cd67274951751a33df147481fce2b956ba174c7e"