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

import React, { useEffect, useMemo, useRef, useState } from 'react'
import ReactDOM, { render } from 'react-dom'
import ReactDOMServer from 'react-dom/server'
import { LayerGroup, LayersControl, MapContainer, TileLayer, useMap } from 'react-leaflet'
import L, { CRS, Control, Evented, Events, LatLngExpression, Layer, Map } from 'leaflet'
import { baseLayer, layersmaps } from './layers/baseLayers'
import { Skeleton } from 'primereact/skeleton'
import 'leaflet/dist/Leaflet.css'
import 'leaflet.locatecontrol'
import 'leaflet.locatecontrol/dist/L.Control.Locate.css'
import './app-maps.scss'
import 'leaflet.control.layers.tree'
import 'leaflet.control.layers.tree/L.Control.Layers.Tree.css'
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css'
import 'primeflex/primeflex.css'
import '../scss/core.scss'
import jquery from 'jquery'
import { Provider, useDispatch, useSelector } from 'react-redux'
import { store } from '../kytp/store/store'
import { matoaLayers, overlaysTree } from './layers/overlayLayers'
import { getStatusSPT, setSelectedOpsi } from '../kytp/store/PetaStore'
import ControlCustom from 'react-leaflet-custom-control'
import MenuBawah from './MenuBawah'
import Legenda from './Legenda'

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 refFeatureBawah = useRef()
  const poiKpdlRef = useRef()
  const [dataSend, setDataSend] = useState({ opsiWilZona: null, adm4_pcode: [], id_poly_zona: [], nip_ar_perekam: [], nip_ar_pengampu: [] })
  const [centroid, setCentroid] = useState(null)
  const layers = []
  const latestBase = localStorage.getItem('latestBase') ?? 'Open Street Map'
  const parse = require('wellknown')
  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 optVectorKpdl = {
  //   // popup: (layer) => `<div>${layer.propertiesss.UUID}</div>`,
  //   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',
  //   vectorTileLayerStyles: {
  //     kpdl_npwp_tidak_valid: {
  //       fillColor: '#3388ff',
  //       color: '#f20e93',
  //       fillOpacity: 1,
  //       opacity: 1,
  //       radius: 7,
  //       fill: true,
  //       zIndex: 2,
  //       getFeatureId: function (f) {
  //         return f.properties.UUID
  //       }
  //     }
  //   }
  // }

  const setDefaultCentroid = (map) => {
    jquery.get({
      url: '/engineN/kewilayahan/peta/defaultcentroid',
      type: 'get',
      dataType: 'text',
      success: (res) => {
        console.log(res)
        if (res) {
          const cent = L.geoJSON(parse(res)).getLayers()[0].feature.geometry
          setCentroid(cent)
          console.log({ cent })
          map.panTo([cent.coordinates[1], cent.coordinates[0]]).setZoom(14)
        } else {
          const indonesia = L.geoJSON(parse('POLYGON((94.3 9.2, 142.1 9.2, 142.1 -11.3, 94.3 -11.3, 94.3 9.2))'))
          map.fitBounds(indonesia.getBounds()).setZoom(map.getZoom() - 1)
        }
      }
    })
  }

  const whenReady = (e) => {
    const map = e.target
    setDefaultCentroid(map)
    const baseTree = {
      label: 'Base Layer',
      children: [
        { label: 'Open Street Map', layer: baseLayer.osm },
        { label: 'Google Road', layer: baseLayer.Road },
        { label: 'Google Satellite', layer: baseLayer.Satellite },
        { label: 'Google Hybrid', layer: baseLayer.Hybrid }
      ]
    }
    const ctl = L.control.layers.tree(baseTree)
    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)
      ctl.addTo(map)
      ctl.setOverlayTree(overlaysTree)
      map.addLayer(baseLayer.osm)
      // map.addLayer(matoaLayers.poiGoogleLayer)
      map.addLayer(matoaLayers.poiMatoaNpwpLayer)
      map.addLayer(matoaLayers.poiMatoaNpwpNullLayer)
    }
  }

  useEffect(() => {}, [centroid, map])

  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)
        }}
      >
        <LayerGroup ref={refFeatureBawah}></LayerGroup>
        <ControlCustom position="bottomleft">
          <Legenda />
        </ControlCustom>
        <ControlCustom position="bottomleft">
          <MenuBawah wmsRef={wmsRef} refFeatureBawah={refFeatureBawah} dataSend={dataSend} setDataSend={setDataSend} />
        </ControlCustom>
      </MapContainer>
    ),
    []
  )
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getStatusSPT())
  }, [])
  // useEffect(() => {
  //   console.log({ dataSend })
  // }, [dataSend])
  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 = (
  <Provider store={store}>
    <Root />
  </Provider>
)
ReactDOM.render(component, container)