Implement POI map layer

Closes #107.
2024-11-15 01:08:18 -07:00 · 2024-06-10 19:53:49 +01:00 · 2024-06-10 19:53:49 +01:00 · 554ce3f585
commit 554ce3f585
parent 05ae629217
7 changed files with 107 additions and 46 deletions
--- a/docs/config.md
+++ b/docs/config.md
@ -53,10 +53,12 @@ window.owntracks.config = {};
    - [`heatmap`](#maplayersheatmap)
    - [`last`](#maplayerslast)
    - [`line`](#maplayersline)
+    - [`poi`](#maplayerspoi)
    - [`points`](#maplayerspoints)
  - [`maxNativeZoom`](#mapmaxnativezoom)
  - [`maxPointDistance`](#mapmaxpointdistance)
  - [`maxZoom`](#mapmaxzoom)
+  - [`poiMarker`](#mappoimarker)
  - [`polyline`](#mappolyline)
  - [`url`](#mapurl)
 - `onLocationChange`
@ -337,9 +339,16 @@ Initial visibility of the line layer.
 - Type: [`Boolean`]
 - Default: `true`

+### `map.layers.poi`
+
+Initial visibility of the POI layer.
+
+- Type: [`Boolean`]
+- Default: `true`
+
 ### `map.layers.points`

-Initial visibility of the points layer.
+Initial visibility of the location points layer.

 - Type: [`Boolean`]
 - Default: `false`
@ -380,9 +389,25 @@ to disable.
 - Type: [`Number`]
 - Default: `21`

+### `map.poiMarker`
+
+POI marker configuration. See [Vue2Leaflet `l-circle-marker` documentation](https://korigan.github.io/Vue2Leaflet/#/components/l-circle-marker/)
+for all possible values.
+
+- Type: [`Object`]
+- Default:
+  ```js
+  {
+    color: "red",
+    fillColor: "red",
+    fillOpacity: 0.2,
+    radius: 12
+  }
+  ```
+
 ### `map.polyline`

-Location point marker configuation. `color` defaults to `primaryColor` if `null`. See
+Location point marker configuration. `color` defaults to `primaryColor` if `null`. See
 [Vue2Leaflet `l-polyline` documentation](https://korigan.github.io/Vue2Leaflet/#/components/l-polyline/)
 for all possible values.

--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@ -189,6 +189,7 @@ export default {
        { layer: "line", label: this.$t("Show location history (line)") },
        { layer: "points", label: this.$t("Show location history (points)") },
        { layer: "heatmap", label: this.$t("Show location heatmap") },
+        { layer: "poi", label: this.$t("Show points of interest") },
      ],
      showMobileNav: false,
      shortcuts: [
--- a/src/config.js
+++ b/src/config.js
@ -55,11 +55,18 @@ const DEFAULT_CONFIG = {
      heatmap: false,
      last: true,
      line: true,
+      poi: true,
      points: false,
    },
    maxNativeZoom: 19,
    maxPointDistance: null,
    maxZoom: 21,
+    poiMarker: {
+      color: "red",
+      fillColor: "red",
+      fillOpacity: 0.2,
+      radius: 12,
+    },
    polyline: {
      color: null,
      fillColor: "transparent",
--- a/src/index.d.ts
+++ b/src/index.d.ts
@ -46,11 +46,18 @@ interface Config {
          heatmap: boolean;
          last: boolean;
          line: boolean;
+          poi: boolean;
          points: boolean;
        };
        maxNativeZoom: number;
        maxPointDistance: number | null;
        maxZoom: number;
+        poiMarker: {
+          color: OptionalColor;
+          fillColor: OptionalColor;
+          fillOpacity: number;
+          radius: number;
+        };
        polyline: {
          color: OptionalColor;
          fillColor: OptionalColor;
@ -96,6 +103,7 @@ interface State {
            heatmap: boolean;
            last: boolean;
            line: boolean;
+            poi: boolean;
            points: boolean;
        };
        zoom: number;
@ -173,6 +181,8 @@ interface OTLocation {
    lon: number;
    /** Friendly device name */
    name?: string;
+    /** Point of interest name */
+    poi?: string;
    /**
     * Trigger for the location report
     *
--- a/src/locales/en-GB.json
+++ b/src/locales/en-GB.json
@ -17,6 +17,7 @@
  "Show location history (line)": "Show location history (line)",
  "Show location history (points)": "Show location history (points)",
  "Show location heatmap": "Show location heatmap",
+  "Show points of interest": "Show points of interest",
  "Minify JSON": "Minify JSON",
  "Copy to clipboard": "Copy to clipboard",
  "Loading version...": "Loading version...",
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@ -17,6 +17,7 @@
  "Show location history (line)": "Show location history (line)",
  "Show location history (points)": "Show location history (points)",
  "Show location heatmap": "Show location heatmap",
+  "Show points of interest": "Show points of interest",
  "Minify JSON": "Minify JSON",
  "Copy to clipboard": "Copy to clipboard",
  "Loading version...": "Loading version...",
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@ -25,6 +25,62 @@
      :options="{ maxNativeZoom, maxZoom, zoomOffset }"
    />

+    <template v-if="map.layers.line">
+      <LPolyline
+        v-for="(group, i) in filteredLocationHistoryLatLngGroups"
+        :key="i"
+        :lat-lngs="group"
+        v-bind="polyline"
+      />
+    </template>
+
+    <template v-for="(userDevices, user) in filteredLocationHistory">
+      <template v-for="(deviceLocations, device) in userDevices">
+        <template
+          v-for="(l, n) in deviceLocationsWithNameAndFace(
+            user,
+            device,
+            deviceLocations
+          )"
+        >
+          <LCircleMarker
+            v-if="map.layers.poi && l.poi"
+            :key="`${l.topic}-poi-${n}`"
+            :lat-lng="[l.lat, l.lon]"
+            v-bind="poiMarker"
+          >
+            <LTooltip :options="{ permanent: true }">
+              {{ l.poi }}
+            </LTooltip>
+          </LCircleMarker>
+          <LCircleMarker
+            v-if="map.layers.points"
+            :key="`${l.topic}-location-${n}`"
+            :lat-lng="[l.lat, l.lon]"
+            v-bind="circleMarker"
+          >
+            <LDeviceLocationPopup
+              :user="user"
+              :device="device"
+              :name="l.name"
+              :face="l.face"
+              :timestamp="l.tst"
+              :iso-local="l.isolocal"
+              :time-zone="l.tzname"
+              :lat="l.lat"
+              :lon="l.lon"
+              :alt="l.alt"
+              :battery="l.batt"
+              :speed="l.vel"
+              :regions="l.inregions"
+              :wifi="{ ssid: l.SSID, bssid: l.BSSID }"
+              :address="l.addr"
+            ></LDeviceLocationPopup>
+          </LCircleMarker>
+        </template>
+      </template>
+    </template>
+
    <template v-if="map.layers.last">
      <LCircle
        v-for="l in lastLocations"
@ -61,50 +117,6 @@
      </LMarker>
    </template>

-    <template v-if="map.layers.line">
-      <LPolyline
-        v-for="(group, i) in filteredLocationHistoryLatLngGroups"
-        :key="i"
-        :lat-lngs="group"
-        v-bind="polyline"
-      />
-    </template>
-
-    <template v-if="map.layers.points">
-      <template v-for="(userDevices, user) in filteredLocationHistory">
-        <template v-for="(deviceLocations, device) in userDevices">
-          <LCircleMarker
-            v-for="(l, n) in deviceLocationsWithNameAndFace(
-              user,
-              device,
-              deviceLocations
-            )"
-            :key="`${user}-${device}-${n}`"
-            :lat-lng="[l.lat, l.lon]"
-            v-bind="circleMarker"
-          >
-            <LDeviceLocationPopup
-              :user="user"
-              :device="device"
-              :name="l.name"
-              :face="l.face"
-              :timestamp="l.tst"
-              :iso-local="l.isolocal"
-              :time-zone="l.tzname"
-              :lat="l.lat"
-              :lon="l.lon"
-              :alt="l.alt"
-              :battery="l.batt"
-              :speed="l.vel"
-              :regions="l.inregions"
-              :wifi="{ ssid: l.SSID, bssid: l.BSSID }"
-              :address="l.addr"
-            ></LDeviceLocationPopup>
-          </LCircleMarker>
-        </template>
-      </template>
-    </template>
-
    <template v-if="map.layers.heatmap">
      <LHeatmap
        v-if="filteredLocationHistoryLatLngs.length"
@ -130,6 +142,7 @@ import {
  LCircleMarker,
  LCircle,
  LPolyline,
+  LTooltip,
 } from "vue2-leaflet";
 import "leaflet/dist/leaflet.css";
 import * as types from "@/store/mutation-types";
@ -149,6 +162,7 @@ export default {
    LPolyline,
    LDeviceLocationPopup,
    LHeatmap,
+    LTooltip,
  },
  data() {
    return {
@ -173,6 +187,7 @@ export default {
        ...this.$config.map.circleMarker,
        color: this.$config.map.circleMarker.color || this.$config.primaryColor,
      },
+      poiMarker: this.$config.map.poiMarker,
      polyline: {
        ...this.$config.map.polyline,
        color: this.$config.map.polyline.color || this.$config.primaryColor,
@ -214,6 +229,7 @@ export default {
      if (
        (this.map.layers.line ||
          this.map.layers.points ||
+          this.map.layers.poi ||
          this.map.layers.heatmap) &&
        this.filteredLocationHistoryLatLngs.length > 0
      ) {