osm-layer.html

<link rel="import" href="../polymer/polymer.html">
<script src="http://openlayers.org/en/v3.11.2/build/ol.js"></script>

<!--
The `osm-layer` element allows to add different layer typs to the `osm-map` element.

#### Example

    <osm-map>
      <osm-layer source="sat"></osm-layer>
    </osm-map>

@demo demo/index.html
-->

<dom-module id="osm-layer">
  <script>
    Polymer({
      is: 'osm-layer',

      properties: {
        /**
         * Visibility. Default is true (visible).
         */
        visible: {
          type: Boolean,
          value: true
        },

        /**
         * Preload. Load low-resolution tiles up to preload levels. 
         * By default preload is 0, which means no preloading.
         */
        preload: {
          type: Number,
          notify: 0
        },

        /**
         * Possible values are osm, sat, hyb and bing.
         * See (http://openlayers.org/en/v3.8.2/apidoc/ol.source.MapQuest.html)
         */
        source: {
          type: String,
          value: 'osm',
          observer: '_sourceChanged'
        },

        /**
         * A maximum zoom value.
         * Default is 19 to see stretched tiles instead of the
         * "no photos at this zoom level" tiles.
         */
        maxZoom: {
          type: Number,
          value: 19
        },

        /**
         * The bing map style.
         * Possible values are 'Road', 'Aerial', 'AerialWithLabels', 'collinsBart' or 'ordnanceSurvey'.
         */
        bingMapStyle: {
          type: String,
          value: 'AerialWithLabels'
        } 

      },

      /**
       * Force layer redraw if source changed.
       */
      _sourceChanged: function () {
        this.fire('update-layers');
      },

      /**
       * Returns the computed ol.layer.Tile object.
       * See (http://openlayers.org/en/v3.8.2/apidoc/ol.layer.Tile.html)
       */
      get: function() {
        if(this.source == "bing") {
          return new ol.layer.Tile({
            visible: this.visible,
            preload: this.preload,
            source: new ol.source.BingMaps({
              key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
              imagerySet: this.bingMapStyle,
              maxZoom: this.maxZoom
            })
          });
        }
        else {
          return new ol.layer.Tile({ 
            visible: this.visible,
            preload: this.preload,
            source: new ol.source.MapQuest({ layer: this.source }) 
          });
        }
      }
    });
  </script>
</dom-module>