I am using Leaflet to create a base map in order to create routes and add some markers to it.
The code is written in Next.js. Last thing I'm working on is displaying a KML file on top. I tried a bunch of plugins and my results are not exactly what I need.
Loading the KML is working, but not as intended. I'm using react-leaflet-kml https://github.com/aviklai/react-leaflet-kml
Problem is the KML file loads yellow lines that should repeat themselves over the different worlds Leaflet creates. Right now, it's only being displayed in the main one.
Leaflet has this property called worldCopyJump that allows you to move things around when changing worlds. That kind of works for markers, but again, the yellow lines are not really usable when this is set to true. https://leafletjs.com/reference.html#map-worldcopyjump
I thought some images would help to clear things up.
- My approach
https://i.imgur.com/RrWcSdk.png
- Desired effect (This is from https://kmlviewer.nsspot.net/ by the way)
https://i.imgur.com/ndkbXQT.png
I've tried pretty much all kml plugins that are available for React/Next.js and work with Leaflet.