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
Solved! Go to Solution.
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.
Hi Undral,
You are correct. Setting sublayers visibility resolves the issue. Thanks for your help!
Thanks,
Rauf
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
}
});
});
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!
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.
Hi Undral,
You are correct. Setting sublayers visibility resolves the issue. Thanks for your help!
Thanks,
Rauf