gn-poly.html

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

<!--
The `gn-poly` element is used to add a polygon on `gn-map` element. `gn-point` elements are used to create the polygon.

Examples:

    <gn-map
      latitude="53.694089"
      longitude="10.608718"
      zoom="13" map-type="GoogleMap">
      <gn-poly fill-color="red" stroke-color="red" closed>
        <gn-point latitude="53.699089" longitude="10.603718"></gn-point>
        <gn-point latitude="53.694089" longitude="10.608718"></gn-point>
        <gn-point latitude="53.689089" longitude="10.603718"></gn-point>
        <gn-point latitude="53.694089" longitude="10.598718"></gn-point>
      </gn-poly>
    </gn-map>

-->

<dom-module id="gn-poly">
  <template>
    <content></content>
  </template>
  <script>
    Polymer({
      is: "gn-poly",

      properties: {
        strokeColor: {
          type: String,
          value: '#0091ea',
          notify: true
        },

        width: {
          type: Number,
          value: 4,
          notify: true
        },

        closed: {
          type: Boolean,
          value: false,
          notify: true
        },

        fillColor: {
          type: String,
          value: '#0091ea',
          notify: true
        },

        points: {
          type: Array,
          notify: true,
          value: function() {
            return [];
          }
        },

        fillOpacity: {
          type: Number,
          notify: true,
          value: 0.5
        }
      },

      asObject: function() {
        return {
          "strokeColor": this.strokeColor,
          "width": this.width,
          "closed": this.closed,
          "fillColor": this.fillColor,
          "fillOpacity": this.fillOpacity,
          "points": this.points
        }
      },

      attached: function () {
        var self = this;
        this._observer = Polymer.dom(this).observeNodes( function(info) {
          self.queryAllEffectiveChildren('gn-point').forEach(function(point) {
            self.push('points', point.asObject());
          });
          self.fire('update-gn-map');
        });
      }

    });
  </script>
</dom-module>