diff --git a/gallery/src/demos/demo-hui-map-card.js b/gallery/src/demos/demo-hui-map-card.js
index 35efd0ae51..ee3050e0d5 100644
--- a/gallery/src/demos/demo-hui-map-card.js
+++ b/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`
-
+
`;
}
@@ -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);
diff --git a/src/panels/lovelace/cards/hui-map-card.js b/src/panels/lovelace/cards/hui-map-card.js
index a3c95e3b13..64aa8786f5 100644
--- a/src/panels/lovelace/cards/hui-map-card.js
+++ b/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);
}
}