import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

export default function GlobalMapCanvas() {
  const position = [45.61142478054226, -122.49630033167544]; // [latitude, longitude]
  return (
      <MapContainer center={position} zoom={3} style={{ height: "100%", width: "100%" }}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; OpenStreetMap contributors'
        />
        <Marker position={position}>
          <Popup>
            CVO — Home of the volcanoligists
          </Popup>
        </Marker>
      </MapContainer>
  );
}