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

I also have this bug in D9 and I had it in leaflet version 2 as well as 10 (3?).

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.

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.
This Leaflet demo view is fully working with Dynamic Markers throughout Tokens:
https://www.geodemocracy.com/drupal_geofield_stack_demo/web/geoplaces-ma...

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 for choosing the icons.

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.

If you're encountering issues after updating the custom marker image, consider adding the width and height for the marker in the field configuration or views format. This should help resolve any JavaScript issues related to marker clicks.

@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 seem to 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 (the second map, under "Andre kulturtilbud ...") in the new GraphHopper route planner feature, launched yesterday: https://arst.dk/kommune/stevns/stevns-fyr#plan

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 has 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 :)

PS. Did you get a chance to try the route planner with GraphHopper, and do you know if there are other services, which offer the same feature (i.e. feed it a number of locations and get a route proposed) for free?

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

Hi, im getting the same JS error when i click on a custom mark, im using Drupal 10.4.5, PHP 8.3.21 and Leaflet 10.3.5

#26 same here!

Same as #26, on Drupal 11.2.4 and Leaflet 10.3.9.
And same as #13, adding width and height resolve the JavaScript issues.