error using Multi Layers at Deck.gl

[starfall124]

import React, { useContext } from "react";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import ReactMapGL from "react-map-gl";
import DeckGL from "@deck.gl/react";
import {
  HeatmapLayer,
  //HexagonLayer
} from "@deck.gl/aggregation-layers";
import {
  PathLayer,
  IconLayer,
  TextLayer,
  PolygonLayer,
  //   ScatterplotLayer,
} from "@deck.gl/layers";

import { useSetInitialCoordinates, useFindMapCenter } from "./hooks";

import { DataviewContext } from "../../../../../../context";

import car from "./assets/car.svg";

export const Map = () => {
  const {
    currentLegendInfo: { unFilteredCoordinates, filteredCoordinates },
    filterID,
    mapViewState,
    // mapStyle,
    useFiltered,
  } = useContext(DataviewContext);

  useSetInitialCoordinates();
  useFindMapCenter();

  const getLayers = () => {
    const heatmap_layer = new HeatmapLayer({
      id: "heatmapLayer",
      data:
        filterID === "Safety"
          ? useFiltered
            ? filteredCoordinates
            : unFilteredCoordinates ?? []
          : [],
      getPosition: (d: any) => d.coordinates?.[0] ?? [],
      pickable: true,
    });

    const incident_text = new TextLayer({
      id: "text-layer",
      data:
        filterID === "Safety"
          ? useFiltered
            ? filteredCoordinates
            : unFilteredCoordinates ?? []
          : [],
      pickable: true,
      getPosition: (d: any) => d.coordinates?.[0] ?? [],
      getText: (d: any) => "*",
      getColor: [255, 0, 0, 0.0],
      getSize: 20,
      getAngle: 0,
      getTextAnchor: "middle",
      getAlignmentBaseline: "center",
    });

    const icon_layer = new IconLayer({
      id: "poi-icon-layer",
      data:
        filterID === "Traffic"
          ? useFiltered
            ? filteredCoordinates
            : unFilteredCoordinates ?? []
          : [],
      pickable: true,
      getIcon: (d: any) => ({
        url: car,
        width: 120,
        height: 120,
        anchorY: 128,
        mask: true,
      }),
      sizeScale: 6,
      getPosition: (d: any) => d.coordinates,
      getSize: (d: any) => 5,
      getColor: (d: any) => d.color ?? [108, 99, 255],
    });

    const path_layer = new PathLayer({
      id: "path-layer",
      data:
        filterID === "Speed"
          ? useFiltered
            ? filteredCoordinates
            : unFilteredCoordinates ?? []
          : [],
      widthScale: 20,
      widthMinPixels: 2,
      getPath: (d: any) => d.coordinates,
      getColor: (d: any) => (d.color?.length > 0 ? d.color : [50, 170, 199]),
      pickable: true,
    });

    const qot_path_layer = new PathLayer({
      id: "qot-layer",
      data:
        filterID === "Quantity of Travel"
          ? useFiltered
            ? filteredCoordinates ?? []
            : unFilteredCoordinates ?? []
          : [],
      widthScale: 20,
      widthMinPixels: 2,
      getPath: (d: any) => d.coordinates,
      getColor: (d: any) => (d.color?.length > 0 ? d.color : [50, 170, 199]),
      pickable: true,
    });

    const qol_path_layer = new PathLayer({
      id: "qol-layer",
      data:
        filterID === "Quality of Travel"
          ? useFiltered
            ? filteredCoordinates ?? []
            : unFilteredCoordinates ?? []
          : [],
      widthScale: 20,
      widthMinPixels: 2,
      getPath: (d: any) => d.coordinates,
      getColor: (d: any) => (d.color?.length > 0 ? d.color : [50, 170, 199]),
      pickable: true,
    });

    const daily_delay_path_layer = new PathLayer({
      id: "daily-delay-path-layer",
      data:
        filterID === "Daily Delay"
          ? useFiltered
            ? filteredCoordinates ?? []
            : unFilteredCoordinates ?? []
          : [],
      widthScale: 20,
      widthMinPixels: 2,
      getPath: (d: any) => d.coordinates,
      getColor: (d: any) => (d.color?.length > 0 ? d.color : [50, 170, 199]),
      pickable: true,
    });

    const pop_layer = new PolygonLayer({
      id: "polygon-layer-" + new Date().getTime(),
      data:
        filterID === "Population"
          ? useFiltered
            ? filteredCoordinates
            : unFilteredCoordinates ?? []
          : [],
      pickable: true,
      stroked: true,
      filled: true,
      wireframe: true,
      lineWidthMinPixels: 1,
      getPolygon: (d: any) => d.coordinates?.[0] ?? [],
      getFillColor: (d: any) => d.color,
      getLineColor: (d: any) => d.color,
      getLineWidth: 1,
    });

    switch (filterID) {
      case "Safety":
        return [heatmap_layer, incident_text];
      case "Traffic":
        return [icon_layer];
      case "Speed":
        return [path_layer];
      case "Quantity of Travel":
        return [qot_path_layer];
      case "Quality of Travel":
        return [qol_path_layer];
      case "Daily Delay":
        return [daily_delay_path_layer];
      case "Population":
        return [pop_layer];
    }
  };

  const layoutBreakpoint = useMediaQuery("(max-width: 1200px)");

  return (
    <DeckGL
      layers={getLayers()}
      initialViewState={mapViewState}
      controller={true}
      style={{
        height: layoutBreakpoint ? "67%" : "100%",
        minHeight: layoutBreakpoint ? "67%" : "100vh",
        width: "100%",
        zIndex: 0,
      }}
      getTooltip={({ object }: any) =>
        object && {
          html: `<div>${object.message}</div>`,
          style: {
            position: "absolute",
            pointerEvents: "none",
            backgroundColor: "#000",
            color: "#fff",
            padding: "1em",
            width: "20em",
            whiteSpace: "pre-line",
          },
        }
      }
    >
      <ReactMapGL
        mapStyle="mapbox://styles/jdenn31/ck3d5f0qz0t591clkuxdrgon9"
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        width={250}
        height={200}
      >
        <div
          style={{
            position: "relative",
            right: 0,
          }}
        ></div>
      </ReactMapGL>
    </DeckGL>
  );
};

I defined PathLayer and PolygonLayer.
But when I navigate between PathLayer and PolygonLayer, I am getting the below issue.

@Pessimistress Could you help me to fix this?

[kylebarron]

In general invalid latitude means that your coordinates are out of bounds of the view you're using. For example rendering points outside the -180, -90, 180, 90 bounding box acceptable in geospatial coordinates.

[starfall124]

thanks for your reply.
what about assertion failed?

[kylebarron]

You should try to fix the other error, since they're probably related