From a6b98fc3c3be15b136eca9ea3d957462fcce7857 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Mon, 15 Nov 2021 23:11:42 +0100
Subject: [PATCH] Add markers-updated to ha-locations-editor (#10601)

---
 src/components/map/ha-locations-editor.ts |  2 ++
 src/onboarding/onboarding-core-config.ts  | 21 ++++++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts
index 930e8efd3b..d21a7185ac 100644
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@@ -26,6 +26,7 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "location-updated": { id: string; location: [number, number] };
+    "markers-updated": undefined;
     "radius-updated": { id: string; radius: number };
     "marker-clicked": { id: string };
   }
@@ -281,6 +282,7 @@ export class HaLocationsEditor extends LitElement {
     });
     this._circles = circles;
     this._locationMarkers = locationMarkers;
+    fireEvent(this, "markers-updated");
   }
 
   static get styles(): CSSResultGroup {
diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts
index d0f61cfbbc..b18f14653f 100644
--- a/src/onboarding/onboarding-core-config.ts
+++ b/src/onboarding/onboarding-core-config.ts
@@ -2,13 +2,16 @@ import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { createCurrencyListEl } from "../components/currency-datalist";
 import "../components/map/ha-locations-editor";
-import type { MarkerLocation } from "../components/map/ha-locations-editor";
+import type {
+  HaLocationsEditor,
+  MarkerLocation,
+} from "../components/map/ha-locations-editor";
 import { createTimezoneListEl } from "../components/timezone-datalist";
 import {
   ConfigUpdateValues,
@@ -25,6 +28,7 @@ import type { HaRadio } from "../components/ha-radio";
 
 const amsterdam: [number, number] = [52.3731339, 4.8903147];
 const mql = matchMedia("(prefers-color-scheme: dark)");
+const locationMarkerId = "location";
 
 @customElement("onboarding-core-config")
 class OnboardingCoreConfig extends LitElement {
@@ -46,6 +50,8 @@ class OnboardingCoreConfig extends LitElement {
 
   @state() private _timeZone?: string;
 
+  @query("ha-locations-editor", true) private map!: HaLocationsEditor;
+
   protected render(): TemplateResult {
     return html`
       <p>
@@ -268,7 +274,7 @@ class OnboardingCoreConfig extends LitElement {
   private _markerLocation = memoizeOne(
     (location: [number, number]): MarkerLocation[] => [
       {
-        id: "location",
+        id: locationMarkerId,
         latitude: location[0],
         longitude: location[1],
         location_editable: true,
@@ -304,6 +310,15 @@ class OnboardingCoreConfig extends LitElement {
       const values = await detectCoreConfig(this.hass);
 
       if (values.latitude && values.longitude) {
+        this.map.addEventListener(
+          "markers-updated",
+          () => {
+            this.map.fitMarker(locationMarkerId);
+          },
+          {
+            once: true,
+          }
+        );
         this._location = [Number(values.latitude), Number(values.longitude)];
       }
       if (values.elevation) {