I want to group different types of Markers with LayersControl.Overlay in FeatureGroup. But I didn't do that.
Any help?
<FeatureGroup ref={ (reactFGref) => {this._onFeatureGroupReady(reactFGref);} }>
<EditControl
position='topright'
onEdited={this._onEdited}
onCreated={this._onCreated}
onDeleted={this._onDeleted}
draw={{
rectangle: false,
circle: false,
polyline: false,
polygon: false,
}}
/>
<LayersControl position="topright" collapsed={false}>
{hardwareData && hardwareData.map(data => {
return(
<LayersControl.Overlay key={data.type_id} name={`${data.type_id }`} checked>
<Marker>
...
</Marker>
</LayersControl.Overlay>
);
})}
</LayersControl>
</FeatureGroup>
You probably have it the other way around: instead of placing the LayersControl as child of your FeatureGroup, you should have the LayersControl as child of your MapContainer, and your FeatureGroup as child of the LayersControl:
<MapContainer>
<LayersControl>
{ hardwareData && hardwareData.map(data => (
<LayersControl.Overlay name={data.type_id} key={data.type_id}>
<FeatureGroup>
<Marker /> etc.
</FeatureGroup>
</LayersControl.Overlay>
)}
</LayersControl>
</MapContainer>
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 trying to create an InfoWindow with Google Map API, but there is always an extra small box with the same class to the big InfoWindow. Any way I can get rid of the small InfoWindow?
Here's the link of the image showing the extra small box
Here's my code. Full code here: https://gist.github.com/juifuhung/c2ca99cfbb20bf53686b8bc57d8a8524
return (
<div style={{ display: "flex" }}>
{console.log(array)}
<GoogleMap
zoom={12}
center={center}
mapContainerClassName="map-container"
>
{array.map((location) => (
<Marker
key={uuidv4()}
icon={location.icon}
position={{ lat: location.lat, lng: location.lng }}
onClick={() => {
setSelected(location);
}}
/>
))}
{selected && (
<InfoWindow
position={{ lat: selected.lat, lng: selected.lng }}
onCloseClick={() => setSelected(null)}
>
<div>
<h1>{selected.title}</h1>
<p>{selected.description}</p>
<FaHeart />
<img src={selected.image} alt="" />
</div>
</InfoWindow>
)}
</GoogleMap>
<p>map</p>
</div>
);
};
Try setting the size for your info window, or there might be a bool to set the small info box into hidden
<InfoWindow
this.state.isOpen &&
<InfoWindow onCloseClick={() => this.setState({isOpen:
false})}>
position={{ lat: selected.lat, lng: selected.lng }}
onCloseClick={() => setSelected(null)}
>
<div>
<h1>{selected.title}</h1>
<p>{selected.description}</p>
<FaHeart />
<img src={selected.image} alt="" />
</div>
</InfoWindow>
But if this is an old api, please update to the latest one
#react-google-maps/api
I'm following this example
https://react-leaflet.js.org/docs/example-layers-control
to build in a small ionic+react app.
How could I listen to change of state of each of the overlay layers checkboxes?
I would like to change the center and zoom of my map to show all makers of the active overlay layers.
You can tap into the eventHandlers prop of each layer, which is just a wrapper for all the event handlers that can be added to any leaflet layer. So you can tap into the add and remove events, and listen for those events on each layer. Those events are triggered when adding and removing layers with the LayersControl:
<MapContainer {...props}>
<LayersControl collapsed={false}>
<LayersControl.BaseLayer checked name="OpenStreetMap.Mapnik">
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
eventHandlers={{
add: (e) => {
console.log("Added Layer:", e.target);
},
remove: (e) => {
console.log("Removed layer:", e.target);
}
}}
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="OpenStreetMap.BlackAndWhite">
<TileLayer
url="https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
eventHandlers={{
add: (e) => {
console.log("Added Layer:", e.target);
},
remove: (e) => {
console.log("Removed layer:", e.target);
}
}}
/>
</LayersControl.BaseLayer>
<LayersControl.Overlay name="Marker with popup">
<Marker
position={center}
eventHandlers={{
add: (e) => {
console.log("Added Layer:", e.target);
},
remove: (e) => {
console.log("Removed layer:", e.target);
}
}}
>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker>
</LayersControl.Overlay>
</LayersControl>
</MapContainer>
Working Codesandbox
I create my markers like this, a recurisve function call every 5 seconds to
change layers on the map.
var MeterLocations= Object.keys(dict)
var currloc = 0;
var markers;
function cycleMeteors(callback){
markers = dict[MeterLocations[currloc]].map(function(arr,i){
return(
<Marker
icon={purpleS}
key={i+"marker-num"+MeterLocations[currloc]}
position={{ lat: parseFloat(arr.val[4]),
lng: parseFloat(arr.val[5]) }}
/>)
})
currloc +=1;
setTimeout(function(){
callback(markers);
},5000);
}
I attempt here to remove the markers from the map by popping the entire array into length = 0. but that does not remove the markers from the map. another post mentioned settng the map to null map[map.length-1].setMap(null) but that doesnt work in reactjs
var [map, setMap] = useState([]);
cycleMeteors(function(s){
console.log(s.length);
while(map.length){
console.log(map.length)
map.pop()
}
// s is the new array of markers
setMap(s);
})
idk if you need this but here is my app.js
const MapWithAMarker = withScriptjs(withGoogleMap(props => {
console.log(props.children);
return (
<GoogleMap
defaultZoom={2}
defaultCenter={{ lat: 0, lng: 0 }}
>
{props.children.length ? props.children : []}
</GoogleMap>
)
}));
function App() {
var [map, setMap] = useState({});
cycleMeteors(function(s){
console.log(s.length);
while(map.length){
console.log(map.length)
map[map.length-1].setMap(null)
map.pop()
}
setMap(s);
})
return (
<div className="App">
<article>
<div id="maps-widget">
</div>
</article>
<article>
<h4>Data stuff</h4>
<p> These items amount of </p>
<p> Metory type | number in class </p>
{/*<MClassView data={dict}/>
*/}
<MapWithAMarker
googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${apikey}&v=3.exp&libraries=geometry,drawing,places`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `600px`, width: "1000px" }} />}
mapElement={<div style={{ height: `100%` }} />}
>{map}</MapWithAMarker>
</article>
</div>
);
}
When I click on the map icon and open the info window the page jumps to the center of my screen. How can i prevent the page from jumping when i open an info window?
const UserMarker = props => (
<Marker
position={props.location}
icon={props.icon}
onClick={() => props.users.setIsOpen()}
>
{props.users.isOpen && <InfoWindow onCloseClick={() => props.users.setIsOpen()}>
<div>
<h3 className="margin-bottom-1">{props.users.hasDescription ? <img alt={props.users.name} src={props.icon} /> : <i className="fa fa-user" />} {props.users.name}</h3>
{props.users.hasDescription ? <p>{props.users.description}</p> : ''}
<p>{props.users.hasDescription ? '' : `Bid: ${props.users.bidAmount && convertToDollars(props.users.bidAmount)}`}</p>
</div>
</InfoWindow>}
</Marker>
)
export const UserMap = withScriptjs(withGoogleMap((props) => {
const { users, area, zoom } = props;
const markers = users.map((user, idx) => <UserMarker
key={idx}
users={user}
location={{ lat: user.lat, lng: user.lon }}
icon={user.marker}
/>);
return (
<React.Fragment>
<GoogleMap
defaultZoom={zoom}
center={{ lat: area.lat, lng: area.lon }}
>
{markers}
</GoogleMap>
</React.Fragment>
);
}
))
I guess you mean info window auto pan, if so, this is the default behavior, to disable info window auto-pan on open set disableAutoPan property to true for InfoWindow component like this:
<InfoWindow options={{disableAutoPan: true}}>
<div>
content
</div>
</InfoWindow>
Here is a demo