Uncaught Error: Invalid LatLng object: (NaN, NaN)

I also have this bug in D9.

This happens only when I use custom markers with a token from a field. If I use a single marker for all items, the popups work as expected. As a workaround, I'm using leaflet tooltip, but tooltips are bad compared to js popup because the tooltip appears off map often with no option to re-center the map on open.

I'm having a bear of a time debugging this one because the leaflet module only includes the dist code for leaflet and not the source, does anyone have tips in how to get source code for leaflet in the module for debugging? I think I can manually download the src into right folder maybe? It doesn't look like the module is using composer to install leaflet.

Thanks for your comment, Greg!
Indeed, in my case, it was an issue with a custom map icon, and that icon URL had a leading slash in the path.

The help text says: "Can be an absolute or relative URL (as Drupal root folder relative paths without the leading slash)" - so it was clearly an issue on our end.

Interesting. I'm { field_image } token to pull an image dynamically, it works when I use a hard coded path. But, it's a good lead, perhaps one of my pieces of content is missing an image.

Hence according to comment #4 I guess we can close this ...

I still have this bug and, I am still working on fixing it. While icons work with a fixed icon url, we need token support to work so that we can have multiple icons.

I haven't yet figured out why I am getting the fatal error, but I should have it figured out soon.

@Greg Boggs what you are trying to fix is definitely NOT A BUG on the Leaflet module, but only your lack of awareness on how to take advantage of the tokens implementation in the "Icon URL" settings, so as all the others that properly support them.

So please let's not define this as a Bug ... and let's keep this as Fixed
(as I already mentioned to you, you cannot claim or report a bug every time you cannot accomplish what you expect, but you should rather give evidence/proof of it, and this is not the case, again).

Leaflet module has thousands of adoptions, and dynamic markers (throughout tokens) is a key feature, that no body is reporting not working.
So please simply help yourself and find your way (as many others do), may be also Just keeping in mind that:

