OrthographicView: Can it repeat like MapView or constrain dragging in React?

[cyocun]

Hi, I'm working with OrthographicView in a React project using deck.gl and have two questions:

Is it possible to enable "repeat" behavior (wrap-around) for OrthographicView, similar to how MapView handles tiles?
If not, can I constrain dragging so that tiles stop at the edges of the screen, preventing them from being dragged out of bounds?
I've checked the documentation for OrthographicView and MapView but couldn't find relevant details for these features.

Below is my current React setup:

import React from 'react';
import { DeckGL } from '@deck.gl/react';
import { OrthographicView } from '@deck.gl/core';
import { TileLayer } from '@deck.gl/geo-layers';

const INITIAL_VIEW_STATE = {
  target: [0, 0, 0],
  zoom: 0,
  minZoom: -5,
  maxZoom: 5,
};

const App = () => {
  return (
    <DeckGL
      initialViewState={INITIAL_VIEW_STATE}
      views={new OrthographicView({ })}
      controller={true}
      layers={}
    />
  );
};

export default App;
If these features are not directly supported, I'd appreciate any tips or workarounds for implementing them in a React context. Thank you for your guidance!

[Pessimistress]

add constraints to view state

[cyocun]

@Pessimistress

Thank you for sharing the link!
I wasn’t able to find this information myself, so it’s been incredibly helpful 🙏

By the way, would it be difficult to control two maps simultaneously?
Specifically, I’m thinking about a setup where interactions with one map are reflected on the other. If you have any suggestions or examples, I’d greatly appreciate your insights!

[grahambates-code]

You can do that using multiple views , see here

https://deck.gl/examples/multi-view

[cyocun]

I came up with an idea to offset the TileLayer in a 3x3 grid instead of using repeat:

const offsets = [
  [-1, -1], [0, -1], [1, -1],
  [-1, 0], [0, 0], [1, 0],
  [-1, 1], [0, 1], [1, 1],
];

The default coordinate is set to the center [0, 0]. The size of each tile image is 256x256px.

This approach works nicely at zoom: 1, but when I zoom in or out, incorrect tile images are displayed.
Do you have any idea what might be causing this issue?

const tileLayer = new TileLayer({
 id: "tileLayer",
 data: "/til/{z}/{y}/{x}.jpg",

 renderSubLayers: (props) => {
   const {
     tile: {boundingBox},
     data,
     ...otherProps
   } = props;

   const [[left, bottom], [right, top]] = boundingBox;

   const tileWidth = right - left;
   const tileHeight = top - bottom;

   const offsets = [
     [-1, -1], [0, -1], [1, -1],
     [-1, 0], [0, 0], [1, 0],
     [1, 1], [0, 1], [1, -1],
   ];

   const subLayers:BitmapLayer[] = [];

   offsets.forEach(([cx, cy]) => {
     const offsetLeft   = left   + cx * tileWidth;
     const offsetRight  = right  + cx * tileWidth;
     const offsetBottom = bottom + cy * tileHeight;
     const offsetTop    = top    + cy * tileHeight;

     subLayers.push(
       new BitmapLayer(
         {...otherProps},
         {
           id: `${props.id}-bitmap-${cx}-${cy}`,
           image: data,
           bounds: [offsetLeft, offsetTop, offsetRight, offsetBottom],
         }
       )
     );
   });

   return subLayers;
 },
});