mirror of
https://github.com/owntracks/frontend.git
synced 2026-08-23 11:26:16 +00:00
Fix heatmap
This commit is contained in:
Linus Groh
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
+1
-2
@@ -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
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user