Appending buttons to a map marker

27 viewscssgridmaterial uireactjs
0

I am trying to make map marker with 3 buttons on the right as the follows:
enter image description here

I uses MUI Grid to help me do that with a structure like this but this makes the maker is not on the right position anymore. (Shift to the left of the original coordinates). Is there a way that I can just append the buttons without affecting the original marker? Any help is appreciated.
enter image description here

Here is my code. It doesn’t work even if i move the mapbox marker inside the grid on the left.

import React from "react";
import ReactCountryFlag from "react-country-flag";
import IconButton from "@mui/material/IconButton";
import FlagIcon from "@mui/icons-material/Flag";

import { Marker as MapboxMarker } from "react-map-gl";
import Grid from "@mui/material/Unstable_Grid2";
import Stack from "@mui/material/Stack";

const wrapperStyles = {
  aspectRatio: "4/3",
  background: "mist",
  overflow: "hidden",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  borderRadius: "20%",
};

interface CountryFlagPinProps {
  key: string;
  longitude: number;
  latitude: number;
  country?: string;
  setPopupInfo?: () => null;
}

function Marker(props: CountryFlagPinProps) {
  const { key, longitude, latitude, country, ...other } = props;
  const countryCode = "US";

  return (
    <MapboxMarker key={key} longitude={longitude} latitude={latitude} anchor="bottom">
      <Grid container>
        <Grid xs={12} style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
          <div style={wrapperStyles}>
            <ReactCountryFlag
              countryCode={countryCode}
              svg
              style={{
                width: "2em",
                height: "2em",
                aspectRatio: "4/3",
                background: "mist",
                overflow: "hidden",

                borderRadius: "20%",
              }}
            />
          </div>
        </Grid>
        <Grid xs={4}>
          <Stack spacing={0}>
            <IconButton size="small">
              <FlagIcon />
            </IconButton>
            <IconButton size="small">
              <FlagIcon />
            </IconButton>
            <IconButton size="small">
              <FlagIcon />
            </IconButton>
          </Stack>
        </Grid>
      </Grid>
    </MapboxMarker>
  );
}

export default React.memo(Marker);