frontend/panels/map/ha-panel-map.html

<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>

<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">

<link rel="import" href="../../bower_components/leaflet-map/leaflet-map.html">

<!-- temp work around -->
<link rel="stylesheet" href="../../bower_components/leaflet/dist/leaflet.css" />

<link rel="import" href="../../src/components/ha-menu-button.html">
<link rel="import" href="../../src/util/hass-behavior.html">

<link rel="import" href="./ha-entity-marker.html">

<style>
  /* Otherwise they go through overlays. */
  .leaflet-top, .leaflet-bottom {
    z-index: 0;
  }
</style>

<dom-module id="ha-panel-map">
  <template>
    <style include="ha-style">
      leaflet-map {
        height: calc(100% - 64px);
        width: 100%;
      }
    </style>

    <app-toolbar>
      <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
      <div main-title>Map</div>
    </app-toolbar>

    <leaflet-map fit-to-markers id="map" max-zoom="17">
      <leaflet-tilelayer max-zoom="18"
        url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png">
        &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://cartodb.com/attributions">CartoDB</a>
      </leaflet-tilelayer>

      <template is='dom-repeat' items='[[zoneEntities]]'>
        <leaflet-divicon id="[[item.entityId]]" icon-width="24" icon-height="24">
          <template is='dom-if' if='[[item.attributes.icon]]'>
            <iron-icon icon$='[[item.attributes.icon]]'></iron-icon>
          </template>
          <template is='dom-if' if='[[!item.attributes.icon]]'>[[item.entityDisplay]]</template>
        </leaflet-divicon>

        <leaflet-marker latitude="[[item.attributes.latitude]]" icon="[[item.entityId]]"
          longitude="[[item.attributes.longitude]]" title="[[item.entityDisplay]]"
          no-clickable></leaflet-marker>

        <leaflet-circle latitude="[[item.attributes.latitude]]"
          longitude="[[item.attributes.longitude]]" no-clickable
          radius="[[item.attributes.radius]]" fill color="#FF9800">
        </leaflet-circle>
      </template>

      <template is='dom-repeat' items='[[locationEntities]]'>
        <leaflet-divicon id="[[item.entityId]]" icon-height="45" icon-width="45">
          <ha-entity-marker hass='[[hass]]'
            entity-id="[[item.entityId]]"></ha-entity-marker>
        </leaflet-divicon>

        <leaflet-marker latitude="[[item.attributes.latitude]]" icon="[[item.entityId]]"
          longitude="[[item.attributes.longitude]]" title="[[item.entityDisplay]]"
          ></leaflet-marker>

        <template is='dom-if' if='[[item.attributes.gps_accuracy]]'>
          <leaflet-circle latitude="[[item.attributes.latitude]]"
            longitude="[[item.attributes.longitude]]" no-clickable
            radius="[[item.attributes.gps_accuracy]]" fill color="#0288D1">
          </leaflet-circle>
        </template>
      </template>
    </leaflet-map>
  </template>
</dom-module>

<script>
window.L.Icon.Default.imagePath = '/static/images/leaflet';

Polymer({
  is: 'ha-panel-map',

  behaviors: [window.hassBehavior],

  properties: {
    hass: {
      type: Object,
    },

    locationGPS: {
      type: Number,
      bindNuclear: function (hass) {
        return hass.configGetters.locationGPS;
      },
    },

    locationName: {
      type: String,
      bindNuclear: function (hass) {
        return hass.configGetters.locationName;
      },
    },

    locationEntities: {
      type: Array,
      bindNuclear: function (hass) {
        return [
          hass.entityGetters.visibleEntityMap,
          function (entities) {
            return entities.valueSeq().filter(
              function (entity) {
                return entity.attributes.latitude && entity.state !== 'home';
              }
            ).toArray();
          },
        ];
      },
    },

    zoneEntities: {
      type: Array,
      bindNuclear: function (hass) {
        return [
          hass.entityGetters.entityMap,
          function (entities) {
            return entities.valueSeq()
              .filter(function (entity) {
                return entity.domain === 'zone' && !entity.attributes.passive;
              }).toArray();
          },
        ];
      },
    },

    narrow: {
      type: Boolean,
    },

    showMenu: {
      type: Boolean,
      value: false,
    },
  },

  attached: function () {
    // On Safari, iPhone 5, 5s and some 6 I have observed that the user would be
    // unable to pan on initial load. This fixes it.
    if (window.L.Browser.mobileWebkit || window.L.Browser.webkit) {
      this.async(function () {
        var map = this.$.map;
        var prev = map.style.display;
        map.style.display = 'none';
        this.async(function () { map.style.display = prev; }, 1);
      }.bind(this), 1);
    }
  },

  computeMenuButtonClass: function (narrow, showMenu) {
    return !narrow && showMenu ? 'menu-icon invisible' : 'menu-icon';
  },

  toggleMenu: function () {
    this.fire('open-menu');
  },
});
</script>