simple layer loading?

CesiumJS
1

Hello everyone,

i want to load a simple layer onto the sphere without zoom capability.

for my use, i don't need a very details maps, but a simple one, with only country visible. I found a png file that fit my need, but i don't know how i can load it and apply it on the sphere.

here is an example of what i need : http://armsglobe.chromeexperiments.com/

is it possible ? i cant find a simple imageprovider that allow me to load only a simple png/jpg file.

if it's not possible, do you know an image provider that is very simple as armsglobe or another way to do it ?

thanks in advance !

2

If you just want to overlay a single image on the globe, use either SingleTileImageryProvider or an Entity with RectangleGraphics.

3

Thanks it was easier that i was expecting. it's working, but i have an issue with alignement of the geoloc:

i put openstreetmap as an image provider and added mine above it with some alpha. You can see what i mean : http://img42.com/Gtxtp

how can i realign my png with the actual geomap ? (i'm using geo coordinate)

thanks in advance !

4

Hmm. Maybe a geographic projection issue? Not sure.

5

Definitely looks like a projection issue. Are you able to figure out what projection scheme was used for your image? Once you figure that out you can change scene.MapProjection to the appropriate one for your image.

6

Can you post a Sandcastle sample of your code and include the image?

I’m wondering if the image you’re using is actually a fully geo-rectified image designed to cover the entire globe. Often times the north and south poles are not completely represented in images that are not specifically intended to be used as an imagery layer. Without seeing the actual image there is no way to tell for sure.

7

Hello, thanks for your time,

i'm using this image : https://github.com/dataarts/armsglobe/blob/master/images/map.png

i can't post on the Sandcastle because of the same origin policy (image won't load) but here is a simple code (you can download the image then use it in localhost):

var viewer = new Cesium.Viewer('cesiumContainer', {
  sceneMode: Cesium.SceneMode.SCENE2D,
    baseLayerPicker : false,
  imageryProvider: new Cesium.OpenStreetMapImageryProvider()
});

var layers = viewer.imageryLayers;

var outline = layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
    url : ‘https://github.com/dataarts/armsglobe/blob/master/images/map_outline.png’,
    maximumLevel : 8,
    credit : ‘dataarts/armsglobe’
}));
outline.alpha = 0.5;
outline.brightness = 2.0;

i look into the mapprojection but it's a bit over my head :confused:

8

I looked the the image. Your problem is that the image is not orientated at -180 to 180 longitude. To use that image you’re going to need to use photoshop or whatever your preferred image editor is to cut a 29 pixel column from the right side of the image, shift the rest of the image over to the right edge then paste that column on the left edge.

9

Hello,

thanks i will try that. how did you manage to find that it wasnt oriented -180/180 ? and more important how did you figure out the 29 pixels ?

10

When I viewed the image in Cesium 2D I noticed everything was being projected correctly, but offset a bit.

I then loaded your image in photoshop and created a base layer from an image I downloaded from NASAs Visual earth collection. (I did have to scale NASA’s image to be the same width)

I made your image semi-opaque and just kept nudging your image around until it lined up with NASA’s.

From there it’s just counting how many pixels I had moved it.

Now you know the secret to my madness :slight_smile:

11

ahaha ok, thanks a lot anyway for your help :slight_smile: