wrapLongitude problem with trips-layer

[carloscascos]

Description

When animating trips of ships across the Pacific, lines were drawn across the globe when crossing longitude 180º I read that wrapLongitude: True would solve the issue, and partially did, but the animation changes , less objects are visualized and at times nothing is displayed.

Expected Behavior

I would expect the same visualization with the property set to True and False. Only the crossing lines disappearing, but it alters the result visualization significantly (seems that there is no traffic in certain days).

Repro Steps

I have a simple page example of my case at: https://github.com/carloscascos/simple_trips

1) Start the app 2 ) Press 2 (for a scenario with high number of Pacific crossings) 3 ) Press + to accelerate the loop ( data is for 60 days) 4) Repeat 1 to 3 changing the value of wrapLongitude (trips.js, line 114) and compare

Environment

• deck.gl from https://unpkg.com/deck.gl@^8.4.0/dist.min.js
• Version 89.0.4389.114 (Official Build) (64-bit)
• Linux Ubuntu 20.04.2 LTS

Logs

I recorded two videos to show the effect just changing the wrapLongitude property: wrapLongitude : True https://www.dropbox.com/s/xedhmxn18f3osow/rec-area%20%28true%29.webm?dl=0 wrapLongitude : False https://www.dropbox.com/s/we03sfmvqx0x9ck/rec-area%20%28false%29.webm?dl=0

[Pessimistress]

There is unfortunately no quick fix for this bug. Basically the result returned by getTimestamps is not split at the Mercator bounds with the geometry.

As a temporary work around you'll need to disable wrapLongitude and add/subtract 360 to the offending longitudes (e.g. instead of drawing a path from -170,0 to 170,0, change the destination to -190,0).

[carloscascos]

Thanks, we will try that workaround. Rgds, \

[EmilyFitzgerald]

@Pessimistress - If I can add a question to this (happy to start a new question if that is more appropriate). I've got a map where I have added 360 to the longitudes, in order to have the arcs and the trips travel across the Pacific (it's showing movement from the US to Australia and South East Asia). However, on doing this, when I try and zoom in to the United States, the arcs or trips move across to the next map in the wrap/loop, and so I can't zoom in on the map.

Short video to show what is happening: https://user-images.githubusercontent.com/44518869/177279237-7b22769e-ebc9-4c6c-8377-56b1cd04504c.mp4

Code for trip layer:

import React, { useState } from "react";
import "mapbox-gl/dist/mapbox-gl.css";
import Map from "react-map-gl";
import DeckGL from "@deck.gl/react";
import { ScatterplotLayer, PathLayer, ArcLayer } from "@deck.gl/layers";
import { TripsLayer } from "@deck.gl/geo-layers";
import exampleData from "../data/example.json";

const accessToken = process.env.NEXT_PUBLIC_MAPBOX_ACCESS_TOKEN;

function MyMap(props) {
  const [initialViewState, setInitialViewState] = useState({
    longitude: 180,
    latitude: 0,
    zoom: 1.5,
    minZoom: 1.5,
    maxZoom: 16,
    pitch: 5,
    bearing: 0,
  });

  const tripsLayer = new TripsLayer({
    id: "trips-layer",
    data: exampleData,
    pickable: true,
    getPath: (d) => d.waypoints.map((p) => p.coordinates),
    getTimestamps: (d) => d.waypoints.map((p) => p.timestamp),
    getColor: (d) => d.map_color,
    wrapLongitude: false,
    opacity: 0.6,
    widthMinPixels: 8,
    jointRounded: true,
    capRounded: true,
    fadeTrail: true,
    trailLength: 0.8,
    currentTime: props.year,
    visible: props.trips,
  });

  return (
    <div
      className="d-flex justify-content-center"
      style={{ paddingTop: "0.5em" }}
    >
      <div
        className="col-12 border"
        style={{ height: "90vh", width: "95vw", position: "relative" }}
      >
        <DeckGL
          controller={true}
          initialViewState={initialViewState}
          layers={[tripsLayer]}
        >
          <Map
            reuseMaps
            mapboxAccessToken={accessToken}
            mapStyle={"mapbox://styles/mapbox/light-v10"}
            preventStyleDiffing={true}
          />
        </DeckGL>
      </div>
    </div>
  );
}

Is there any advice on how to stop this happening?