import React, { useEffect, useRef,useState } from 'react';
import L from 'leaflet';
import {Button} from  "react-bootstrap";

function GIS() {
  // create map
  const mapRef = useRef(null);
  const [markerPosition, setmarkerPosition] = useState([0,0])

  useEffect(() => {
    mapRef.current = L.map('map', {
      center: [49.8419, 24.0315],
      zoom: 16,
      layers: [
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution:
            '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }),
      ]
    });
  }, []);


  // add marker
  const markerRef = useRef(null);
  useEffect(
    () => {
        console.log("2")

      if (markerRef.current) {
        markerRef.current.setLatLng(markerPosition);
      } else {
        markerRef.current = L.marker(markerPosition).addTo(mapRef.current);
      }
    },
    [markerPosition]
  );

    const handleClick = () => {
        console.log("1")
        //setmarkerPosition([45,45])
        markerRef.current = L.marker([45,45]).addTo(mapRef.current);

    }

  return (
    <>
        <Button onClick={handleClick}>ffffffffffffff</Button>
        <div ref={mapRef} id="map"></div>
    </>
  )
}

export default GIS;