Consuming service with SR 4269 as baseliner for Basemap

649
4
Jump to solution
01-15-2021 01:04 PM
by Anonymous User
Not applicable

Hello Friends,

I am using ArcGis Javascript API 4.16 and In my project I am having issue consuming the service https://imagery.pasda.psu.edu/arcgis/rest/services/pasda/NAIP2019/MapServer (Spatial Reference 4269) as a base layer for my basemap. Whereas I am able to consume the following service https://gis.penndot.gov/arcgis/rest/services/basemaps/penndotbasemap/MapServer  (Spatial Reference 102100 ). I have tried using both the service in the sandbox https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=intro-mapview and only the one with (SR 102100) is working. Below is the code snippet for utilizing the above services in the code sandbox

require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/MapImageLayer",
"esri/layers/TileLayer"
], function (Map, MapView, Basemap, MapImageLayer, TileLayer) {
var map = new Map({
basemap: new Basemap({
baseLayers: [
new MapImageLayer({
url:
"https://imagery.pasda.psu.edu/arcgis/rest/services/pasda/NAIP2019/MapServer",
title: "Basemap"
})
],
title: "basemap",
id: "basemap"
})
});

 

For the service with SR 102100

require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/MapImageLayer",
"esri/layers/TileLayer"
], function (Map, MapView, Basemap, MapImageLayer, TileLayer) {
var map = new Map({
basemap: new Basemap({
baseLayers: [
new TileLayer({
url:
"https://gis.penndot.gov/arcgis/rest/services/basemaps/penndotbasemap/MapServer ",
title: "Basemap"
})
],
title: "basemap",
id: "basemap"
})
});

In my project I am adding the above services in the basemap which is made availbel through basemap widget.

Any help on the above issue is much appreciated.

Thank You!

Below issue is similar to the one I am having

@https://community.esri.com/t5/arcgis-api-for-javascript/switch-basemap-with-different-wkid-in-basema...

 

0 Kudos
2 Solutions

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

It will look different because you are setting the visibility of all sublayers. With your code, all layers will be visible. You should set the visible=true to only for the sublayers you want. 

 

In this test app, I added a LayerList and as you can see the behavior is same as the 3.x MapViewer. 

View solution in original post

0 Kudos
by Anonymous User
Not applicable

Hi Undral,

You are correct. Setting sublayers visibility resolves the issue. Thanks for your help!

Thanks,

Rauf

View solution in original post

0 Kudos
4 Replies
UndralBatsukh
Esri Regular Contributor

Hi there, 

Not sure what problem you are running into. I am able to add and view the basemap in 4269. Looks like the sublayer visibilities are set to false. So I slightly changed your code to display the fourth sublayer in the MapImageLayer as shown below.

Hope this helps,

-Undral

 

 var map = new Map({
  basemap: new Basemap({
  baseLayers: [
   new MapImageLayer({
    url:        "https://imagery.pasda.psu.edu/arcgis/rest/services/pasda/NAIP2019/MapServer",
    sublayers: [{
      id: 4,
      visible: true
    }],
    title: "Basemap",
    visible: true
   })
 ],
 spatialReference: {
   wkid: 4269
 }
 });
});

 

0 Kudos
by Anonymous User
Not applicable

Hi Undral,

Thanks a lot for your response. 

I did as you mentioned and set the visibility of the sublayers and now I see some images on the map but it doesn't look how it appears on the Map when we go the service url and do view in ArcGis online map viewer here  https://www.arcgis.com/home/webmap/viewer.html?url=https%3A%2F%2Fimagery.pasda.psu.edu%2Farcgis%2Fre... . In this sandbox https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=intro-mapview,...Below is the code which I added as per your instructions

require([
"esri/Map",
"esri/views/MapView",
"esri/Basemap",
"esri/layers/MapImageLayer",
"esri/layers/TileLayer"
], function (Map, MapView, Basemap, MapImageLayer, TileLayer) {
var map = new Map({
basemap: new Basemap({
baseLayers: [
new MapImageLayer({
url:
"https://imagery.pasda.psu.edu/arcgis/rest/services/pasda/NAIP2019/MapServer",
sublayers: [{ id: 4, visible: true },
{ id: 3, visible: true },
{ id: 2, visible: true },
{ id: 1, visible: true },
{ id: 0, visible: true }
],
visible: true
})
],
spatialReference: { wkid: 4269 },
title: "basemap",
id: "basemap"
})
});

var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
});
});

Thank You!

0 Kudos
UndralBatsukh
Esri Regular Contributor

It will look different because you are setting the visibility of all sublayers. With your code, all layers will be visible. You should set the visible=true to only for the sublayers you want. 

 

In this test app, I added a LayerList and as you can see the behavior is same as the 3.x MapViewer. 

0 Kudos
by Anonymous User
Not applicable

Hi Undral,

You are correct. Setting sublayers visibility resolves the issue. Thanks for your help!

Thanks,

Rauf

0 Kudos