GeoJSON and TileLayer plotting in Orbitview

[360CAS]

Have been having trouble reading Geojson in XY coords.

I managed to get it working using the code below however this garbles the tiles in my tilefile, which appears flipped, plots 1/4 the size of the matching geojson with obvious mismatches at tile boundaries.

Any thoughts on why the scales between the geojson and the tilefile would be wronf and why this setup would scramble my tilefile view

import React from 'react';
import {render} from 'react-dom';
import {load} from '@loaders.gl/core';
import DeckGL from '@deck.gl/react';
import {OrbitView} from '@deck.gl/core';
import {TileLayer} from '@deck.gl/geo-layers';
import {BitmapLayer, PathLayer} from '@deck.gl/layers';
import {COORDINATE_SYSTEM} from '@deck.gl/core';
import {GeoJsonLayer} from '@deck.gl/layers';

// Viewport settings
const INITIAL_VIEW_STATE = {
      target: [512, 512, 10],
      rotationX:360,
      rotationOrbit: 360
      ,
      minzoom: 2,
    //  latitude: 0,
     // longitude: 0,
      zoom: 2,
      maxZoom: 5,
    //  maxPitch:0,
   //   bearing: 0
};

const Geojson_URL =
  './myfile.geojson'; // eslint-disable-line


/* global window */
const devicePixelRatio = (typeof window !== 'undefined' && window.devicePixelRatio) || 1;

function getTooltip({tile}) {
  return tile && `tile: x: ${tile.x}, y: ${tile.y}, z: ${tile.z}`;
}

export default function App({ showBorder = false, onTilesLoad = null }) {
  const tileLayer =  
    new TileLayer({

    coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,

    data: ['./tiles_old_small/{z}/{x}/{y}.png'],
    maxRequests: 20,

    pickable: true,
    onViewportLoad: onTilesLoad,
    autoHighlight: showBorder,
    highlightColor: [60, 60, 60, 40],
    minZoom: 2,
    maxZoom: 5,
    _getTileData: tile => {
      if (tileWithinBounds(tile.x, tile.y, tile.z)) { return load(tile.url); }
     return null;
    },
    tileSize: 256 / devicePixelRatio,

    renderSubLayers: props => {
      const {
        bbox: {left, top, right, bottom}

      } = props.tile;

      return [
        new BitmapLayer(props, {
          data: null,
          image: props.data,
          bounds: [left, top, right, bottom]

        }),
        showBorder &&
          new PathLayer({
            id: `${props.id}-border`,
            visible: props.visible,
            data: [[[left, bottom], [left, top], [right, top], [right, bottom], [left, bottom]]],
            getPath: d => d,
            getColor: [255, 0, 0],
            widthMinPixels: 4
          })
     ];
    }
  });
  const geolayers = [

    new GeoJsonLayer({
      id: 'geojson',
      data: Geojson_URL,
      opacity: 0.8,
      stroked: false,
      filled: true,
      extruded: true,
      wireframe: true,
      getLineColor: [255, 255, 255],
      pickable: true
    })
  ];

  return (
    <DeckGL
      layers={[tileLayer,geolayers]}
      views={new OrbitView({repeat: false})}
      initialViewState={INITIAL_VIEW_STATE}
      controller={true}
      getTooltip={getTooltip}
    />
  );

}

export function renderToDOM(container) {
  render(<App />, container);

[Pessimistress]

The orientation of your tiles is controlled by the bounds prop of the BitmapLayer.

Size is controlled by tileSize in TileLayer.

[360CAS]

Hi @Pessimistress tied altering both bounds in BitmapLayer and tileSize in TileLayer neither seemed to impact the way the system rendered in any way.
On further investigation I realized the orientation of the image may be inherited from the source being a TMS file and was able to change the tile file orientation in Deck using the "URL templates now support {-y} for TMS indexing" feature to make the underlying tile image more normal.

However with tile boundries visible it seems Geojson was four times bigger and rotated. Note this Geojson file and tilefile base overlay properly in Openlayers, bokeh and leaflet. SO seems like I am doing something wrong with the geojson load here?

[Pessimistress]

I can’t tell you what’s wrong without sample data and/or screenshots. Sorry.

[geniuskim05]

Hi @360CAS @Pessimistress! I have a simple question. Is tileWithinBound function?? or Do I make function?
getTileData: tile => { if (tileWithinBounds(tile.x, tile.y, tile.z)) { return load(tile.url); } return null; },