Icons drift when zooming

[Alby407]

If I zoom out of the map, the icons (in my case Material UI Icons as React Components) drift from their intended position.

[leoc]

I am having the same problem. Were you able to fix the issue by playing with the icon anchoring or did you find another solution?

[ishaan6395]

Looking into it. Is it possible to send a video or gif that shows the bug?

On Thu, Mar 17, 2022 at 8:46 AM Arthur Leonard Andersen < @.***> wrote:

I am having the same problem. Were you able to fix the issue by playing with the icon anchoring or did you find another solution?

— Reply to this email directly, view it on GitHub https://github.com/ishaan6395/react-leaflet-enhanced-marker/issues/32#issuecomment-1070998521, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHLS7XYIMTMM6KK2CL5HHSTVANHVXANCNFSM5PFYV23Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you are subscribed to this thread.Message ID: @.*** com>

[leoc]

Thank you for the swift reply!

The marker should stay in the map center.

Maybe you could give a hint about how I can pass marker anchors via the react components. :-)

[ishaan6395]

Thanks will take a look.

On Thu, Mar 17, 2022 at 9:00 AM Arthur Leonard Andersen < @.***> wrote:

[image: Peek 2022-03-17 16-59] https://user-images.githubusercontent.com/184696/158841687-cf8003f1-7099-46d3-a39f-ed0e8126714f.gif

— Reply to this email directly, view it on GitHub https://github.com/ishaan6395/react-leaflet-enhanced-marker/issues/32#issuecomment-1071015208, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHLS7X5FYWW4GLJYQSR7G53VANJJNANCNFSM5PFYV23Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you commented.Message ID: @.***>

[leoc]

Maybe it's this line: https://github.com/ishaan6395/react-leaflet-enhanced-marker/blob/57236aab2fe296dbe2ed9b2a0009c4c6778c34f1/src/components/Marker/Utilities/IconUtils.js#L6

The width of the leaflet div seems to be fixed. Also the divIcon should get some popupAnchor and iconAnchor properties or do you set them elsewhere?

Thanks a lot for your help :+1:

[leoc]

I fixed the problem by replacing the enhanced marker with this component:

Marker.jsx:

import { Marker } from "react-leaflet";
import L from "leaflet";
import React from "react";
import ReactDOMServer from "react-dom/server";

export default ({
  iconSize,
  iconAnchor,
  popupAnchor,
  icon,
  children,
  ...props
}) => {
  return (
    <Marker
      icon={L.divIcon({
        className: "custom icon",
        iconSize,
        iconAnchor,
        popupAnchor,
        html: ReactDOMServer.renderToString(icon),
      })}
      {...props}
    >
      {children}
    </Marker>
  );
};

Using:

<MapContainer>
  <Marker
    position={position}
    iconSize={[45.25, 45.25]}
    iconAnchor={[16, 40]}
    popupAnchor={[0, -50]}
    icon={icon}
  >
    <Popup>{popup}</Popup>
  </Marker>
</MapContainer>

Now cool would be to fetch the size of the icon component automatically and picking anchors dynamically :-)