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); } }