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?]