jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-15 05:16:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix map panel (#1178)

Browse Source
This commit is contained in:
Paulus Schoutsen 2018-05-15 18:00:07 -04:00 committed by GitHub
parent 96d7ec7cda
commit 89cb8c87ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
panels/map/ha-panel-map.js
View File

@ -2,12 +2,13 @@ import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/iron-icon/iron-icon.js'; import '@polymer/iron-icon/iron-icon.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import Leaflet from 'leaflet';
import '../../src/components/ha-menu-button.js'; import '../../src/components/ha-menu-button.js';
import '../../src/util/hass-mixins.js'; import '../../src/util/hass-mixins.js';
import './ha-entity-marker.js'; import './ha-entity-marker.js';
window.L.Icon.Default.imagePath = '/static/images/leaflet'; Leaflet.Icon.Default.imagePath = '/static/images/leaflet';
/* /*
* @appliesMixin window.hassMixins.LocalizeMixin * @appliesMixin window.hassMixins.LocalizeMixin
@ -53,7 +54,7 @@ class HaPanelMap extends window.hassMixins.LocalizeMixin(PolymerElement) {
connectedCallback() { connectedCallback() {
super.connectedCallback(); super.connectedCallback();
var map = this._map = window.L.map(this.$.map); var map = this._map = Leaflet.map(this.$.map);
var style = document.createElement('link'); var style = document.createElement('link');
style.setAttribute('href', window.HASS_DEV ? style.setAttribute('href', window.HASS_DEV ?
'/home-assistant-polymer/bower_components/leaflet/dist/leaflet.css' : '/home-assistant-polymer/bower_components/leaflet/dist/leaflet.css' :
@ -61,7 +62,7 @@ class HaPanelMap extends window.hassMixins.LocalizeMixin(PolymerElement) {
style.setAttribute('rel', 'stylesheet'); style.setAttribute('rel', 'stylesheet');
this.$.map.parentNode.appendChild(style); this.$.map.parentNode.appendChild(style);
map.setView([51.505, -0.09], 13); map.setView([51.505, -0.09], 13);
window.L.tileLayer( Leaflet.tileLayer(
'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png',
{ {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>', attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
@ -82,11 +83,11 @@ class HaPanelMap extends window.hassMixins.LocalizeMixin(PolymerElement) {
if (this._mapItems.length === 0) { if (this._mapItems.length === 0) {
this._map.setView( this._map.setView(
new window.L.LatLng(this.hass.config.core.latitude, this.hass.config.core.longitude), new Leaflet.LatLng(this.hass.config.core.latitude, this.hass.config.core.longitude),
14 14
); );
} else { } else {
bounds = new window.L.latLngBounds(this._mapItems.map(item => item.getLatLng())); bounds = new Leaflet.latLngBounds(this._mapItems.map(item => item.getLatLng()));
this._map.fitBounds(bounds.pad(0.5)); this._map.fitBounds(bounds.pad(0.5));
} }
} }
@ -128,14 +129,14 @@ class HaPanelMap extends window.hassMixins.LocalizeMixin(PolymerElement) {
iconHTML = title; iconHTML = title;
} }
icon = window.L.divIcon({ icon = Leaflet.divIcon({
html: iconHTML, html: iconHTML,
iconSize: [24, 24], iconSize: [24, 24],
className: '', className: '',
}); });
// create market with the icon // create market with the icon
mapItems.push(window.L.marker( mapItems.push(Leaflet.marker(
[entity.attributes.latitude, entity.attributes.longitude], [entity.attributes.latitude, entity.attributes.longitude],
{ {
icon: icon, icon: icon,
@ -145,7 +146,7 @@ class HaPanelMap extends window.hassMixins.LocalizeMixin(PolymerElement) {
).addTo(map)); ).addTo(map));
// create circle around it // create circle around it
mapItems.push(window.L.circle( mapItems.push(Leaflet.circle(
[entity.attributes.latitude, entity.attributes.longitude], [entity.attributes.latitude, entity.attributes.longitude],
{ {
interactive: false, interactive: false,
@ -163,14 +164,14 @@ class HaPanelMap extends window.hassMixins.LocalizeMixin(PolymerElement) {
var entityName = title.split(' ').map(function (part) { return part.substr(0, 1); }).join(''); var entityName = title.split(' ').map(function (part) { return part.substr(0, 1); }).join('');
/* Leaflet clones this element before adding it to the map. This messes up /* Leaflet clones this element before adding it to the map. This messes up
our Polymer object and we can't pass data through. Thus we hack like this. */ our Polymer object and we can't pass data through. Thus we hack like this. */
icon = window.L.divIcon({ icon = Leaflet.divIcon({
html: "<ha-entity-marker entity-id='" + entity.entity_id + "' entity-name='" + entityName + "' entity-picture='" + entityPicture + "'></ha-entity-marker>", html: "<ha-entity-marker entity-id='" + entity.entity_id + "' entity-name='" + entityName + "' entity-picture='" + entityPicture + "'></ha-entity-marker>",
iconSize: [45, 45], iconSize: [45, 45],
className: '', className: '',
}); });
// create market with the icon // create market with the icon
mapItems.push(window.L.marker( mapItems.push(Leaflet.marker(
[entity.attributes.latitude, entity.attributes.longitude], [entity.attributes.latitude, entity.attributes.longitude],
{ {
icon: icon, icon: icon,
@ -180,7 +181,7 @@ class HaPanelMap extends window.hassMixins.LocalizeMixin(PolymerElement) {
// create circle around if entity has accuracy // create circle around if entity has accuracy
if (entity.attributes.gps_accuracy) { if (entity.attributes.gps_accuracy) {
mapItems.push(window.L.circle( mapItems.push(Leaflet.circle(
[entity.attributes.latitude, entity.attributes.longitude], [entity.attributes.latitude, entity.attributes.longitude],
{ {
interactive: false, interactive: false,