Various leaflet map bugfixes (#19475)

* Various leaflet map bugfixes

* move pan to updated

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:

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();

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();
   }

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 ||