Add default_zoom option to map card. (#1592)

gallery/src/demos/demo-hui-map-card.js

@@ -1,8 +1,36 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
+import getEntity from '../data/entity.js';
+import provideHass from '../data/provide_hass.js';
 import '../components/demo-cards.js';
 
+const ENTITIES = [
+  getEntity('device_tracker', 'demo_paulus', 'not_home', {
+    source_type: 'gps',
+    latitude: 32.877105,
+    longitude: 117.232185,
+    gps_accuracy: 91,
+    battery: 71,
+    friendly_name: 'Paulus'
+  }),
+  getEntity('device_tracker', 'demo_home_boy', 'home', {
+    source_type: 'gps',
+    latitude: 32.87334,
+    longitude: 117.22745,
+    gps_accuracy: 20,
+    battery: 53,
+    friendly_name: 'Home Boy'
+  }),
+  getEntity('zone', 'home', 'zoning', {
+    latitude: 32.87354,
+    longitude: 117.22765,
+    radius: 100,
+    friendly_name: 'Home',
+    icon: 'mdi:home'
+  })
+];
+
 const CONFIGS = [
   {
     heading: 'Without title',
@@ -10,6 +38,7 @@ const CONFIGS = [
 - type: map
   entities:
     - entity: device_tracker.demo_paulus
+    - device_tracker.demo_home_boy
     - zone.home
     `
   },
@@ -33,12 +62,70 @@ const CONFIGS = [
   aspect_ratio: 50%
     `
   },
+  {
+    heading: 'Default Zoom',
+    config: `
+- type: map
+  default_zoom: 12
+  entities:
+    - entity: device_tracker.demo_paulus
+    - zone.home
+    `
+  },
+  {
+    heading: 'Default Zoom too High',
+    config: `
+- type: map
+  default_zoom: 20
+  entities:
+    - entity: device_tracker.demo_paulus
+    - zone.home
+    `
+  },
+  {
+    heading: 'Single Marker',
+    config: `
+- type: map
+  entities:
+    - device_tracker.demo_paulus
+    `
+  },
+  {
+    heading: 'Single Marker Default Zoom',
+    config: `
+- type: map
+  default_zoom: 8
+  entities:
+    - device_tracker.demo_paulus
+    `
+  },
+  {
+    heading: 'No Entities',
+    config: `
+- type: map
+  entities:
+    - light.bed_light
+    `
+  },
+  {
+    heading: 'No Entities, Default Zoom',
+    config: `
+- type: map
+  default_zoom: 8
+  entities:
+    - light.bed_light
+    `
+  },
 ];
 
 class DemoMap extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards configs="[[_configs]]"></demo-cards>
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
     `;
   }
 
@@ -47,9 +134,16 @@ class DemoMap extends PolymerElement {
       _configs: {
         type: Object,
         value: CONFIGS
-      }
+      },
+      hass: Object
     };
   }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
 }
 
 customElements.define('demo-hui-map-card', DemoMap);

src/panels/lovelace/cards/hui-map-card.js

@@ -159,14 +159,20 @@ class HuiMapCard extends PolymerElement {
   }
 
   _fitMap() {
+    const zoom = this._config.default_zoom;
     if (this._mapItems.length === 0) {
       this._map.setView(
         new Leaflet.LatLng(this.hass.config.core.latitude, this.hass.config.core.longitude),
-        14
+        zoom || 14
       );
-    } else {
-      const bounds = new Leaflet.latLngBounds(this._mapItems.map(item => item.getLatLng()));
-      this._map.fitBounds(bounds.pad(0.5));
+      return;
+    }
+
+    const bounds = new Leaflet.latLngBounds(this._mapItems.map(item => item.getLatLng()));
+    this._map.fitBounds(bounds.pad(0.5));
+
+    if (zoom && this._map.getZoom() > zoom) {
+      this._map.setZoom(zoom);
     }
   }