polygon-layer.html

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

<link rel="import" href="./deck-gl-layer-behavior.html">

<dom-module id="polygon-layer">
  <script>
  /*
     * The `choropleth-layer` wraps around the [ChoroplethLayer](https://uber.github.io/deck.gl/#/layers/core-layers/choropleth-layer) in deck.gl.
     *
     * The Choropleth Layer takes in GeoJson formatted data and renders it as interactive choropleths.
     *
     * By supplying a GeoJson FeatureCollection you can add multiple polygons.
     * Each Feature has an optional "properties" object. The layer will look for
     * an optional property color, which is expected to be a 4 element array of
     * values between 0 and 255, representing the rgba values for the color of
     * that Feature.
     *
     * If not provided, the default rgba will be [0, 0, 255, 255].
     *
     * @demo demo/choropleth-layer.html
     */
Polymer({
  is: 'polygon-layer',
  behaviors: [DeckGLPolymer.BaseLayer],
  properties: {
    lightSettings: {
      type: Object,
      value: null
    },
    extruded: {
      type: Boolean,
      value: false
    },
    wireframe: {
      type: Boolean,
      value: false
    },
    /*
         * A map of accessor functions to retrieve specific data from the
         * dataset. The following accessors are available for ChoroplethLayer:
         * - getColor (default: feature => feature.properties.color)
         */
    accessorFunctions: {
      type: Object,
      value: null
    }
  },

  observers: [
    '_updateProps(extruded, wireframe, accessorFunctions)',
    '_updateLayer(_props)'
  ],

  get layer() {
    if (!this.data) return;
    return new DeckGL.PolygonLayer(this._cleanObject(this._props));
  },

  _updateProps: function() {
    if (!this.data) return;
    var props = this._getBaseProps();
    props.extruded = this.extruded;
    props.wireframe = this.wireframe;
    if (this.lightSettings) props.lightSettings = this.lightSettings;
    if (this.accessorFunctions) {
      props.getPolygon = this.accessorFunctions.getPolygon;
      props.getElevation = this.accessorFunctions.getElevation;
      props.getFillColor = this.accessorFunctions.getFillColor;
    }
    this._props = props;
  },

  _updateLayer: function(_props) {
    if (!_props) return;
    this.fire('layer-updated', this.layer, { node: this.parentNode });
  }
});
</script>
</dom-module>