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">

<script src="../../bower_components/leaflet/dist/leaflet.js"></script>
<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">

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

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

    <div id='map'></div>
  </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.entityMap,
          function (entities) {
            return entities.valueSeq().filter(
              function (entity) {
                return 'latitude' in entity.attributes;
              }
            );
          },
        ];
      },
      observer: 'drawEntities',
    },

    narrow: {
      type: Boolean,
    },

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

  attached: function () {
    var map = this._map = window.L.map(this.$.map);
    map.setView([51.505, -0.09], 13);
    window.L.tileLayer(
      '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>',
        maxZoom: 18,
      }
    ).addTo(map);

    this.drawEntities(this.locationEntities);

    this.async(function () {
      map.invalidateSize();
      this.fitMap();
    }.bind(this), 1);
  },

  fitMap: function () {
    var bounds;

    if (this._mapItems.length === 0) {
      bounds = new window.L.latLngBounds(
        [window.L.latLng(this.locationGPS.latitude, this.locationGPS.longitude)]);
    } else {
      bounds = new window.L.latLngBounds(
        this._mapItems.map(function (item) { return item.getLatLng(); }));
    }

    this._map.fitBounds(bounds.pad(0.5));
  },

  drawEntities: function (entities) {
    /* eslint-disable vars-on-top */
    var map = this._map;
    if (!map) return;

    if (this._mapItems) {
      this._mapItems.forEach(function (marker) { marker.remove(); });
    }
    var mapItems = this._mapItems = [];

    entities.forEach(function (entity) {
      var icon;

      if (entity.domain === 'zone') {
        // DRAW ZONE
        if (entity.attributes.passive) return;

        // create icon
        var iconHTML = '';
        if (entity.attributes.icon) {
          iconHTML = (
            "<iron-icon icon='" + entity.attributes.icon + "'></iron-icon>");
        } else {
          iconHTML = entity.entityDisplay;
        }

        icon = window.L.divIcon({
          html: iconHTML,
          iconSize: [24, 24],
          className: '',
        });

        // create market with the icon
        mapItems.push(window.L.marker(
          [entity.attributes.latitude, entity.attributes.longitude],
          {
            icon,
            interactive: false,
            title: entity.entityDisplay,
          }
        ).addTo(map));

        // create circle around it
        mapItems.push(window.L.circle(
          [entity.attributes.latitude, entity.attributes.longitude],
          {
            interactive: false,
            color: '#FF9800',
            radius: entity.attributes.radius,
          }
        ).addTo(map));

        return;
      }

      // Filter out entities at home
      if (entity.state === 'home' || entity.attributes.hidden) return;

      // DRAW ENTITY
      // create icon
      icon = window.L.divIcon({
        html: "<ha-entity-marker entity-id='" + entity.entityId + "'></ha-entity-marker>",
        iconSize: [45, 45],
        className: '',
      });

      // create market with the icon
      mapItems.push(window.L.marker(
        [entity.attributes.latitude, entity.attributes.longitude],
        {
          icon,
          title: entity.entityDisplay,
        }
      ).addTo(map));

      // create circle around if entity has accuracy
      if (entity.attributes.gps_accuracy) {
        mapItems.push(window.L.circle(
          [entity.attributes.latitude, entity.attributes.longitude],
          {
            interactive: false,
            color: '#0288D1',
            radius: entity.attributes.gps_accuracy,
          }
        ).addTo(map));
      }
    });
  },

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

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