1

I encounter this long connecting line when plotting a GeoJSON linestring. How do I hide/remove this connecting line?

When I plot it in linestring:

enter image description here

When I plot it manually (slower than using linestring):

enter image description here

<Map
  style={{ height: "400px", width: "100%" }}
  zoom={1.5}
  center={[
    this.state.passes.coordinates[0][1],
    this.state.passes.coordinates[0][0]
  ]}
  scrollWheelZoom={false}
  maxBoundsViscosity={1.0}
  maxBounds={bounds}
>
  <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
  <GeoJSON
    color="red"
    data={this.state.passes}
    onEachFeature={function(feature, layer) {
      layer.on("click", onLineClick);
      layer.bindPopup(createPopupContent(feature));
    }}
  />
  <Marker position={this.state.marker} icon={iconSatellite} />
</Map>
  • Which part of the line you are not satisfied with? Can we see (at least parts) of source GeoJSON? – TomazicM Mar 19 at 13:32
  • I edited my question and added images to show that the horizontal line is what I want to remove. Thanks. – Sarah Mar 19 at 13:47
  • It's a consequence of satellite path crossing the meridian. You can get a hint how to solve this here: stackoverflow.com/questions/22697248/… – TomazicM Mar 19 at 13:56
  • Make the line multi-part by identifying the segment which crosses +/-180 longitude, and add stop/start points exactly on the date line. – Vince Mar 19 at 14:37
  • @Vince There were at least two more comments here. Where did they disappear? – TomazicM Mar 20 at 6:58