everyone. I want to show a cluster using mapbox. I get it to the point where I can see the number of markers within a cluster. However, if I zoom into the map, the display does not change to where I see individual markers on the map. See image. I use the following lib for the mapbox for React: https://visgl.github.io/react-map-gl/docs/api-reference/map
. Thank you very much
useEffect(() => {
const points = alleArtikel.map((artikel) => ({
type: "Feature",
properties: {
cluster: false,
artikelId: artikel._id,
name: artikel.name,
beschreibung: artikel.beschreibung,
lng: artikel.long,
lat: artikel.lat,
bild: artikel.bild,
userId: artikel.userId,
},
geometry: {
type: "Point",
coordinates: [parseFloat(artikel.long), parseFloat(artikel.lat)],
},
}));
setPoints(points);
}, [alleArtikel]);
useEffect(() => {
supercluster.load(points);
setClusters(supercluster.getClusters(bounds, zoom));
}, [points, zoom, bounds]);
useEffect(() => {
if (mapRef.current) {
setBounds(mapRef.current.getMap().getBounds().toArray().flat());
}
}, [mapRef?.current]);
{clusters?.map((artikel) => {
const { cluster: isCluster, point_count } = artikel.properties;
const [longitude, latitude] = artikel.geometry.coordinates;
if (isCluster) {
return (
<Marker
key={artikel.id}
longitude={longitude}
latitude={latitude}
onClick={() => setShowPopup(true)}
>
<div
className="cluster-marker"
style={{
width: `${13 + (point_count / points.length) * 20}px`,
height: `${13 + (point_count / points.length) * 20}px`,
}}
onClick={() => {
const zoom = Math.min(
supercluster.getClusterExpansionZoom(artikel.id),
10
);
mapRef?.current.flyTo({
center: [longitude, latitude],
zoom,
speed: 1,
});
}}
>
{point_count}
</div>
</Marker>
);
}
return (
<Marker
key={artikel.properties.artikelId}
longitude={longitude}
latitude={latitude}
>
<Box sx={{ position: "realtive" }}>
<Tooltip title={artikel.properties.beschreibung}>
<img
src={artikel.properties.bild}
width={40}
height={40}
/>
</Tooltip>
{showPopup && (
<Popup
closeOnClick={false}
closeButton={true}
longitude={longitude}
latitude={latitude}
anchor="bottom"
onClose={() => setShowPopup(false)}
style={{ position: "absolute", top: -40 }}
>
<Stack direction={"column"}>
<Box>
<img
src={artikel.properties.bild}
style={{ maxWidth: 200 }}
></img>
</Box>
<Box>
<Typography variant="body2" align="center">
{artikel.art}
</Typography>
</Box>
<Box>
<Typography variant="body1" align="center">
{artikel.name}
</Typography>
</Box>
<Box>
<Button variant="contained" fullWidth>
anfragen
</Button>
</Box>
</Stack>
</Popup>
)}
</Box>
</Marker>
);
})}
This is what the map looks like when it is initially loaded
If I zoom in very closely, the point does not change or split
Related
I've succesfully implemented two seperate reusable MUI TextField and Select components , but having issue with third one, which contains both Mui Select/Chip in one single component, the code is two parts, one is the main component which call the second one,
/// Main component///
const { handleSubmit, reset, formState: { errors }, control } = useForm({
defaultValues: {
contractCode: 'sss', stores: [],
},
resolver: yupResolver(schema)
});
return (
.......
<Box m="1rem 0.7rem"
<FormInputText errors={errors} control={control} name='contractCode' label='Contract Code' />
<FormMultipleSelectChip errors={errors} control={control} name='stores' required label='Stores' />
</Box>
.......
);
/// Below is my Child component to re-use
const names = [
'Oliver Hansen',
'Virginia Andrews',
'Kelly Snyder',
];
export default function MultipleSelectChip({ label, inputProps, control, name, errors,stores }) {
const [personName, setPersonName] = React.useState([]);
const handleChange = (event) => {
const {
target: { value },
} = event;
setPersonName(
};
return (
<div>
<FormControl >
<Typography> Locations </Typography>
<Controller
name={name}
control={control}
render={({ field : { onChange, value, ...rest} }) => (
<Select
{...rest}
multiple
value={personName}
onChange={handleChange}
renderValue={(selected) => (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} />
))}
</Box>
)}
MenuProps={MenuProps}
>
{names.map((name) => (
<MenuItem key={name} value={name} >
{name}
</MenuItem>
))}
</Select>
)}
/>
</FormControl>
</div>
);
}
Once I submitted the the form, Im not getting the value for 'stores' as attached, but im getting proper value for rest of the fields, enter image description hereenter image description here
Appreciate if anyone help me to fix this issue
Thanks
Syed
I am using MUI to develop my dashboard.
I am using MUI dropdown component to select the vendor details and there are two options for the Vendor dropdown. i.e "Surya Kumar Yadav", "Eswar". I used the same dropdown in all my cards. When I select the one of the dropdown in any card, it is reflected in all the other cards.
import React from "react";
import {
Box,
Card,
CardContent,
Typography,
Button,
CardActionArea,
CardActions,
Grid,
Select,
MenuItem,
FormControl,
InputLabel,
} from "#mui/material";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { HttpClient } from "../http/http";
import { ConfirmDialog, confirmDialog } from "./ConfirmDialog";
const Services = () => {
const [services, setServices] = useState([]);
const [vendors, setVednors] = useState([]);
const [selectedVendor, setSelectedVendor] = useState("");
const PF =
"https://firebasestorage.googleapis.com/v0/b/mern-stack-service-app.appspot.com/o/";
const navigate = useNavigate();
useEffect(() => {
init();
}, []);
const init = () => fetchServices();
const fetchServices = async () => {
const services = await HttpClient.get(`services`);
const vendors = await HttpClient.get(`vendor`);
setVednors(vendors);
setServices(services);
};
const handleChange = (event) => {
setSelectedVendor(event.target.value);
};
console.log(services);
return services.length === 0 ? (
<Grid>
<Typography
sx={{
fontSize: 32,
color: "blue",
display: "flex",
justifyContent: "center",
alignItems: "center",
textDecoration: "underline",
}}
>
Loading your services.....
</Typography>
</Grid>
) : (
<Grid container>
<ConfirmDialog />
<Grid container item xs={12} columnGap={2}>
<Box sx={{ float: "right" }}>
<Button
variant="outlined"
onClick={() => {
confirmDialog("Are you sure want to logout?", () => {
localStorage.clear();
navigate("/login");
});
}}
>
Logout
</Button>
</Box>
</Grid>
<Grid container item xs={12} rowGap={2}>
{services.map((service, index) => (
<Grid item xs={12} sm={6} md={4} key={index}>
<Card>
<CardActionArea>
<CardContent>
<Grid
component="img"
sx={{
height: 150,
width: 350,
maxHeight: { xs: 150, md: 175 },
maxWidth: { xs: 350, md: 375 },
objectFit: "cover",
}}
alt="The house from the offer."
src={
PF +
service.photo +
"?alt=media&token=c19f2d0a-f254-4391-b589-ef7ee3cad9f5"
}
></Grid>
<Grid item xs={12}>
<Typography textAlign="center">
{service.service}
</Typography>
</Grid>
<Grid item xs={12}>
<FormControl sx={{ minWidth: 120 }} size="small" fullWidth>
<InputLabel id="demo-select-small">
Select Vendor
</InputLabel>
<Select
size="small"
labelId="demo-select-small"
id="demo-select-small"
value={selectedVendor}
label="Select Vendor"
onChange={handleChange}
>
{vendors.map((vendor) => (
<MenuItem
key={vendor._id}
value={vendor.name}
id={vendor.name}
>
{vendor.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</CardContent>
</CardActionArea>
<CardActions>
<Grid item xs={12}>
<Button variant="outlined" color="primary" fullWidth>
Book Service
</Button>
</Grid>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Grid>
);
};
export default Services;
I want the dropdown action reflect in the selected card.
It's because all of your mapped Select elements get their value from selectedVendor. you can change the code like this using these steps:
First:
Change the selectingVendor useState like this:
const [selectedVendors, setSelectedVendors] = useState([]);
Second:
And the handleChange function
const handleChange = (event,index) => {
const currentSelectedVendors = [...selectedVendors];
currentSelectedVendors[index] = event.target.value
setSelectedVendors(currentSelectedVendors);
};
Third:
You need to change the Select Mui component props.
<Select
size="small"
labelId="demo-select-small"
id="demo-select-small"
value={selectedVendors[index] || ""}
label="Select Vendor"
onChange={(e) => handleChange(e,index)}
>
Although there is another solution for this problem and you can pull <Select> logic out of Services component , I mean it's selectingVendor hook and it's change handler and create a new separate component which handles it.
PS: I think it should be better to use vendor._id as the value prop of your MenuItems
I need some help...
I'm working with a material UI Popover: currently, it shows when hovering over a certain place and it will only hide when clicking anywhere away from it. I want it to hide automatically as soon as my mouse isn't hovering anymore.
Can you tell me what's wrong with my code?
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const openModal = Boolean(anchorEl);
const id = openModal ? "simple-popover" : undefined;
const handleClick = (event: any, params: any) => {
setOrganization({...params});
setAnchorEl(event.currentTarget);
console.log("hola", "Hola")
};
const handlePopover = () => {
setAnchorEl(null);
setOrganization({ idor: null });
};
<Grid container direction="column" height="60%">
<Grid item container justifyContent="center">
<Badge
style={{ cursor: "pointer" }}
badgeContent={params.row.active ? "Active" : "Inactive"}
color={params.row.active ? "success" : "error"}
onMouseEnter={(e: any) => handleClick(e, params.row)}
/>
<Popover
id={id}
onExit={handlePopover}
open={openModal}
anchorEl={anchorEl}
onClose={handlePopover}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
>
<Grid container justifyContent="center">
<Tooltip title="View Window">
<IconButton
onClick={() => handleToOrganization(params.row, "view")}
style={{ marginLeft: 16 }}
>
<LaunchOutlinedIcon />
</IconButton>
</Tooltip>
<Tooltip title="Edit">
<IconButton
onClick={() => handleToOrganization(params.row, "edit")}
style={{ marginLeft: 16 }}
>
<EditOutlinedIcon />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
<IconButton
onClick={() => handleOpen()}
style={{ marginLeft: 16 }}
>
<DeleteOutlineOutlinedIcon />
</IconButton>
</Tooltip>
</Grid>
</Popover>
</Grid>
</Grid>```
Thank you in advance! :)
I'm stuck can a charitable soul advise me : I have a form that wraps 3 tabs
which contain text fields
interface TabPanelProps {
// eslint-disable-next-line react/require-default-props
children?: ReactNode;
index: number;
value: number;
}
function TabPanel(props: TabPanelProps) {
const { children, value, index, ...other } = props;
return (
<div
aria-labelledby={`simple-tab-${index}`}
hidden={value !== index}
id={`simple-tabpanel-${index}`}
role="tabpanel"
{...other}
>
{value === index && (
<Box sx={{ p: 3 }}>
<div>{children}</div>
</Box>
)}
</div>
);
}
function getTab(index: number) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
export default function tt({ closeModal, testData }: any) {
const [value, setvalue] = useState(0);
const methods = useForm<MyInterface>();
const {
register,
handleSubmit,
formState: { errors, isDirty },
} = methods;
const onSubmit = (formValue: MyInterface) => {
console.log("isSubmitted");
console.log(formValue);
};
const handleChangeTab = (event: SyntheticEvent, newValue: number) => {
setvalue(newValue);
};
return (
<FormProvider {...methods} >
< form className="myForm"
onSubmit={methods.handleSubmit(onSubmit)} >
<Box sx={{ width: '100%' }}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs aria-label="basic tabs example" onChange={handleChangeTab} value={value}>
<Tab label="1" {...getTab(0)} />
<Tab label="2" {...getTab(1)} />
<Tab label="3" {...getTab(2)} />
</Tabs>
</Box>
<TabPanel index={0} value={value}>
<Component1 />
</TabPanel>
<TabPanel index={1} value={value}>
<Component2 testData={testData} />
</TabPanel>
<TabPanel index={2} value={value}>
<Component3 />
</TabPanel>
</Box>
<DialogActions>
<Button onClick={methods.handleSubmit(onSubmit)}>Enregistrer</Button>
<Button onClick={closeModal}>Annuler</Button>
</DialogActions>
</form>
</FormProvider>
);
}
2 and 3 have for example juste textField which are required in Component 1 but not in Component 2 and 3 :
import { useFormContext } from "react-hook-form";
import { TextField } from '#mui/material';
export default function Component1() {
const { register, formState } = useFormContext();
return (
<>
<TextField
error={Boolean(formState.errors?.name)}
fullWidth
helperText={Boolean(formState.errors?.name) === false ? "give the name" : formState.errors.name?.message}
{...register('name', { required: "name is required." })}
label="name"
variant="standard"
/>
</>
);
}
code in the Component2:
import { Controller, useFormContext } from 'react-hook-form';
import { Checkbox, Chip, FormControl, InputLabel, ListItemText, MenuItem, Select, SelectChangeEvent, TextField } from '#mui/material';
export default function Component3(props: any) {
const { register, control } = useFormContext();
return (
<>
<FormControl sx={{ m: 1, minWidth: '100%' }} variant="standard">
<InputLabel id="test">En prod</InputLabel>
<Controller
control={control}
defaultValue=""
name="test"
render={({ field }) => (
<Select labelId="test" {...field}>
<MenuItem value="yes">yes</MenuItem>
<MenuItem value="no">no</MenuItem>
</Select>
)}
/>
</FormControl>
my problem is:
when I change tab without clicking in a field of the form, that is sent even if the required fields are not filled.
On the contrary when I click in any field and the required fields are not filled in isDirty remains true.
Which is normal.
But if I fill in the required fields and I change tab isDirty always stays true and I can't send the form.
Thank you for your help!!
I have some Hidden components below:
<Hidden smUp>
...
</Hidden>
<Hidden xsDown>
...
</Hidden>
It's deprecated in V5. So how can I use Paper & Box components as in the migration documents?
Sorry but it's quite difficult to follow the guide.
In the Migration from v4 documentation, this is actually pretty good explained.
You have to replace
<Hidden smUp>
...
<Hidden/>
with
<Paper sx={{ display: { xs: "block", sm: "none" } }}>
...
</Paper>
// or
<Box sx={{ display: { xs: "block", sm: "none" } }}>
...
</Box>
and
<Hidden xsDown>
...
</Hidden>
with
<Paper sx={{ display: { xs: "none", sm: "block" } }}>
...
</Paper>
// or
<Box sx={{ display: { xs: "none", sm: "block" } }}>
...
</Box>
Live demo: