Add zones config UI

package.json

@@ -87,6 +87,7 @@
     "intl-messageformat": "^2.2.0",
     "js-yaml": "^3.13.1",
     "leaflet": "^1.4.0",
+    "leaflet-draw": "^1.0.4",
     "lit-element": "^2.2.1",
     "lit-html": "^1.1.0",
     "lit-virtualizer": "^0.4.2",
@@ -123,6 +124,7 @@
     "@types/hls.js": "^0.12.3",
     "@types/js-yaml": "^3.12.1",
     "@types/leaflet": "^1.4.3",
+    "@types/leaflet-draw": "^1.0.1",
     "@types/memoize-one": "4.1.0",
     "@types/mocha": "^5.2.6",
     "@types/webspeechapi": "^0.0.29",

src/common/dom/setup-leaflet-map.ts

@@ -2,10 +2,12 @@ import { Map } from "leaflet";
 
 // Sets up a Leaflet map on the provided DOM element
 export type LeafletModuleType = typeof import("leaflet");
+export type LeafletDrawModuleType = typeof import("leaflet-draw");
 
 export const setupLeafletMap = async (
   mapElement: HTMLElement,
-  darkMode = false
+  darkMode = false,
+  draw = false
 ): Promise<[Map, LeafletModuleType]> => {
   if (!mapElement.parentNode) {
     throw new Error("Cannot setup Leaflet map on disconnected element");
@@ -16,6 +18,10 @@ export const setupLeafletMap = async (
   )) as LeafletModuleType;
   Leaflet.Icon.Default.imagePath = "/static/images/leaflet/images/";
 
+  if (draw) {
+    await import(/* webpackChunkName: "leaflet-draw" */ "leaflet-draw");
+  }
+
   const map = Leaflet.map(mapElement);
   const style = document.createElement("link");
   style.setAttribute("href", "/static/images/leaflet/leaflet.css");

src/components/map/ha-location-editor.ts

@@ -8,7 +8,14 @@ import {
   customElement,
   PropertyValues,
 } from "lit-element";
-import { Marker, Map, LeafletMouseEvent, DragEndEvent, LatLng } from "leaflet";
+import {
+  Marker,
+  Map,
+  LeafletMouseEvent,
+  DragEndEvent,
+  LatLng,
+  Circle,
+} from "leaflet";
 import {
   setupLeafletMap,
   LeafletModuleType,
@@ -18,6 +25,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 @customElement("ha-location-editor")
 class LocationEditor extends LitElement {
   @property() public location?: [number, number];
+  @property() public radius?: number;
   public fitZoom = 16;
 
   private _ignoreFitToMap?: [number, number];
@@ -26,6 +34,7 @@ class LocationEditor extends LitElement {
   private Leaflet?: LeafletModuleType;
   private _leafletMap?: Map;
   private _locationMarker?: Marker;
+  private _locationRadius?: Circle;
 
   public fitMap(): void {
     if (!this._leafletMap || !this.location) {
@@ -53,11 +62,17 @@ class LocationEditor extends LitElement {
       return;
     }
 
-    this._updateMarker();
-    if (!this._ignoreFitToMap || this._ignoreFitToMap !== this.location) {
-      this.fitMap();
+    if (changedProps.has("location")) {
+      this._updateMarker();
+      this._updateRadius();
+      if (!this._ignoreFitToMap || this._ignoreFitToMap !== this.location) {
+        this.fitMap();
+      }
+      this._ignoreFitToMap = undefined;
+    }
+    if (changedProps.has("radius")) {
+      this._updateRadius();
     }
-    this._ignoreFitToMap = undefined;
   }
 
   private get _mapEl(): HTMLDivElement {
@@ -72,6 +87,7 @@ class LocationEditor extends LitElement {
       (ev: LeafletMouseEvent) => this._updateLocation(ev.latlng)
     );
     this._updateMarker();
+    this._updateRadius();
     this.fitMap();
     this._leafletMap.invalidateSize();
   }
@@ -99,6 +115,7 @@ class LocationEditor extends LitElement {
       this._locationMarker.setLatLng(this.location);
       return;
     }
+
     this._locationMarker = this.Leaflet!.marker(this.location, {
       draggable: true,
     });
@@ -110,6 +127,27 @@ class LocationEditor extends LitElement {
     this._leafletMap!.addLayer(this._locationMarker);
   }
 
+  private _updateRadius(): void {
+    if (!this.radius || !this.location) {
+      if (this._locationRadius) {
+        this._locationRadius.remove();
+        this._locationRadius = undefined;
+      }
+      return;
+    }
+
+    if (this._locationRadius) {
+      this._locationRadius.setLatLng(this.location);
+      this._locationRadius.setRadius(this.radius);
+      return;
+    }
+
+    this._locationRadius = this.Leaflet!.circle(this.location, {
+      color: "#FF9800",
+      radius: this.radius,
+    }).addTo(this._leafletMap!);
+  }
+
   static get styles(): CSSResult {
     return css`
       :host {