> ## Documentation Index
> Fetch the complete documentation index at: https://data.avert.ldeo.columbia.edu/llms.txt
> Use this file to discover all available pages before exploring further.

# VPMI

> Volcán Poás Mirador

export const DynamicFrameWithTimestamp = ({imageType = "infrared", site = "CLNE", vnum = 311240, volcanoName = "Cleveland volcano", dataVizServiceUrl = "https://avert.ldeo.columbia.edu/api", fallbackTimestamp = "Unknown", className = "", children}) => {
  const [imageData, setImageData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  useEffect(() => {
    const fetchImageMetadata = async () => {
      try {
        setLoading(true);
        const url = `${dataVizServiceUrl}/image-metadata/${imageType}/${vnum}/${site}`;
        console.log("Fetching image metadata from:", url);
        const response = await fetch(url, {
          method: "GET",
          mode: "cors",
          headers: {
            Accept: "application/json"
          }
        });
        if (!response.ok) {
          throw new Error(`Failed to fetch image metadata: ${response.status}`);
        }
        const data = await response.json();
        setImageData(data.latest_image || data);
        setError(null);
      } catch (err) {
        console.warn("Failed to fetch live timestamp, using fallback:", err);
        setError(err.message);
        const fallbackUrl = `https://avert-legacy.ldeo.columbia.edu/archive/imagery/${imageType}/${vnum}/${site}-recent.jpg`;
        setImageData({
          url: fallbackUrl,
          formatted_timestamp: fallbackTimestamp
        });
      } finally {
        setLoading(false);
      }
    };
    fetchImageMetadata();
  }, [imageType, site, vnum, dataVizServiceUrl, fallbackTimestamp]);
  const getSiteDescription = () => {
    return `${site}`;
  };
  const getCaption = () => {
    if (loading) {
      return `Loading latest ${imageType} imagery from ${volcanoName} (${getSiteDescription()})...`;
    }
    if (imageData?.formatted_timestamp && imageData.formatted_timestamp !== "Unknown") {
      return `[${imageData.formatted_timestamp}] Latest ${imageType} imagery from ${volcanoName} (${getSiteDescription()})`;
    }
    return `[${imageData.formatted_timestamp}] Latest ${imageType} imagery from ${volcanoName} (${getSiteDescription()})`;
  };
  return <div className={`frame ${className}`} style={{
    border: "1px solid #e5e7eb",
    borderRadius: "0.5rem",
    overflow: "hidden",
    marginBottom: "1.5rem",
    backgroundColor: "#ffffff",
    boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
  }}>
      {}
      <div style={{
    padding: "0.75rem 1rem",
    backgroundColor: "#f9fafb",
    borderBottom: "1px solid #e5e7eb",
    fontSize: "0.875rem",
    fontWeight: "500",
    color: "#374151",
    textAlign: "center"
  }}>
        {getCaption()}
        {error && <div style={{
    marginTop: "0.25rem",
    fontSize: "0.75rem",
    color: "#ef4444",
    opacity: "0.7",
    fontWeight: "normal"
  }}>
            Note: Using cached timestamp due to connection issue
          </div>}
      </div>

      {}
      <div style={{
    padding: "1rem",
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  }}>
        {children}
      </div>
    </div>;
};

Images can be viewed in the [image browser](https://avert.ldeo.columbia.edu/tools/imagery-browser?type=visible) or you can request through the API, which is given under [Data Access](/data-types/visible-imagery/data-access).

<DynamicFrameWithTimestamp imageType="visible" site="VPMI" vnum={345040} volcanoName="Poás volcano" dataVizServiceUrl="https://avert.ldeo.columbia.edu/api" fallbackTimestamp="August 29, 2025 at 12:46">
  <img src="https://avert-legacy.ldeo.columbia.edu/archive/imagery/visible/345040/VPMI-recent.jpg" style={{ borderRadius: "0.5rem", margin: "0px" }} alt="Latest visible imagery from Poás volcano (VPMI site)" />
</DynamicFrameWithTimestamp>