From 545d140dcfdf98bcaafec6af348b21169a6ea068 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Mon, 22 Jan 2024 09:12:25 -0800
Subject: [PATCH] Various leaflet map bugfixes (#19475)

* Various leaflet map bugfixes

* move pan to updated
---
 .../ha-selector/ha-selector-location.ts       | 10 +++++--
 src/components/map/ha-locations-editor.ts     | 30 +++++++++++++++++++
 src/onboarding/onboarding-location.ts         |  6 ++--
 src/panels/config/zone/dialog-zone-detail.ts  |  6 ++--
 4 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/components/ha-selector/ha-selector-location.ts b/src/components/ha-selector/ha-selector-location.ts
index a2ae29dd98..96d9d66298 100644
--- a/src/components/ha-selector/ha-selector-location.ts
+++ b/src/components/ha-selector/ha-selector-location.ts
@@ -51,8 +51,14 @@ export class HaLocationSelector extends LitElement {
       return [
         {
           id: "location",
-          latitude: value?.latitude || this.hass.config.latitude,
-          longitude: value?.longitude || this.hass.config.longitude,
+          latitude:
+            !value || isNaN(value.latitude)
+              ? this.hass.config.latitude
+              : value.latitude,
+          longitude:
+            !value || isNaN(value.longitude)
+              ? this.hass.config.longitude
+              : value.longitude,
           radius: selector.location?.radius ? value?.radius || 1000 : undefined,
           radius_color: zoneRadiusColor,
           icon:
diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts
index fc81e9f686..10702cbf55 100644
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@@ -168,6 +168,36 @@ export class HaLocationsEditor extends LitElement {
     }
   }
 
+  public updated(changedProps: PropertyValues): void {
+    // Still loading.
+    if (!this.Leaflet) {
+      return;
+    }
+
+    if (changedProps.has("locations")) {
+      const oldLocations = changedProps.get("locations");
+      const movedLocations = this.locations?.filter(
+        (loc, idx) =>
+          !oldLocations[idx] ||
+          ((loc.latitude !== oldLocations[idx].latitude ||
+            loc.longitude !== oldLocations[idx].longitude) &&
+            this.map.leafletMap?.getBounds().contains({
+              lat: oldLocations[idx].latitude,
+              lng: oldLocations[idx].longitude,
+            }) &&
+            !this.map.leafletMap
+              ?.getBounds()
+              .contains({ lat: loc.latitude, lng: loc.longitude }))
+      );
+      if (movedLocations?.length === 1) {
+        this.map.leafletMap?.panTo({
+          lat: movedLocations[0].latitude,
+          lng: movedLocations[0].longitude,
+        });
+      }
+    }
+  }
+
   private _updateLocation(ev: DragEndEvent) {
     const marker = ev.target;
     const latlng: LatLng = marker.getLatLng();
diff --git a/src/onboarding/onboarding-location.ts b/src/onboarding/onboarding-location.ts
index e452e8a7ad..1d031b81f3 100644
--- a/src/onboarding/onboarding-location.ts
+++ b/src/onboarding/onboarding-location.ts
@@ -295,8 +295,10 @@ class OnboardingLocation extends LitElement {
     if (ev.detail.id === LOCATION_MARKER_ID) {
       return;
     }
-    this._highlightedMarker = ev.detail.id;
-    const place = this._places!.find((plc) => plc.place_id === ev.detail.id)!;
+    this._highlightedMarker = Number(ev.detail.id);
+    const place = this._places!.find(
+      (plc) => plc.place_id === Number(ev.detail.id)
+    )!;
     this._location = [Number(place.lat), Number(place.lon)];
     this._country = place.address.country_code.toUpperCase();
   }
diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts
index 4b655ea3d1..37432c6b8f 100644
--- a/src/panels/config/zone/dialog-zone-detail.ts
+++ b/src/panels/config/zone/dialog-zone-detail.ts
@@ -152,13 +152,13 @@ class DialogZoneDetail extends LitElement {
             {
               name: "latitude",
               required: true,
-              selector: { text: {} },
+              selector: { number: {} },
             },
             {
               name: "longitude",
               required: true,
 
-              selector: { text: {} },
+              selector: { number: {} },
             },
           ],
         },
@@ -183,7 +183,7 @@ class DialogZoneDetail extends LitElement {
 
   private _valueChanged(ev: CustomEvent) {
     this._error = undefined;
-    const value = ev.detail.value;
+    const value = { ...ev.detail.value };
     if (
       value.location.latitude !== this._data!.latitude ||
       value.location.longitude !== this._data!.longitude ||