/*!
 * Leaflet WMS Layer Component
 *
 * Copyright(c) Exequiel Ceasar Navarrete <esnavarrete1@up.edu.ph>
 * Licensed under MIT
 */

import { Component, OnInit, Input } from '@angular/core';
import { LeafletMapService } from '../leaflet-map.service';
import { WMS, WMSOptions } from 'leaflet';

@Component({
  selector: 'app-leaflet-wms-layer',
  templateUrl: './leaflet-wms-layer.component.html',
  styleUrls: ['./leaflet-wms-layer.component.sass']
})
export class LeafletWmsLayerComponent implements OnInit {
  public layer: WMS;

  @Input() url: string;
  @Input() layerOptions: WMSOptions;

  constructor(private _mapService: LeafletMapService) {}

  ngOnInit() {
    if (typeof this.url === 'undefined') {
      throw new Error('WMS Tile URL should be provided.');
    }

    if (typeof this.layerOptions === 'undefined') {
      throw new Error('WMS Option should be provided.');
    }

    this._mapService
      .addWMSLayer(this.url, this.layerOptions)
      .then((layer: WMS) => {
        this.layer = layer;

        console.log(layer);
      })
      ;
  }

}



/*!
 * Leaflet WMS Layer Component
 *
 * Copyright(c) Exequiel Ceasar Navarrete <esnavarrete1@up.edu.ph>
 * Licensed under MIT
 */

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { LeafletMapService } from '../leaflet-map.service';
import { WMS } from 'leaflet';

@Component({
  selector: 'app-leaflet-wms-layer',
  templateUrl: './leaflet-wms-layer.component.html',
  styleUrls: ['./leaflet-wms-layer.component.sass']
})
export class LeafletWmsLayerComponent implements OnInit, AfterViewInit {
  public layer: WMS;

  constructor(private _mapService: LeafletMapService) { }

  ngOnInit() {
    let workspace = 'sarai-latest';
    let url = `http://202.92.144.40:8080/geoserver/${workspace}/wms?tiled=true`;

    let leafletApi = (L as any);

    // create the WMS tile layer
    this.layer = leafletApi.tileLayer.wms(url, {
      layers: workspace + ':rice_merged',
      format: 'image/png',
      transparent: true,
      maxZoom: 10,
      crs: leafletApi.CRS.EPSG900913,
      zIndex: 1000,
      attribution: `Crop data &copy; 2016
        <a href="http://www.pcaarrd.dost.gov.ph/" target="_blank">PCAARRD</a> and
        <a href="http://uplb.edu.ph/" target="_blank">University of the Philippines Los Banos</a>`
    });
  }

  ngAfterViewInit() {
    this._mapService.addSingleWMSLayer(this.layer);
  }

}



--- 
+++ 
@@ -5,42 +5,40 @@
  * Licensed under MIT
  */
 
-import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
 import { LeafletMapService } from '../leaflet-map.service';
-import { WMS } from 'leaflet';
+import { WMS, WMSOptions } from 'leaflet';
 
 @Component({
   selector: 'app-leaflet-wms-layer',
   templateUrl: './leaflet-wms-layer.component.html',
   styleUrls: ['./leaflet-wms-layer.component.sass']
 })
-export class LeafletWmsLayerComponent implements OnInit, AfterViewInit {
+export class LeafletWmsLayerComponent implements OnInit {
   public layer: WMS;
 
-  constructor(private _mapService: LeafletMapService) { }
+  @Input() url: string;
+  @Input() layerOptions: WMSOptions;
+
+  constructor(private _mapService: LeafletMapService) {}
 
   ngOnInit() {
-    let workspace = 'sarai-latest';
-    let url = `http://202.92.144.40:8080/geoserver/${workspace}/wms?tiled=true`;
+    if (typeof this.url === 'undefined') {
+      throw new Error('WMS Tile URL should be provided.');
+    }
 
-    let leafletApi = (L as any);
+    if (typeof this.layerOptions === 'undefined') {
+      throw new Error('WMS Option should be provided.');
+    }
 
-    // create the WMS tile layer
-    this.layer = leafletApi.tileLayer.wms(url, {
-      layers: workspace + ':rice_merged',
-      format: 'image/png',
-      transparent: true,
-      maxZoom: 10,
-      crs: leafletApi.CRS.EPSG900913,
-      zIndex: 1000,
-      attribution: `Crop data &copy; 2016
-        <a href="http://www.pcaarrd.dost.gov.ph/" target="_blank">PCAARRD</a> and
-        <a href="http://uplb.edu.ph/" target="_blank">University of the Philippines Los Banos</a>`
-    });
-  }
+    this._mapService
+      .addWMSLayer(this.url, this.layerOptions)
+      .then((layer: WMS) => {
+        this.layer = layer;
 
-  ngAfterViewInit() {
-    this._mapService.addSingleWMSLayer(this.layer);
+        console.log(layer);
+      })
+      ;
   }
 
 }
Implement the new interface for adding WMS layer
