How to use Natural earth tiles with cesium?

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I am trying to use Natural earth Tiles with cesium in offline mode.

Vector tiles over this website I would love to use in our application.

But I am not sure what is correct way to use. Any help regarding this are welcome.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Context:-

I am trying to have offline map with cesium which will have state and country district boundaries and probably major cities. Alternative idea might also be helpful

4. The Cesium version you’re using, your operating system and browser.

2

It looks like part of that is raster imagery, which Cesium supports quite well! In fact there’s a Sandcastle example using Natural Earth imagery:

For vector tiles, there’s currently only experiment support for vector tiles, in the 3D Tiles format, not the Mapbox format. So I don’t think there’s an easy way to display those in CesiumJS right now.

Although there seems to be a MapboxImageryProvider but I think that might also be specifically for raster imagery:

https://cesiumjs.org/Cesium/Build/Documentation/MapboxImageryProvider.html?classFilter=MapboxImageryProvider

3

Thanks omar for your suggestion. I will try

I am new to this. Is there any opensource map tiles till city level in from reliable source which can be compatable with cesium.

Any suggestions are really helpful.

Thanks,

Ankur

4

You can actually see all the built-in imagery providers by clicking on the little satellite icon in the top right and bringing up this menu:

imagery.png
imagery.png864×1035 782 KB

You can click on OpenStreetMap there to use their imagery in Cesium. You can also initialize it in the viewer this way:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

imageryProvider: Cesium.createOpenStreetMapImageryProvider({

url : ‘https://a.tile.openstreetmap.org/’

})

});

``

There’s more info on that in the docs:

https://cesiumjs.org/Cesium/Build/Documentation/createOpenStreetMapImageryProvider.html?classFilter=openstr

You might also find this imagery layers tutorial useful:

Hope this helps!

5

So I have tried to implement just the natural earth since I am having issues with tileserver.php it connects but the reponse is blank. I need to run offline(no Web connections just local) I found the snippet

 imageryViewModels.push(new Cesium.ProviderViewModel({
     name: "Natural Earth\u00a0II",
     iconUrl: Cesium.buildModuleUrl("Widgets/Images/ImageryProviders/naturalEarthII.png"),
     tooltip: "Natural Earth II, darkened for contrast.\nhttp://www.naturalearthdata.com/",
     creationFunction: function() {
         return Cesium.TileMapServiceImageryProvider.fromUrl(
             Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
         );
     }
 }));

but when I implement this in my code I can get the icon to load but if I click to load my console states
Cesium.TileMapServiceImageryProvider.fromUrl is not a function I have attempted to make it an async function and add the await keyword but then I get mostly the same
unhandled Promise rejection Cesium.TileMapServiceImageryProvider.fromUrl is not a function
Any suggestins

6

Hi @Brian_Benefield, welcome to the community!

What version of Cesium are you using? I am able to get that snippet to run OK in v1.106. Here is a Sandcastle link demonstrating it. Or if you have a local build of Cesium running, you can use this link to be fully offline.

7

V.1.94.3 per package.json I did manage to get it working with:
imageryProviderViewModels.push(new Cesium.ProviderViewModel({
name: “Natural Earth\u00a0II”,
iconUrl: Cesium.buildModuleUrl(“Widgets/Images/ImageryProviders/naturalEarthII.png”),
tooltip: “Natural Earth II, darkened for contrast.\nhttp://www.naturalearthdata.com/”,
creationFunction: () => new Cesium.UrlTemplateImageryProvider({
url : Cesium.buildModuleUrl(‘Assets/Textures/NaturalEarthII’) + ‘/{z}/{x}/{reverseY}.jpg’,
tilingScheme : new Cesium.GeographicTilingScheme(),
maximumLevel : 5
})

As far as adding an off public internet option I have a Tileserver.php tile server running but can’t seem to get the two talking correctly is this option not possible ie does Tileserver.php not work for serving to cesium? Does it not have the correct file format served? I have used both the image/pbf and image webp along with WMTS service endpoint and I am only getting blank tiles.