Esri and CesiumJS/Resium FAA Sectional Charts 404 Error

[BrandonBerisford]

Hello everyone. I am attempting to create a mapping application using CesiumJS with react through the Resium library. I am wanting to display the FAA VFR Sectional Charts located here: https://faa.maps.arcgis.com/home/item.html?id=6ab79dc5de5743adb3e3b6e3c803aa59

I'm am fairly new to Cesium/Resium. I have been reading the ArcGis/CesiumJS docs located here for loading map tiles: https://developers.arcgis.com/cesiumjs/layers/add-map-tiles/ Which of course just uses base CesiumJS. I have verified that my access tokens are correct and not null or anything. My arcgis developer token has all the available permissions that I could set. I've tried using the map tile URL for the santa monica parcels here as well: https://developers.arcgis.com/cesiumjs/layers/ and still get a 404 error. I am passing my access token as you can see, and there was 1 arcgis URL that I found that I COULD get tiles to load for. is there some kind of permissions thing I need to setup for to access those FAA tiles? It says they are public? I'm new to all this so there's gotta be something I'm missing to correctly connect to get these tiles. Thanks for any help you can provide.

import { ArcGisMapServerImageryProvider, ArcGisMapService, ImageryLayer, Ion } from 'cesium';
import { useEffect, useState } from "react";
import { Viewer } from "resium";

function App() {
  const arcGisApiKey = import.meta.env.VITE_ARCGIS_API_KEY;
  const cesiumAccessToken = import.meta.env.VITE_CESIUM_API_KEY;

  Ion.defaultAccessToken = cesiumAccessToken;
  ArcGisMapService.defaultAccessToken = arcGisApiKey;

  Ion.defaultAccessToken = cesiumAccessToken;
  ArcGisMapService.defaultAccessToken = arcGisApiKey;

  const [vfrImagery, setVfrImagery] = useState<ImageryLayer | undefined>(undefined);

  useEffect(() => {
    async function loadImagery() {
      try {
        const vfrImageryProvider = await ArcGisMapServerImageryProvider.fromUrl(
          "https://tiles.arcgis.com/tiles/ssFJjBXIUyZDrSYZ/arcgis/rest/services/VFR_Sectional/MapServer"
        );
        const vfrImageryLayer = new ImageryLayer(vfrImageryProvider);
        setVfrImagery(vfrImageryLayer);

      } catch (error) {
        console.error("Error loading imagery providers:", error);
      }
    }

    loadImagery();
  }, [arcGisApiKey]);

  return (
    <Viewer
      baseLayer={vfrImagery}
      timeline={false}
      animation={false}
      geocoder={false}
    >
    </Viewer>
  );
}

export default App;

[BrandonBerisford]

I also realize I have those two access tokens line twice. That was a typo.

[John-Foster]

@BrandonBerisfordI tried it and it worked for me. What service is giving you error 404? A 404 error indicates the resource you are attempting to request does not exist, so check your URLs and parameters. If the token was incorrect you would see an error 403 or 401.

I used this example code https://developers.arcgis.com/cesiumjs/scenes/display-a-scene/

I set my ArcGIS API key and Cesium token. Then changed

const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromUrl(
"https://tiles.arcgis.com/tiles/ssFJjBXIUyZDrSYZ/arcgis/rest/services/VFR_Sectional/MapServer"
);

and that rendered the FAA map

[BrandonBerisford]

[BrandonBerisford]

I've attached some screenshots. I've set my cesium ion token and arcgis api key up, and you can see my code below. Idk if you've tried using resium/react instead of vanilla javascript, but this should definetely be possible. I get a ton 404's for like all kinds of tiles it's trying to load it seems?

[BrandonBerisford]

const arcGisImageryProvider = await ArcGisMapServerImageryProvider.fromBasemapType(
          ArcGisBaseMapType.SATELLITE, {
            token: arcGisApiKey
          }
        );

If I try just loading the base satellite imagery as seen below it works fine, but when I try to swap to using the fromUrl and the vfr imagery, i get those 404's.

const arcGisImageryProvider = await ArcGisMapServerImageryProvider.fromBasemapType(

          ArcGisBaseMapType.SATELLITE, {

            token: arcGisApiKey

          }

        );

[BrandonBerisford]

The documentation shows that you can pass in a "token" object via the 2nd parameter to the fromUrl() function, but my typescript file is throwing a fit saying "token" doesn't exist, and in fact when I inspect the types for the 2nd parameter of type ArcGisMapServerImageryProvider.ConstructorOptions it does not contain a token field.

[BrandonBerisford · Accepted solution]

 ugh....okay well this embaressing but it's because I didn't zoom in enough....once I zoomed in the tiles loaded in. I guess they have a min/max zoom for when they start to appear.