How can I draw a path through the "edge" of a Leaflet map?

Question

At low zoom levels, Leaflet "wraps" multiple copies of the base tile layer, but not the Polylines I draw (in Panes) on top of it. This makes drawing paths near the 180th meridian jump across the entire map:

(screencaps from either edge of the default "copy", red line is ~ 180th meridian)

What I'm trying to get:

Codepen showing the issue, along with the obligatory source code:

const MyMap = ({lines}) => (
  <LeafletMap center={[0, 0]} zoom={1}>
    <TileLayer
      attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
      url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
      />
    <Pane>
      {lines.map((points, i) => (
        <Polyline key={i} positions={points} color="blue" weight={4} lineCap="square" />
      ))}
    </Pane>
  </LeafletMap>
);

It seems that leaflet chooses one "copy" of the base tiles as the default, bound to -180, 180 longitude, and only draws lines/markers etc on top of that one.

How can I draw a polyline between a point on one side of the 180th meridian, to a point on the other side of the 180th meridian, without it streaking across the width of the map?

Edit:

I can skip drawing the line between the 2 points on either side (removing the ugly horizontal line) but this still leaves me with half a polyline at opposite ends of the map. I need the whole polyline in one place.

Yes absolutely; but with a repeating map background, that doesn't solve the problem - just removes the horizontal line. There is still HALF of the path at either edge of the map. — Alex McMillan, Sep 04 '19 at 07:47
Possible duplicate of [Wrapping lines/polygons across the antimeridian in Leaflet.js](https://stackoverflow.com/questions/40532496/wrapping-lines-polygons-across-the-antimeridian-in-leaflet-js) — IvanSanchez, Sep 05 '19 at 08:03

How can I draw a path through the "edge" of a Leaflet map?

0 Answers0