Develop Reference

React-Leaflet LocateControl component - keeps duplicating on each refresh

I'm using Locate Control in React Leaflet, but the Locate Control buttons are always duplicated, and sometimes I get 3 or 4 of them (see image below). I'm running the function through a useEffect with empty dependency to only fire it once, but no matter. I can target the class with display: none, but then both disappear. I feel like this might be an issue with Locate Control library? Really not sure. Open to any help or ideas.
import { useEffect } from "react"
import { useMap } from "react-leaflet"
import Locate from "leaflet.locatecontrol"
import "leaflet.locatecontrol/dist/L.Control.Locate.min.css"
const AddLocate = () => {
const map = useMap()
useEffect(() => {
const locateOptions = {
position: "bottomleft",
flyTo: true,
}
const locateControl = new Locate(locateOptions)
locateControl.addTo(map)
}, [])
return null
}
export default AddLocate;

Looks like you use a package made for leaflet. Which should for the most parts be okay. However the way you add the control is not really the react-leaflet way, where we want to add add components rather than add "stuff" directly to the map.
Below you can see how easy it is to implement a location component that you simply just can add as component within your MapContainer.
import { ActionIcon } from "#mantine/core";
import React, { useState } from "react";
import { useMapEvents } from "react-leaflet";
import { CurrentLocation } from "tabler-icons-react";
import LeafletControl from "./LeafletControl";
interface LeafletMyPositionProps {
zoom?: number;
}
const LeafletMyPosition: React.FC<LeafletMyPositionProps> = ({ zoom = 17 }) => {
const [loading, setLoading] = useState<boolean>(false);
const map = useMapEvents({
locationfound(e) {
map.flyTo(e.latlng, zoom);
setLoading(false);
},
});
return (
<LeafletControl position={"bottomright"}>
<ActionIcon
onClick={() => {
setLoading(true);
map.locate();
}}
loading={loading}
variant={"transparent"}
>
<CurrentLocation />
</ActionIcon>
</LeafletControl>
);
};
export default LeafletMyPosition;
And for LeafletControl I just have this reusable component:
import L from "leaflet";
import React, { useEffect, useRef } from "react";
const ControlClasses = {
bottomleft: "leaflet-bottom leaflet-left",
bottomright: "leaflet-bottom leaflet-right",
topleft: "leaflet-top leaflet-left",
topright: "leaflet-top leaflet-right",
};
type ControlPosition = keyof typeof ControlClasses;
export interface LeafLetControlProps {
position?: ControlPosition;
children?: React.ReactNode;
}
const LeafletControl: React.FC<LeafLetControlProps> = ({
position,
children,
}) => {
const divRef = useRef(null);
useEffect(() => {
if (divRef.current) {
L.DomEvent.disableClickPropagation(divRef.current);
L.DomEvent.disableScrollPropagation(divRef.current);
}
});
return (
<div ref={divRef} className={position && ControlClasses[position]}>
<div className={"leaflet-control"}>{children}</div>
</div>
);
};
export default LeafletControl;

I would do some debugging to that useEffect to see if it's only happening once. It's possible the entire component is mounted multiple times.

Why I Can't use Leaflet Map on Nextjs even with Dynamic Import?

Leaflet need global window object and as you know on SSR there is no window and it will return an error window is not definded
I searched a lot and the only way to use Leaflet it was to use nextjs dynamic import but i get nothing In my Page
It's been a day I'm searching the web how to solve this and NOTHING worked so far for me.
I Really need an answer for this
Why Map component won't Render?
Map.tsx
import { useState } from "react";
import { MapContainer, TileLayer, Marker, useMapEvents } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import "leaflet-defaulticon-compatibility";
const Map = () => {
const [position, setPosition] = useState<[number, number]>([51.505, 51.505]);
// Add Marker on Map onClick
function Mark() {
const map = useMapEvents({
click: ({ latlng }) => {
setPosition([latlng.lat, latlng.lng]);
},
});
return <Marker position={position} />;
}
return (
<MapContainer
center={[35.7219, 51.3347]}
zoom={6}
scrollWheelZoom={false}
style={{ height: "50vh" }}
>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
<Mark />
</MapContainer>
);
};
export default Map;
my dynamic import
import dynamic from "next/dynamic";
const AdPage = ({ ad }: AdPageProps): JSX.Element => {
const MapWithNoSSR = dynamic(() => import("./NewAd/map"), {
ssr: false,
});
return (
<>
<MapWithNoSSR />
</>
);
};
export default AdPage;

In my app I use separate index.ts file in the same folder as Map component to import map dynamically
index.ts
import dynamic from "next/dynamic";
export default dynamic(() => import("./Map"), { ssr: false });
and then use simple import where I need this map
import CustomMap from "../Map";

How to dynamically create multiple alerts inside mui v5 Snackbar

