Map Imagery Not working

CesiumJS
1

Imagery Provider is not working . . .

image
image1034×777 91.5 KB

imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"})

This was working 6 months ago but suddenly not working. I’m trying to figure out if it may be a change in the map server or provider service? Or is this something on my end?

2

It’s working you can check this sandcastle link.

2 Likes
3

Ok, thanks. I see it’s working from the link you provided. I’ll have to do some investigating on my end to figure out what is going on.

EDIT: I’ve tried looking into my .js and html code files, file permissions, server connection status, port number availability. Not finding anything wrong.

Any ideas what this could be?

4

I can’t say without individually check your code. There can be multiple reasons including firewall blockage. You should check in the “Network” section of your chrome browser’s developer tools. You can check if request is getting response or not. Let us know here if you are catching any error in the console also.

5

I verified it’s not a firewall issue. There are no error messages in the console.

Maybe explaining my working environment may help. I’m running Cesium 1.44 through nodejs. I start the js server by running >node server.js

nodejs command line

I then open a browser and enter: http://localhost:8080//index.html

In my .html file I include . . .

<script src="CesiumViewer/js/jquery-3.1.1.js"></script>
<script src="Build/Cesium/Cesium.js"></script>
<script src="./myCodeFile.js"></script>

In myCodeFile.js is where I call my Cesium API . . .

var mapType = "//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";

var viewer = new Cesium.Viewer('cesiumContainer',
   {
      requestRenderMode : true,
      maximumRenderTimeChange : Infinity,
      showTimeOptions:false,
   
      targetFrameRate: 30,
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: mapType}),
      terrainProvider: new Cesium.VRTheWorldTerrainProvider({
         url: "http://www.vr-theworld.com/vr-theworld/tiles1.0.0/73/"
      }),
      baseLayerPicker:false,
      animation: false
   }
);

etc . . .

This has been my setup for the past several years and has worked fine. Now, it’s been about 6 months since I’ve done any work with Cesium and I’ve come back to use it and I’m getting the error above.

6

I’m not sure why it is not working with you. I have few tips which you can try:

  • Use https with the url of map server.
  • Check Network section in the developers tools to monitor requests status.
  • You can try UrlTemplateImageryProvider also as given in the following code:
const viewer = new Cesium.Viewer("cesiumContainer", {
  imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"}),
  terrainProvider: new Cesium.ArcGISTiledElevationTerrainProvider({
    url:
      "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
  }),
});
1 Like
7

Your first suggestion worked! I added https to the beginning of the string.

imageryProvider: new Cesium.ArcGisMapServerImageryProvider({url: https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"})

Strange that it worked without it for a long time.

Thanks for your help!

8

Hi,
3 years past, I tested the sandbox and it is not working, is there any updates for 2025?
Thanks

9

That street view map is out of date now. I dug into this issue again last year and had to update my Cesium version and use the new URL paths.

Now this is working for me . . .

var streetmapType = “World_Street_Map (MapServer)”;
var satellitemapType = “World_Imagery (MapServer)”;

const viewer = new Cesium.Viewer(‘cesiumContainer’,
{
requestRenderMode : true,
maximumRenderTimeChange : Infinity,
showTimeOptions:false,
targetFrameRate: 30,

  animation: false,
  
  imageryProviderViewModels: [ 
        new Cesium.ProviderViewModel({
            name: "ESRI World Street Map",
            iconUrl: Cesium.buildModuleUrl("Widgets/Images/ImageryProviders/esriWorldStreetMap.png"),
            tooltip:"This worldwide street map presents highway-level data for the world.",
            creationFunction: function () {
                return new Cesium.ArcGisMapServerImageryProvider({ url: streetmapType});
            },
        }),
        new Cesium.ProviderViewModel({
            name: "ESRI World Satellite Map",
            iconUrl: Cesium.buildModuleUrl("Widgets/Images/ImageryProviders/esriWorldImagery.png"),
            tooltip:"This worldwide satellite map.",
            creationFunction: function () {
                return new Cesium.ArcGisMapServerImageryProvider({ url: satellitemapType});
            },
        })
       
  ]

}
);