Add button to location-selector to move marker to current view

home-assistant · Oct 2, 2024 · e4dd649 · e4dd649
1 parent f64a150
commit e4dd649
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 11 deletions.
diff --git a/src/components/ha-selector/ha-selector-location.ts b/src/components/ha-selector/ha-selector-location.ts
@@ -1,5 +1,6 @@
+import { mdiMapMarkerDown } from "@mdi/js";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
@@ -8,7 +9,10 @@ import type {
 } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import type { SchemaUnion } from "../ha-form/types";
-import type { MarkerLocation } from "../map/ha-locations-editor";
+import type {
+  MarkerLocation,
+  HaLocationsEditor,
+} from "../map/ha-locations-editor";
 import "../map/ha-locations-editor";
 import "../ha-form/ha-form";
 
@@ -26,6 +30,8 @@ export class HaLocationSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @query("ha-locations-editor", true) private map!: HaLocationsEditor;
+
   private _schema = memoizeOne(
     (radius?: boolean, radius_readonly?: boolean) =>
       [
@@ -72,14 +78,26 @@ export class HaLocationSelector extends LitElement {
   protected render() {
     return html`
       <p>${this.label ? this.label : ""}</p>
-      <ha-locations-editor
-        class="flex"
-        .hass=${this.hass}
-        .helper=${this.helper}
-        .locations=${this._location(this.selector, this.value)}
-        @location-updated=${this._locationChanged}
-        @radius-updated=${this._radiusChanged}
-      ></ha-locations-editor>
+      <div id="mapContainer">
+        <ha-locations-editor
+          class="flex"
+          .hass=${this.hass}
+          .helper=${this.helper}
+          .locations=${this._location(this.selector, this.value)}
+          @location-updated=${this._locationChanged}
+          @radius-updated=${this._radiusChanged}
+        ></ha-locations-editor>
+        <ha-icon-button
+          .label=${this.hass!.localize(
+            `ui.components.selectors.location.snap_to_view`
+          )}
+          .path=${mdiMapMarkerDown}
+          .disabled=${this.disabled}
+          style=${this.hass.themes.darkMode ? "color:#ffffff" : "color:#000000"}
+          @click=${this._snapToView}
+          tabindex="0"
+        ></ha-icon-button>
+      </div>
       <ha-form
         .hass=${this.hass}
         .schema=${this._schema(
@@ -129,6 +147,15 @@ export class HaLocationSelector extends LitElement {
     }
   );
 
+  private _snapToView() {
+    const center = this.map?.getCenter();
+    if (center) {
+      fireEvent(this, "value-changed", {
+        value: { ...this.value, latitude: center.lat, longitude: center.lng },
+      });
+    }
+  }
+
   private _locationChanged(ev: CustomEvent) {
     const [latitude, longitude] = ev.detail.location;
     fireEvent(this, "value-changed", {
@@ -177,6 +204,15 @@ export class HaLocationSelector extends LitElement {
       height: 400px;
       margin-bottom: 16px;
     }
+    #mapContainer {
+      position: relative;
+    }
+    ha-icon-button {
+      position: absolute;
+      top: 75px;
+      left: 3px;
+      outline: none;
+    }
     p {
       margin-top: 0;
     }

diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts
@@ -97,6 +97,10 @@ export class HaLocationsEditor extends LitElement {
     this.map.fitBounds(boundingbox, options);
   }
 
+  public getCenter(): { lat: number; lng: number } | undefined {
+    return this.map?.leafletMap?.getCenter();
+  }
+
   public async fitMarker(
     id: string,
     options?: { zoom?: number }

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -392,7 +392,8 @@
         "location": {
           "latitude": "[%key:ui::panel::config::zone::detail::latitude%]",
           "longitude": "[%key:ui::panel::config::zone::detail::longitude%]",
-          "radius": "[%key:ui::panel::config::zone::detail::radius%]"
+          "radius": "[%key:ui::panel::config::zone::detail::radius%]",
+          "snap_to_view": "Snap location from current view"
         },
         "selector": {
           "options": "Selector Options",