I am calling an API to do few actions.
I want to take the response of each action and show it inside Snackbar/alert.
I am able to show only the first response and nothing else even after iterating the messages in a map.
Here is my business logic calling the api
try {
const deletedUser = await deleteUser({ username: username });
[deletedUser.data.status.action1, deletedUser.data.status.action2].map(
(msg) =>
setNotify({
isOpen: true,
message: msg,
type: "success",
})
);
} catch (error) {}
setNotify will open the Snackbar with the alerts
import React from "react";
import { Snackbar, Alert } from "#mui/material";
import { styled } from "#mui/material/styles";
const StyledSnackbar = styled((props) => <Snackbar {...props} />)(
({ theme }) => ({
"& .MuiSnackbar-root": {
top: theme.spacing(15),
},
})
);
export default function Notification(props) {
const { notify, setNotify } = props;
const handleClose = (event, reason) => {
setNotify({
...notify,
isOpen: false,
});
};
return (
<StyledSnackbar
open={notify.isOpen}
autoHideDuration={10000}
anchorOrigin={{ vertical: "top", horizontal: "right" }}
onClose={handleClose}
>
<Alert severity={notify.type} onClose={handleClose}>
{notify.message}
</Alert>
</StyledSnackbar>
);
}
The only issue it's only displaying the first action and nothing else.
Edit On Sandbox
I suspect the alerts are overlapping on top of each other Maybe we need to add some sort of AutoGrow prop

You have to use notistack as described in the MUI doc:
This example demonstrates how to use notistack. notistack has an
imperative API that makes it easy to display snackbars, without having
to handle their open/close state. It also enables you to stack them on
top of one another (although this is discouraged by the Material
Design guidelines).
Start by wrapping your app inside a SnackbarProvider component then use useSnackbar hook to access enqueueSnackbar in order to add a snackbar to the queue to be displayed:
App.js
import "./styles.css";
import React from "react";
import { SnackbarProvider } from "notistack";
import Notification from "./Notification";
export default function App() {
return (
<SnackbarProvider maxSnack={3}>
<div className="App">
<h1>Dynamic Snackbar Alerts</h1>
<Notification />
</div>
</SnackbarProvider>
);
}
Notification.js
import React from "react";
import { Button } from "#mui/material";
import { useSnackbar } from "notistack";
export default function Notification(props) {
const { enqueueSnackbar } = useSnackbar();
const handleClick = async () => {
try {
const deletedUser = await deleteUser({ username: username });
[deletedUser.data.status.action1, deletedUser.data.status.action2].forEach((msg) => {
enqueueSnackbar(msg, {
variant: "success",
autoHideDuration: 10000,
anchorOrigin: { vertical: "top", horizontal: "right" }
});
});
} catch (error) {}
};
return (
<Button variant="outlined" onClick={handleClick}>
Generate Snackbar Dynamicly
</Button>
);
}
Demo:

How to call function in child functional component

I am working on react project which uses mapbox-gl-js and I have a question. How can I call function from my child component, so it will be executed in my parent component. I need this because my child component has UI for my mapbox map and I need to perform map-related stuff(eg. execute map.flyTo function). I will use mapbox-example-react project to show what I want to do, because it has similar structure as my main complicated project. Tried to use useRef and forwardRef hooks to make it work but had no success.
import React, { useRef, useEffect, useState, forwardRef } from 'react';
import mapboxgl from 'mapbox-gl';
import './Map.css';
import TestJs from './Test';
mapboxgl.accessToken =
'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';
const Map = () => {
const mapContainerRef = useRef(null);
const map = useRef();
const [lng, setLng] = useState(5);
const [lat, setLat] = useState(34);
const [zoom, setZoom] = useState(1.5);
// Initialize map when component mounts
useEffect(() => {
map.current = new mapboxgl.Map({
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/streets-v11',
center: [lng, lat],
zoom: zoom
});
// Add navigation control (the +/- zoom buttons)
map.current.addControl(new mapboxgl.NavigationControl(), 'top-right');
map.current.on('move', () => {
setLng(map.current.getCenter().lng.toFixed(4));
setLat(map.current.getCenter().lat.toFixed(4));
setZoom(map.current.getZoom().toFixed(2));
});
// Clean up on unmount
return () => map.current.remove();
}, []); // eslint-disable-line react-hooks/exhaustive-deps
const buttonref = useRef(test33);
function test33() {
map.current.flyTo({
center: [
1,
1,
],
zoom: 16,
essential: true
});
}
return (
<div>
<div className='sidebarStyle'>
<div>
Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
<br />
<TestJs ref={buttonref} />
</div>
</div>
<div className='map-container' ref={mapContainerRef} />
</div>
);
};
export default Map;
This is my child component, where I want to call my function.
import React, {forwardRef, useRef} from 'react'
const Test = forwardRef(() => {
return (
<button onClick={ref.current.test33}>Button</button>
)
})
export default Test
Link to mapbox example doc: https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/
Link to github mapbox github repo with example react-create-app: https://github.com/mapbox/mapbox-react-examples/tree/master/basic

Martin and azium were right in the comments. Using props to call this function worked.

