import React, { useEffect, useMemo, useRef, useState } from 'react'

import GeneralWMS from '../generalWms/GeneralWMS'

// url = http://localhost:8080/geoserver/wms?REQUEST=GetMap
// &SERVICE=WMS&VERSION=1.3.0&FORMAT=application/vnd.mapbox-vector-tile&STYLES=&TRANSPARENT=true
// &LAYERS=matoa:kpdl_npwp_tidak_valid
// &TILED=false&WIDTH=256&HEIGHT=256&CRS=EPSG:3857&BBOX=0,-20037508.342789244,20037508.342789244,0
const wmsLayer = {
  id: '777',
  url: '/engineN/geoserver/wms',
  layers: 'matoa:kpdl_npwp_tidak_valid',
  props: {
    id: '777',
    url: '/engineN/geoserver/wms',
    layers: 'matoa:kpdl_npwp_tidak_valid',
    version: '1.1.0',
    format: 'application/vnd.mapbox-vector-tile',
    styles: 'point',
    transparent: true,
    tiled: false,
    zIndex: 150,
    // width: 256,
    // height: 256,
    uppercase: true,
    // CRS: 'EPSG:3857',
    // opacity: '0.8',
    cql_filter: '1=1'
  }
}
export const KPdlLayer = ({ poiKpdlRef }) => {
  return <GeneralWMS ref={poiKpdlRef} key={wmsLayer.id} id={wmsLayer.id} url={wmsLayer.url} layers={wmsLayer.layers} {...wmsLayer.props} />
}