I am trying to make map marker with 3 buttons on the right as the follows:
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.
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);