Popup

import React, { useState, useCallback } from "react";
import "ol/ol.css";
import { toLonLat } from "ol/proj";
import { toStringHDMS } from "ol/coordinate";
import { Map } from "@react-ol/fiber";

export const ExamplePopup = () => {
  const [coordinates, setCoordinates] = useState(undefined);
  const [popup, setPopup] = useState();
  const onSingleclick = useCallback((evt) => {
    const { coordinate } = evt;
    setCoordinates(coordinate);
  }, []);
  return (
    <>
      <div
        ref={setPopup}
        style={{
          backgroundColor: "white",
          boxShadow: "0 1px 4px rgba(0,0,0,0.2)",
          padding: "15px",
          borderRadius: "10px",
          border: "1px solid #cccccc",
          minWidth: "280px",
          color: "black",
        }}
      >
        <button
          type="button"
          onClick={(e) => {
            setCoordinates(undefined);
            e.target.blur();
            return false;
          }}
          style={{
            textDecoration: "none",
            position: "absolute",
            top: "2px",
            right: "8px",
          }}
        >
          ✖
        </button>
        <div id="popup-content">
          <p>You clicked here:</p>
          <code>{coordinates && toStringHDMS(toLonLat(coordinates))}</code>
        </div>
      </div>
      <Map onSingleclick={onSingleclick}>
        {popup ? (
          <olOverlay
            element={popup}
            position={coordinates}
            autoPan
            autoPanAnimation={{
              duration: 250,
            }}
          />
        ) : null}
        <olView initialCenter={[-472202, 7530279]} initialZoom={12} />
        <olLayerTile>
          <olSourceXYZ
            attributions={
              '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
            }
            url="https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            tileSize={512}
            crossOrigin={null}
          />
        </olLayerTile>
      </Map>
    </>
  );
};