Issue with Setting Marker and Zoom Animation

[HosseinKrouna]

Description:

I'm experiencing an issue with setting a marker and performing a zoom animation using flyTo in React Leaflet. I have two components: SearchBarMap and MainMap. The SearchBarMap component handles the search functionality and updates the selected address. The MainMap component displays the map, markers, and the selected address marker.

The problem is that when I select an address from the search results, the marker is not set, and the zoom animation does not occur. However, I noticed that the LocationMarker component works perfectly fine and smoothly performs the zoom animation.

Here's the relevant code for the SearchBarMap component:

// SearchBarMap.js

import { Stack, TextField } from "@mui/material";
import { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import SearchAddressMarker from "./MapWithSearchAddressMarker";

// Rest of the code...

export default function SearchBarMap() {
  // State variables

  // Rest of the code...

  return (
    <Stack>
      <form name="searchForm" onSubmit={handleSubmit}>
        <TextField
          value={inputAddress}
          onChange={handleChange}
          name="address-input"
          label="Address"
          placeholder="Enter address"
        />
      </form>
      <Stack>
        <label htmlFor="address-select">Select Address:</label>
        <select
          id="address-select"
          value={selectedOption}
          onChange={handleSelectAddress}
          disabled={!isMenuOpen}
          aria-label="Select Address"
          open={isMenuOpen}
        >
          // Option elements 
        </select>
        {selectedAddress && (
          <SearchAddressMarker selectedAddress={selectedAddress} />
        )}
      </Stack>
    </Stack>
  );
}



// Rest of the code...

And here's the relevant code for the MainMap component:

// MainMap.js

import { MapContainer as LeafletMap, Marker, Popup } from "react-leaflet";
import styled from "styled-components";
import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import "leaflet-defaulticon-compatibility";
import LocationMarker from "./LocationMarker";
import { Stack, Button, Grid } from "@mui/material";
import CustomTileLayer from "./customComponents/CustomTileLayer";
import { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import SearchBarMap from "./SearchBarMap";
import MapWithSearchAddressMarker from "./MapWithSearchAddressMarker";

// Rest of the code...

export default function MainMap({ markers }) {
  // State variables

  // Rest of the code...

  return (
    <Stack>
      <Grid container>
        <SearchBarMap handleSelectedAddress={handleSelectedAddress} />
      </Grid>
      <StyledMapContainer center={[50.123, 8.234]} zoom={12} scrollWheelZoom>
        <MapWithSearchAddressMarker selectedAddress={selectedAddress} />
        <CustomTileLayer />
        // Marker elements 
        {LocationMarkerComponent}
      </StyledMapContainer>
      <Button onClick={handleReturnCurrentPosition}>
        Return current position
      </Button>
    </Stack>
  );
}

// Rest of the code...

And here's the code for the LocationMarker component:

// LocationMarker.js

import { useEffect, useState } from "react";
import "leaflet/dist/leaflet.css";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import * as L from "leaflet";
const { Marker, Popup, useMapEvents } = require("react-leaflet");

const greenIcon = new L.Icon({
	iconUrl: "/assets/mapIcons/green_marker.png",

	shadowUrl:
		"https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
	iconSize: [45, 51],
	iconAnchor: [12, 41],
	popupAnchor: [1, -34],
	shadowSize: [41, 41],
});

export default function LocationMarker() {
	const [position, setPosition] = useState(null);
	const map = useMapEvents({
		locationfound: (e) => {
			setPosition(e.latlng);
			map.flyTo(e.latlng, map.getZoom());
		},
	});

	useEffect(() => {
		map.locate();
	}, [map]);

	return (
		position && (
			<Marker position={position} icon={greenIcon}>
				<Popup>You are here</Popup>
			</Marker>
		)
	);
}

I hope this helps to clarify the issue. If you have any further questions, feel free to ask!

Thanks in advance for your assistance!

[Falke-Design]

Please make a vanilla demo to reproduce this issue: http://www.leafletjs.com/edit.html

[HosseinKrouna]

I appreciate your feedback. Thank you for taking the time to provide assistance.
I tried using Plunk, but I had difficulty because I'm not yet proficient in translating the complexity of my code into Vanilla JavaScript and HTML. I also attempted to use CodeSandbox, hoping that would work as well. Unfortunately, I couldn't render the map on CodeSandbox to demonstrate my actual problem. Perhaps I could receive a small tutorial on how to showcase it in CodeSandbox. Thank you very much for your assistance. Here is the link to the CodeSandbox: https://codesandbox.io/s/happy-proskuriakova-23yph4

[Falke-Design]

My first attempt would be to look into following:

function SearchAddressMarker({ selectedAddress }) {
  const map = useMap();
  const zoomLevel = 12;
  console.log("Selected Address in SearchAddressMarker:", selectedAddress);

  useMapEvents({
    zoomend: () => {
      const targetLatLng = [selectedAddress.lat, selectedAddress.lon]; // Die gewünschten Koordinaten für das Fly-To
      console.log("Target LatLng:", targetLatLng);
      map.flyTo(targetLatLng, zoomLevel, {
        duration: 1,
        easeLinearity: 0.5
      });
    }
  });

You are starting a second animation with calling map.flyTo while the zoom function is still not 100% finished. Now it could be that with finishing the zoom function, the animation from flyTo is stopped.

Try to call flyTo a second later for debugging:

setTimeout(()=>{
map.flyTo(targetLatLng, zoomLevel, {
        duration: 1,
        easeLinearity: 0.5
      });
},1000);

---

However, in this repository we only handle bugs in "vanilla" Leaflet. This means that we do not handle bugs which are specific to frameworks such as:

React
Ractive
AngularJS
Bootstrap
Leaflet for R
Joomla
Wordpress
Ionic
Cordova
Vue
Electron
Polymer
TypeScript
D3
Folium
NativeScript
...etc

Please understand that we only have the time and energy to test Leaflet in plain web browsers.

Please try to either reproduce the bug without using any frameworks, or submit a bug to the appropriate repo.

[HosseinKrouna]

Ok, I understand the amount of time and energy it takes. Thanks for your help anyway. I'll try to reproduce it without frameworks if I can't solve the problem on my own.