Failed to load ArcGIS JS API polar satellite map

Question

I am trying to draw satellite map with polar (Arctic) projection using ArcGIS JS API. Firstly I load default (Mercator) satellite map and it works fine. Then I change map spatialReference to polar the following way:

require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Polygon",
"esri/geometry/SpatialReference",
"esri/layers/FeatureLayer"
],
function (Map, MapView) {
    var map = new Map({
        basemap: "satellite"
    });

    var viewSpatialReference = 3995;
    var centerPoint = {
        x: 0,
        y: 0,
        spatialReference: viewSpatialReference
    };

    var view = new MapView({
        container: "map",
        map: map,
        spatialReference: viewSpatialReference,
        center: centerPoint,
        scale: 2000
    });
});

When I try to load this map in browser, I get blank map and two errors in console

[esri.views.2d.layers.TileLayerView2D] #resolve() Failed to resolve layer view (layer title: 'World Imagery', id: 'satellite-base-layer') message: "The spatial reference of this layer does not meet the requirements of the view"

dojo.js:310 [esri.views.LayerViewFactory] Failed to create view for layer 'World Imagery, id:satellite-base-layer' of type 'tile'. message: "The spatial reference of this layer does not meet the requirements of the view"

Does anyone have experience working with ArcGIS JS for Arctic region? My original idea was to redraw basic satellite map using ArcGIS; I hope it is possible.

Answer 1

In your Map constructor, when you have the property basemap: "satellite" - you're loading the default ArcGIS Online Satellite Basemap which is in Web Mercator. The API will not reproject the basemap, so that's where your error is coming from. To solve the problem, do not include that line, and add your own tiled [basemap] layer that is already projected to your desired spatial reference (3995).

You can either create your own tiled service, or find one to use. Through searching I found a service that the NOAA provides. So just grab the layer from there and add it as a layer:

var map = new Map({
  layers: [
    new TileLayer({
      url:
        "https://gis.ngdc.noaa.gov/arcgis/rest/services/arctic_ps/arctic_basemap/MapServer"
    })
  ]
});

Full example here. Hope this helps!