Using Google Place Autocomplete API in React

I want to have an auto completing location search bar in my react component, but don't know how I would go about implementing it. The documentation says to include
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>
in an HTML file, and then have an initialize function pointing to an element - how would I go about doing this with my react component/JSX? I presume I would have to import the api link, but I have no clue where to go from there.
import React from 'react';
import "https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places&callback=initMap";
const SearchBar = () => (
<input type="text" id="search"/> //where I want the google autocomplete to be
);
export default SearchBar;

Google Maps API loading via static import:
import "https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places&callback=initMap";
is not supported, you need to consider a different options for that purpose:
reference Google Maps API JS library via /public/index.html file:
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places"></script>
or dynamically load JS resource, for example using this
library
Now regarding SearchBar component, the below example demonstrates how to implement a simple version of Place Autocomplete (without a dependency to Google Map instance) based on this official example
import React from "react";
/* global google */
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.autocompleteInput = React.createRef();
this.autocomplete = null;
this.handlePlaceChanged = this.handlePlaceChanged.bind(this);
}
componentDidMount() {
this.autocomplete = new google.maps.places.Autocomplete(this.autocompleteInput.current,
{"types": ["geocode"]});
this.autocomplete.addListener('place_changed', this.handlePlaceChanged);
}
handlePlaceChanged(){
const place = this.autocomplete.getPlace();
this.props.onPlaceLoaded(place);
}
render() {
return (
<input ref={this.autocompleteInput} id="autocomplete" placeholder="Enter your address"
type="text"></input>
);
}
}

Here's a solution using ES6 + React Hooks:
First, create a useGoogleMapsApi hook to load the external script:
import { useEffect, useState, useCallback } from 'react'
import loadScript from 'load-script'
import each from 'lodash/each'
var googleMapsApi
var loading = false
var callbacks = []
const useGoogleMapsApi = () => {
const [, setApi] = useState()
const callback = useCallback(() => {
setApi(window.google.maps)
}, [])
useEffect(() => {
if (loading) {
callbacks.push(callback)
} else {
if (!googleMapsApi) {
loading = true
loadScript(
`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&libraries=places`,
{ async: true },
() => {
loading = false
googleMapsApi = window.google.maps
setApi(window.google.maps)
each(callbacks, init => init())
callbacks = []
})
}
}
}, [])
return googleMapsApi
}
export default useGoogleMapsApi
Then, here's your input component:
import React, { useRef, useEffect, forwardRef } from 'react'
import useGoogleMapsApi from './useGoogleMapsApi'
const LocationInput = forwardRef((props, ref) => {
const inputRef = useRef()
const autocompleteRef = useRef()
const googleMapsApi = useGoogleMapsApi()
useEffect(() => {
if (googleMapsApi) {
autocompleteRef.current = new googleMapsApi.places.Autocomplete(inputRef.current, { types: ['(cities)'] })
autocompleteRef.current.addListener('place_changed', () => {
const place = autocompleteRef.current.getPlace()
// Do something with the resolved place here (ie store in redux state)
})
}
}, [googleMapsApi])
const handleSubmit = (e) => {
e.preventDefault()
return false
}
return (
<form autoComplete='off' onSubmit={handleSubmit}>
<label htmlFor='location'>Google Maps Location Lookup</label>
<input
name='location'
aria-label='Search locations'
ref={inputRef}
placeholder='placeholder'
autoComplete='off'
/>
</form>
)
}
export default LocationInput
Viola!

Was making a custom address autocomplete for a sign up form and ran into some issues,
// index.html imports the google script via script tag ie: <script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places"></script>
import {useState, useRef, useEffect } from 'React'
function AutoCompleteInput(){
const [predictions, setPredictions] = useState([]);
const [input, setInput] = useState('');
const [selectedPlaceDetail, addSelectedPlaceDetail] = useState({})
const predictionsRef = useRef();
useEffect(
()=>{
try {
autocompleteService.current.getPlacePredictions({ input }, predictions => {
setPredictions(predictions);
});
} catch (err) {
// do something
}
}
}, [input])
const handleAutoCompletePlaceSelected = placeId=>{
if (window.google) {
const PlacesService = new window.google.maps.places.PlacesService(predictionsRef.current);
try {
PlacesService.getDetails(
{
placeId,
fields: ['address_components'],
},
place => addSelectedPlaceDetail(place)
);
} catch (e) {
console.error(e);
}
}
}
return (
<>
<input onChange={(e)=>setInput(e.currentTarget.value)}
<div ref={predictionsRef}
{ predictions.map(prediction => <div onClick={ ()=>handleAutoCompletePlaceSelected(suggestion.place_id)}> prediction.description </div> )
}
</div>
<>
)
}
So basically, you setup the autocomplete call, and get back the predictions results in your local state.
from there, map and show the results with a click handler that will do the follow up request to the places services with access to the getDetails method for the full address object or whatever fields you want.
you then save that response to your local state and off you go.