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

import React, { useEffect, useMemo, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { LayersControl, MapContainer, TileLayer, useMap } from 'react-leaflet'
import L, { CRS, Control, Evented, Events, LatLngExpression, Layer, Map } from 'leaflet'
import { layersmaps } from './layers/baseLayers'

import 'leaflet/dist/Leaflet.css'
import 'leaflet.locatecontrol'
import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
import '../scss/core.scss'
import './app-maps.scss'
// import PoiKpdl from './layers/PoiKpdl'
// import VectorPoi from './generalWms/VectorPoi'
// import VectorGridd from './generalWms/VectorGridd'
import { PoiKpdl } from './layers/PoiKpdl'
const Root = () => {
  // document.body.style.margin = '0'
  document.body.className = 'm-0 p-0'

  const [map, setMap] = useState()
  const [center, setCenter] = useState([-6.1659502, 106.7140899])
  const [zoom, setZoom] = useState(14)
  const [layCon, setLayCon] = useState()
  const wmsRef = useRef()
  const poiKpdlRef = useRef()

  const layers = []
  const latestBase = localStorage.getItem('latestBase') ?? 'Open Street Map'
  layersmaps.map((val) => {
    if (val.name === latestBase) {
      val.checked = true
    } else {
      val.checked = false
    }

    val = { ...val }
    return layers.push(val)
  })

  function baselayerchange(e) {
    // setSelectedBase(e.name)
    localStorage.setItem('latestBase', e.name)
  }

  const whenReady = (e) => {
    const map = e.target

    if (map) {
      map.addControl(
        L.control.locate({
          drawCircle: false,
          position: `bottomright`,
          locateOptions: {
            enableHighAccuracy: true
          }
        })
      )
      map.addControl(L.control.zoom({ position: 'bottomright' }))
      map.on('baselayerchange', baselayerchange)
    }
  }
  const optVectorKpdl = {
    id: '777',
    url: '/engineN/geoserver/wms?REQUEST=GetMap&SERVICE=WMS&FORMAT=application/vnd.mapbox-vector-tile&CRS=EPSG:3857&STYLES=&TILED=false&TRANSPARENT=true&VERSION=1.3.0&HEIGHT=256&WIDTH=256&LAYERS=matoa:kpdl_npwp_tidak_valid',
    mapParam: {
      url: '/engineN/geoserver/wms',
      LAYERS: 'matoa:kpdl_npwp_tidak_valid',
      VERSION: '1.1.0',
      FORMAT: 'application/vnd.mapbox-vector-tile',
      TRANSPARENT: true,
      TILED: false,
      // zIndex: 150,
      WIDTH: 256,
      HEIGHT: 256
      // uppercase: true,
      // cql_filter: '1=1'
    },
    interactive: true,
    type: 'protobuf'
  }
  const displayMap = useMemo(
    () => (
      <MapContainer
        style={{ minHeight: '400px', minWidth: '380px' }}
        id="map-container"
        className="map-container"
        ref={setMap}
        center={center}
        zoom={zoom}
        scrollWheelZoom={true}
        zoomControl={false}
        whenReady={(e) => {
          whenReady(e)
        }}
      >
        <LayersControl ref={setLayCon} position="topright">
          {layers.map((val, idx) => (
            <LayersControl.BaseLayer name={val.name} key={idx} checked={val.checked}>
              <TileLayer attribution={val.attribution} url={val.url} subdomains={val.subdomains} maxZoom={23} />
            </LayersControl.BaseLayer>
          ))}
          <LayersControl.Overlay name={'Poi Google Map'} checked={true}>
            <PoiKpdl ref={poiKpdlRef} />
            {/* <VectorGridd
              url={optVectorKpdl.url}
              options={optVectorKpdl}
              vectorTileLayerStyles={{
                kpdl_npwp_tidak_valid: {
                  weight: 0,
                  fillColor: '#9bc2c4',
                  fillOpacity: 1,
                  fill: true
                }
              }}
            /> */}
          </LayersControl.Overlay>
        </LayersControl>
      </MapContainer>
    ),
    []
  )
  return (
    <>
      <div style={{ height: '100vh', width: '100%', padding: '0' }}>
        <div className="map-leaflet" id="map-leaflet">
          {displayMap}
        </div>
      </div>
    </>
  )
}
const container = document.getElementById('app')
const component = <Root />

ReactDOM.render(component, container)