Add satellite imagery to the zone editor and allow home zone to be edited as polygon

[cjramseyer]

I live in Michigan, but my home/property is not round. It is 350 feet long by over 100 feet wide.
Can you enable editing the home zone in the UI.
Can you also add satellite images to the editor to help with zone placement?

Please also add, a count as home radius. Since the home zone has no radius associated with it, all a distance of some value to count as home. For example, if I go to my neighbor across the street, I have technically "left" home, but I may not want my left home automations to run. Having this as a value in the UI for Home Assistant to count a user as "home" would be very beneficial along with the features requested above.

[KTibow]

As for:

Please also add, a count as home radius. Since the home zone has no radius associated with it, all a distance of some value to count as home. For example, if I go to my neighbor across the street, I have technically "left" home, but I may not want my left home automations to run. Having this as a value in the UI for Home Assistant to count a user as "home" would be very beneficial along with the features requested above.

You can always configure via yaml: https://www.home-assistant.io/integrations/zone/

[Krispkiwi]

It would be so good to get polygons or being able to combine circles into a zone.

[StephenBrown2]

I too would like more details on the map than the current CARTO maps include. I found that the ESRI Topo map does just that, and looks very similar to the current Voyager style, but contains better building data for my area. It's not universally more detailed though, so the ability to switch between the two is probably the best option.

The following is a diff of the changes needed to enable such in src/common/dom/setup-leaflet-map.ts, but I'm not sure it'll be accepted as a PR:

diff --git a/src/common/dom/setup-leaflet-map.ts b/src/common/dom/setup-leaflet-map.ts
index d7881c7a9..c981c3d05 100644
--- a/src/common/dom/setup-leaflet-map.ts
+++ b/src/common/dom/setup-leaflet-map.ts
@@ -18,7 +18,12 @@ export const setupLeafletMap = async (
 
   await import("leaflet.markercluster");
 
-  const map = Leaflet.map(mapElement);
+  const tileLayer = createBaseTileLayer(Leaflet);
+  const topoLayer = createTopoTileLayer(Leaflet);
+
+  const map = Leaflet.map(mapElement, {
+    layers: [tileLayer]
+  });
   const style = document.createElement("link");
   style.setAttribute("href", "/static/images/leaflet/leaflet.css");
   style.setAttribute("rel", "stylesheet");
@@ -34,7 +39,12 @@ export const setupLeafletMap = async (
 
   map.setView([52.3731339, 4.8903147], 13);
 
-  const tileLayer = createTileLayer(Leaflet).addTo(map);
+  const baseMaps = {
+    "Streets": tileLayer,
+    "Topo": topoLayer
+  };
+
+  Leaflet.control.layers(baseMaps).addTo(map);
 
   return [map, Leaflet, tileLayer];
 };
@@ -45,12 +55,12 @@ export const replaceTileLayer = (
   tileLayer: TileLayer
 ): TileLayer => {
   map.removeLayer(tileLayer);
-  tileLayer = createTileLayer(leaflet);
+  tileLayer = createBaseTileLayer(leaflet);
   tileLayer.addTo(map);
   return tileLayer;
 };
 
-const createTileLayer = (leaflet: LeafletModuleType): TileLayer =>
+const createBaseTileLayer = (leaflet: LeafletModuleType): TileLayer =>
   leaflet.tileLayer(
     `https://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}${
       leaflet.Browser.retina ? "@2x.png" : ".png"
@@ -63,3 +73,12 @@ const createTileLayer = (leaflet: LeafletModuleType): TileLayer =>
       maxZoom: 20,
     }
   );
+
+const createTopoTileLayer = (leaflet: LeafletModuleType): TileLayer =>
+  leaflet.tileLayer(
+    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', {
+    attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community',
+    minZoom: 0,
+    maxZoom: 19,
+  }
+);
\ No newline at end of file