• Leaflet Formatter works with tokens from the Entity it is going to display ...
• Leaflet View Style works with tokens from the listed Replacements Patterns: of course you need to have added the field that you want to use the value from, in the list of View Fields, and have its value rendered in a row way (Image URL instead of Image HTML/img markup, etc ... ) or whatever logic you prefer to compose the dynamic URI path to the images you want to use (even SVG images can be used ... along with the https://www.drupal.org/project/svg_image → module)

I don't yet know the source of the error, but I do know the error relates to my leaflet map, so this is the correct place to work on the error message until we know more about it.

I haven't worked out the cause of the error yet. But, I can confirm that I'm getting it, and I will update again once I have steps to replicate it. As you can see from the screenshot, the icons are loading correctly, so the token is working. Interestingly, the popup works correctly when I have only 1 location, but as soon as I added a few more, I get the fatal error shown in this message.

Mystery solved. I had used a media image field which caused the URL to be encoded. The encoding broke loading the popup. Switching the field to a regular image field instead of a media reference works around the issue of the URL encoding. I might circle back on getting the media library to work with the icon.

I run into this error as well. My case is I used "Field (html DivIcon)" for Map Icon. I would like to display a list of locations with counter. So on the map, a counter is displayed along with the map icon. When I click on the map icon for a popup, it shows the error.

Please follow the below method to fix if you have same issue.

If you are having issue after updated the custom marker image then add the width and height for the marker in field configuration or views format.

@yogesh For me it didnt help, also i have different markers and icons with different sizes on the same map :/

i create them like so:

    let markerIcon = L.Icon.extend({
      options: {
        iconSize: [35, 48],
        shadowSize: [0, 0],
        iconAnchor: [17, 48],
        shadowAnchor: [0, 0],
      },
    });

and get the same error Error: Invalid LatLng object: (NaN, NaN) on clicking them ... while everything works though, its just printing in the console, it doesnt stop execution or so

I can replicate this in a fresh Drupal 10 install, using "Field (html DivIcon)" under "Icon Source":

Icon Source
  Icon Image Url/Path
x Field (html DivIcon) 
  Circle Marker (more info)

I enable Leaflet Popup > Popup Source and use the Title:

1. Click the icon on the map, and see that the popup is not displayed
2. Slide the map down to the right, and see that the label was shown, but in the upper left corner

I assume the upper left corner has the coordinate values 0, 0 when the map loads.

I am using Firefox, in case it matters. This is from the console:

Uncaught Error: Invalid LatLng object: (NaN, NaN)
    v LatLng.js:32
    unproject Projection.SphericalMercator.js:35
    pointToLatLng CRS.js:41
    unproject Map.js:989
    panInside Map.js:538
    _panOnFocus Marker.js:397
    o DomEvent.js:108
LatLng.js:32:8
    v LatLng.js:32
    unproject Projection.SphericalMercator.js:35
    pointToLatLng CRS.js:41
    unproject Map.js:989
    panInside Map.js:538
    _panOnFocus Marker.js:397
    o DomEvent.js:108

thanks @ressa ... your report better brought me to the proper direction and fix (hopefully).

Could you (everybody) QA and Review the 10.2.39 release → that I just released (very confidentially), with this last commit: https://git.drupalcode.org/project/leaflet/-/commit/a8a203b21d3932238760...
for fixing this bug?

Thanks for a fast response and fix @itamair, it works perfectly, and the Popup is placed next to the icon now, as expected.

You can see an example at the bottom of https://arst.dk/kommune/herning/barndommens-museum (under "Andre kulturtilbud ...") in the new GraphHopper route planner feature, launched yesterday.

Nice ... and thanks @ressa for marking this as Fixed,
but two final questions from me:

1. in the map you mentioned it looks the Leaflet Popup is appearing in place, but not perfectly aligned (horizontally) with the DIV Icon ... May be that is the wanted outcome or a minor issue of the Div Icon itself?
2. did you properly assign / checked Credits to all the contributors here, before setting this as Fixed?

@ressa a mean this ... (@see attachment)

Thanks for the feedback about the placing of icons, Tooltips and Popups @itamair. (I was just about to post when you added the image, and thanks for that!).

And you're right, the elements were not aligned too well. I never got around to styling the Tooltips and Popups from the ground up, but just moved the icon down and to the left. But Tooltips and Popups are aligned to a 12px icon, so it doesn't look great ... I redid the CSS for all elements, and I think it looks better now. So again, thanks for the feedback, I really appreciate it, since it gave me the push, to look at it again.

About assigning credit for an issue → , only a maintainer can do that ...

Only project maintainers can grant credit for issues in a project.
[...]
Giving credit: Check and uncheck the names of users listed in the table, depending on whether they contributed to moving the issue towards resolution. The credits will appear on the user and organization profiles when the issue status is changed to Fixed, or when it automatically changes to Closed (fixed).

Since the solution already been committed, you can probably assign credit (to you, me, greg boggs and Stockticker?), and then leave a comment. Credit should be granted when the issue automatically changes to Closed (fixed).

With a more streamlined workflow, like "Needs Review" (you) > "RTBC" (me/us) > "Fixed" (you), as in most other Drupal issue queues, credit could have been assigned per the usual routine. But I also see benefits of your slightly more anarchistic workflow of immediately committing your solutions and releasing fresh versions :)

Ok good. yes now you Leaflet Popups look perfect and well aligned!

And let's keep this as my further comment to attach the Credits to.
Well yes, I committed the new version because I clearly saw that fix...
and I (and my anarchistic workflow :-) ) was just expecting a RTBC here, before my final Fix.

Sounds great! Thanks for maintaining Leaflet, Geofield, and all the other GIS modules in Drupal, I very much appreciate it. Have a nice day :)

@itamair, i tested my example that produced the error with 10.2.39 release and the error is gone!
Thank you very much

Automatically closed - issue fixed for 2 weeks with no activity.