Web-Frontend/client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import 'leaflet/dist/leaflet.css';

const position = [51.505, -0.09]; // [latitude, longitude]

export default function GlobalMapCanvas() {
  return (
    <MapContainer center={position} zoom={13} style={{ height: "100%", width: "100%" }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; OpenStreetMap contributors'
      />
      <Marker position={position}>
        <Popup>
          A sample popup!
        </Popup>
      </Marker>
    </MapContainer>
  );
}