px-map-tile-layer-wms.html

<!--
Copyright (c) 2018, General Electric

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="px-map-behavior-tile-layer.html"/>

<!--
This subcomponent displays WMS services as tile layers on the map. It is a simple
wrapper around the Leaflet mapping library's L.TileLayer.WMS layer. Find full
instructions on how to configure it to request WMS tiles [on the Leaflet website](http://leafletjs.com/examples/wms/wms.html).

### Usage

    <px-map>
      <px-map-tile-layer-wms
          url="http://example.com/cgi-bin/wms/map.cgi"
          layers="layer1,layer2"
          format="image/png"
          transparent
          attribution="Example data (c) 2017 Example Corp.">
      </px-map-tile-layer-wms>
    </px-map>

@element px-map-tile-layer-wms
@blurb Displays WMS services as tile layers
@homepage index.html
@demo index.html
-->

<dom-module id="px-map-tile-layer-wms">
  <template>
    <style>
      :host { display: none }
    </style>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'px-map-tile-layer-wms',
    behaviors: [PxMapBehavior.Layer],

    properties: {
      /**
       * Base URL of the WMS service.
       */
      url: {
        type: String,
        observer: 'shouldUpdateInst'
      },

      /**
       * Comma-separated list of WMS layers to show. Required to show the WMS
       * tile layers.
       */
      layers: {
        type: String,
        observer: 'shouldUpdateInst'
      },

      /**
       * Comma-separated list of WMS styles.
       */
      styles: {
        type: String,
        observer: 'shouldUpdateInst'
      },

      /**
       * WMS image format to use (use 'image/png' for layers with transparency).
       */
      format: {
        type: String,
        value: 'image/jpeg',
        observer: 'shouldUpdateInst'
      },

      /**
       * If `true`, WMS service will return images with transparency.
       */
      transparent: {
        type: Boolean,
        value: false,
        observer: 'shouldUpdateInst'
      },

      /**
       * Version of the WMS service to use.
       */
      version: {
        type: String,
        value: '1.1.1',
        observer: 'shouldUpdateInst'
      },

      /**
       * Coordinate Reference System to use for the WMS requests, defaults to
       * map CRS. Don't change this if you're not sure what it means.
       */
      crs: {
        type: String,
        value: null,
        observer: 'shouldUpdateInst'
      },

      /**
       * If `true`, WMS request parameter keys will be uppercase.
       * @type {Object}
       */
      uppercase: {
        type: Boolean,
        value: false,
        observer: 'shouldUpdateInst'
      },

      /**
       * String shown in the attribution box on the map, describes the source
       * of layer data.
       */
      attribution: {
        type: String,
        value: '',
        observer: 'shouldUpdateInst'
      },

      /**
       * Opacity of the layer. Particularly useful for reducing the intensity
       * of color from satellite imagery. Accepts values between 0.0 and 1.0.
       */
      opacity: {
        type: Number,
        value: 1.0,
        observer: 'shouldUpdateInst'
      }
    },

    canAddInst: function() {
      return (typeof this.url === 'string') && this.url.length > 0 && (typeof this.layers === 'string') && this.layers.length > 0;
    },

    createInst: function(options) {
      return L.tileLayer.wms(options.url, options.wmsOptions);
    },

    updateInst: function(lastOptions, nextOptions) {
      if (lastOptions.url !== nextOptions.url) {
        this.elementInst.setUrl(nextOptions.url);
      }
      if (lastOptions.wmsOptionsHash !== nextOptions.wmsOptionsHash) {
        this.elementInst.setParams(nextOptions.wmsOptions);
      }
      if (lastOptions.opacity !== nextOptions.opacity) {
        this.elementInst.setOpacity(nextOptions.opacity);
      }
    },

    getInstOptions: function() {
      const wmsOptions = {
        layers: this.layers,
        transparent: this.transparent,
        uppercase: this.uppercase,
        version: this.version,
        attribution: this.attribution
      };
      if (typeof this.styles === 'string' && this.styles.length > 0) {
        wmsOptions.styles = this.styles;
      }
      if (typeof this.format === 'string' && this.format.length > 0) {
        wmsOptions.format = this.format;
      }
      if (this.crs) {
        wmsOptions.crs = this.crs;
      }

      return {
        url: this.url,
        wmsOptions: wmsOptions,
        wmsOptionsHash: JSON.stringify(wmsOptions),
        opacity: this.opacity
      };
    }
  });
</script>