I've been breaking my head over a simple generalization of the combination of several Leaflet examples:

  • Make a polyline between markers,
  • But use Leaflet.MarkerCluster as we may have multiple in exactly identical locations,
  • Have multiple custom markers,
  • Number each marker along the path,
  • Have several of such numbered paths,
  • Read all the needed data from a file (dynamic, geoJson).
  • Center the map neatly around all the data.

Now for the life of me I can't get this to work: If I have a single path, it works swimmingly. If I have more than one path, the first is made 100% correctly (locations, icons, titles, popups, and polyline) and all the rest is missing; plus the 'fit bounds' fails so it's at the default zoom and location.

I've simplified my problem to the extent that I'm only using Leaflet and the Leaflet.MarkerCluster plugin --- it's not the different markers and numbers on them where it goes wrong. [The CSS of that plugin is also missing/unnecessary; zoom in and there's no clustering anyway.]

Here's a CodePen, https://codepen.io/Marvino-il-Marziano/pen/YvQbqR ...

I'm wondering if I'm mis-initializing a variable so it can take only one value where it should be an array? Because I don't seem to be overwriting something (as the first not the last data appear). [Possibly significant: If I start the first loop-variable (j= 0,1,2) at 1 instead of 0, I get a blank result --- or is that insignificant, just JS terminating arrays when it finds a null, so here it's the index-0?]


OK, problem solved: It was indeed a failure to initialize.

Specifically, latlngs[j] wasn't initialized, only its container (by latlngs=[[]];). It seems that upon initializing the container, JS silently initializes the minimum useful amount (namely 1, the zero-indexed latlngs[0]=[]), which makes sense resource-wise and usability-wise. [If it hadn't initiated that first one, I'd have immediately spotted the problem, though!]

So the solution is simply to insert latlngs[j]=[]; at the beginning of the outer loop.

If it helps other beginners: The way I found my core problem was [prompted by https://stackoverflow.com/questions/603987/what-is-the-javascript-equivalent-of-var-dump-or-print-r-in-php ] through using my browser's Inspect/ Inspect Element function, which has a Console; and the Console gave

TypeError: latlngs[j] is undefined [Learn More]

so I didn't even have to do what the linked suggestion was (namely, make a variable to report a state and read it in the Console).

[I actually did other things to try to work it out, probably the most useful (but still superfluous) being to manually perform the outer loop (I mean: splitting the data in three separate variables; then making two copies of the loop, preceding each one consecutively by var j=0;, then j=1, and j=2; and adjusting the name of the data-variable correctly). It failed in the same way as the original problem and for the same reason.]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.