engineN/app/Views/kewilayahan/peta/layers/overlayLayers.js

import React from 'react'
// import ReactDOMServer from 'react-dom/server'
import L from 'leaflet'
import 'leaflet.vectorgrid'
import '../generalWms/L.VectorGrid.VectorPoi'
import '../generalWms/L.TileLayer.GeneralWMS'
import '../generalWms/L.TileLayer.MatoaNpwp'
import '../generalWms/L.TileLayer.PoiGoogle'
// import { Popup, useMap } from 'react-leaflet'
// import { Button, Col, Row } from 'reactstrap'

const style = {
  kpdl_npwp_tidak_valid: {
    fillColor: '#3388ff',
    color: '#f20e93',
    fillOpacity: 1,
    opacity: 1,
    radius: 7,
    fill: true,
    zIndex: 100,
    getFeatureId: function (f) {
      return f.properties.UUID
    }
  },
  kpdl_poi_google: {
    fillColor: '#b30e3d',
    color: '#da165a',
    fillOpacity: 1,
    opacity: 1,
    radius: 7,
    fill: true,
    zIndex: 100,
    getFeatureId: function (f) {
      return f.properties.UUID
    }
  }
}

const parameterPeta = (id, layername) => {
  return {
    id: id,
    // url: '/engineN/geoserver/wms',
    url: 'https://cendol-djp.intranet.pajak.go.id/geoserver/wms',
    wmsParams: {
      request: 'GetMap',
      service: 'WMS',
      crs: 'EPSG:3857',
      styles: '',
      transparent: 'TRUE',
      version: '1.3.0',
      format: 'application/vnd.mapbox-vector-tile',
      layers: layername,
      width: 256,
      height: 256,
      cql_filter: "'1=1'",
      // query_layers: 'matoa:kpdl_npwp_tidak_valid',
      tiled: 'FALSE'
    },
    interactive: true,
    type: 'protobuf',
    rendererFactory: L.svg.tile,
    vectorTileLayerStyles: style
  }
}

const parameterPetaWms = (id, layername, style, minzoom) => {
  return {
    id: id,
    // url: '/engineN/geoserver/wms',
    url: 'https://cendol-djp.intranet.pajak.go.id/geoserver/wms',
    wmsParams: {
      request: 'GetMap',
      service: 'WMS',
      styles: style,
      transparent: 'TRUE',
      version: '1.1.0',
      format: 'image/png',
      layers: layername,
      maxZoom: 23,
      minZoom: minzoom ?? 5,
      cql_filter: '(1=1)'
    }
  }
}

//layer poi google
// const poiGoogleParam = parameterPetaWms(1, 'matoa:kpdl_poi_google', 'poi_google', 10)
// const poiGoogleLayer = L.tileLayer.poiGoogle(poiGoogleParam.url, poiGoogleParam.wmsParams)

//layer npwp tidak valid
const npwpInvalidParam = parameterPeta(2, 'matoa:kpdl_npwp_tidak_valid', 'poi_matoa_npwp')
const npwpInvalidlayer = L.vectorGrid.vectorpoi(npwpInvalidParam.url, npwpInvalidParam)

//layer poi Matoa BerNPWP (Hijau)
const poiMatoaNpwpParam = parameterPetaWms(3, 'matoa:kpdl_npwp_valid', 'poi_matoa_npwp', 6)
const poiMatoaNpwpLayer = new L.tileLayer.matoaNpwp(poiMatoaNpwpParam.url, poiMatoaNpwpParam.wmsParams)

//layer poi Matoa NonNPWP (Orange /Kuning)
const poiMatoaNpwpNullParam = parameterPetaWms(4, 'matoa:kpdl_npwp_null', 'poi_matoa_npwp_null', 4)
const poiMatoaNpwpNullLayer = L.tileLayer.matoaNpwp(poiMatoaNpwpNullParam.url, poiMatoaNpwpNullParam.wmsParams)

//action

npwpInvalidlayer.on('click', (e) => {
  // console.log(e)
})

export const matoaLayers = {
  // npwpInvalidlayer,
  // poiGoogleLayer,
  poiMatoaNpwpLayer,
  poiMatoaNpwpNullLayer
}

export const overlaysTree = [
  // {
  //   label: '<span style="padding-left:20px" class="text-center center text-sm">Poi Google</span>'
  // },
  // {
  //   label: 'Poi Google',
  //   layer: matoaLayers.poiGoogleLayer
  // },
  {
    label: 'POI MATOA',
    selectAllCheckbox: true,
    children: [
      {
        label: 'berNPWP',
        layer: matoaLayers.poiMatoaNpwpLayer
      },
      {
        label: 'Non NPWP',
        layer: matoaLayers.poiMatoaNpwpNullLayer
      }
      // {
      //   label: 'Matoa NPWP invalid',
      //   layer: matoaLayers.npwpInvalidlayer
      // }
    ]
  }
]