When creating a Marker onClick, the marker is offset and not directly where the mouse cursor is

Question

I'm trying to create a react-leaflet Map that onClick creates a Marker on the click's Lat and Lng. The problem is that the marker is created at an offset, towards the bottom right instead of on the mouse cursor.

import React, { useState, useContext } from "react";
import classes from "./WorldMap.module.css";
import { Map, TileLayer, Marker } from "react-leaflet";
import L from "leaflet";
import RoundInformationDisplay from "./RoundInfoDisplay/RoundInfoDisplay";
import ConfirmGuessButton from "./ConfirmGuessButton/ConfirmGuessButton";
import { AppContext } from "../../../../context/appContext";
interface Props {
  handleEndOfRound: () => void;
}
const WorldMap: React.FC = (props) => {
  const { currentRoundGuess, setCurrentRoundGuess } = useContext(AppContext);
  const icon = L.icon({ iconUrl: require("../../../../static/marker.svg") });

  const [selected, setSelected] = useState(false);
  const handleMapClick = (e: any) => {
    setCurrentRoundGuess({ ...e.latlng });
    setSelected(true);
  };

  return (
    
      
        
      
       handleMapClick(e)}
      >
        {selected ? (
          
        ) : (
          
        )}
        
      
      
        
      
    
  );
};
export default WorldMap;

A video showcasing the issue: https://streamable.com/g5uusl

What could be causing this problem? Thank you in advance.

user_1375553 · Answer

As was mentioned in comments icon.iconanchor property allows to align the icon position relative to marker's location, in case of react-leaflet library, icon.iconanchor property could be specified as demonstrated below:

function MapExample(props) {
  const [selectedPos, setSelectedPos] = useState(props.center);
  

  function getMarkerIcon() {
    const icon = new L.Icon({
      iconSize: [32, 37], // size of the icon
      iconAnchor: [16, 37], 
      iconUrl: "/bigcity_green.png",
    });
    return icon;
  }

  function handleMapClick(e) {
    setSelectedPos(e.latlng);
  }

  return (
    
      
      {selectedPos && }
    
  );
}

When creating a Marker onClick, the marker is offset and not directly where the mouse cursor is

1 Answers