google-map-defaulticon.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="google-map-markercluster-icon-behavior.html">

<dom-module id="google-map-defaulticon">
  <template>
    <style>
        :host {
          position:absolute;
          user-select: none;
        }
        .icon  {
          position:absolute;
          left:0;
          top:0;
        }
        .text {
          position:absolute;
          text-align:center;
          font-family: Arial,sans-serif;
          font-weight: bold;
          font-style: normal;
          text-decoration: none;
        }
      </style>
    <img class="icon" id="icon" src$="{{_iconStyle.url}}"></img>
    <div class="text" id="text">{{_computeText(markers)}}</div>
  </template>
</dom-module>
<script>
  /* global Markerclusterer */
  (function() {
    var BASE_IMAGE_URL = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/';
    var DEFAULT_STYLES = [
      {
        url: BASE_IMAGE_URL + 'm1.png',
        width: '53px',
        height: '52px',
        textColor: 'black',
        textSize: '11px'
      },
      {
        url: BASE_IMAGE_URL + 'm2.png',
        width: '56px',
        height: '56px',
        textColor: 'black',
        textSize: '11px'
      },
      {
        url: BASE_IMAGE_URL + 'm3.png',
        width: '66px',
        height: '66px',
        textColor: 'black',
        textSize: '12px'
      },
      {
        url: BASE_IMAGE_URL + 'm4.png',
        width: '78px',
        height: '78px',
        textColor: 'black',
        textSize: '13px'
      },
      {
        url: BASE_IMAGE_URL +'m5.png',
        width: '90px',
        height: '90px',
        textColor: 'black',
        textSize: '14px'
      }
    ];
    /*
     * The `google-map-defaulticon` element is displayed by default when the user does not provide a custom cluster icon.
     * @customElement
     * @polymer
     */
    class GoogleMapDefaultIcon extends ClusterIconBehavior(Polymer.Element) {
      static get is() { return 'google-map-defaulticon'; }

      static get properties() {
        return {
          /**
           * The list of styles that should be applied to the cluster icon for the various
           * cluster levels. If not set, the default styles will be used.
           * Must be of object with following keys `{url,width,height,textColor,textSize}`
           */
          styles :  {
            type:Array,
            value: function() {return DEFAULT_STYLES;}
          },
          /**
           * The active style for the current cluster level
           */
          _iconStyle : {
            type: Object,
            value: function() {return {};}
          }
        }
      }

      static get observers() {
        return [
          '_updateCustom(markers,styles)'
        ]
      }

      /**
       * Calculates the index of the active style that should be displayed for the current cluster.
       */
      _calcActiveStyleIndex(markerLength,numStyles) {
        var index = 0;
        var dv = markerLength;
        while (dv !== 0) {
          dv = parseInt(dv / 10, 10);
          index++;
        }
        return Math.max(0, Math.min(index, numStyles) - 1);
      }

      /**
       * Returns the text that should be displayed
       */
      _computeText(markers) {
        return markers.length;
      }

      /**
       * Observer function that is called when either the `markers` or `styles` is changed.
       */
      _updateCustom(markers,styles) {
          styles = styles || DEFAULT_STYLES;
          // check also cluster.markers because remove on cluster will also delete the markers field
          if (!markers || !styles ) {
            return;
          }
          this._iconStyle = styles[this._calcActiveStyleIndex(markers.length,styles.length)];
          var iconOffset = this._iconStyle.anchorIcon ||  [parseInt(this._iconStyle.height)/2+'px',parseInt(this._iconStyle.width)/2+'px'];
          var textOffset = this._iconStyle.anchorText || ['0px','0px'];
          this.$.text.style.left = textOffset[1];
          this.$.text.style.top = textOffset[0];
          this.$.text.style.width = this._iconStyle.width;
          this.$.text.style.height = this._iconStyle.height;
          this.$.text.style.lineHeight = this._iconStyle.height;
          this.$.text.style.color = this._iconStyle.textColor;
          this.$.text.style.fontSize = this._iconStyle.textSize;
          this.style.left = '-'+iconOffset[1];
          this.style.top = '-'+iconOffset[0];
          this.$.text.style.position='absolute';
      }
    }

    customElements.define('google-map-defaulticon', GoogleMapDefaultIcon);
  })();
</script>
</dom-module>