Getting Distorted Tiles while zooming

[SurabhiJain]

As I have created map tiles from Map Tilers and use that tiles on OSM 3D globe. I am able to get map as well as tiles while zooming. But the issue is that Map is repeated 4 times on same globe at different places and except one map all others are maps are divided into 2 parts. While zooming that, tiles are coming but in distorted manner like as map. I can't understand that it is because of Map projection or what reason behind it? If it is so then how to resolve this problem?

[kring]

Sounds like a mismatched tiling scheme or extent. Can you link me to an example?

[SurabhiJain]

I have downloaded Cesium-b14 and then I want to get my own Imagery layers therefore I directly went to below link:

Cesium-b14//Apps/Sandcastle/gallery/Imagery Layers Manipulation.html

Then made changes in code in one html and in one js files given as below:

1) Cesium-b14\Source\Scene\OpenStreetMapImageryProvider.js

  code I have added is :
   var url = defaultValue(description.url, 'http://localhost//tile/');  in place of  
   var url = defaultValue(description.url, 'http://tile.openstreetmap.org/'); 

2) Cesium-b14\Apps\Sandcastle\gallery\ImagerLayersManipulation.html

  code I have added is: 
 function setupLayers() { 
  -
  -
  -
  addBaseLayerOption(
            'test',
            new Cesium.OpenStreetMapImageryProvider({
                proxy: new Cesium.DefaultProxy('/proxy/')
            }));
   -
   -
 }

Note: The url http://localhost//tile/ mean: I have created map tiles from MapTiler-Tile Generator for Map Mashups and saved into a folder name as tile. This folder has tiles in x y z format upto 14 levels. I am trying to import these tiles into Cesium 3D globe but on that globe 3 India maps are coming at different places from N pole to S pole and map is divided into 2 parts horizontally. While zooming any one of map among three then
tiles are coming as in x y z format. But my issue is that why is the map divided into two parts? It may happen because of different map projection as Spherical mercator and Geo coordinate system, I am not able to find out the problem behind it.

[SurabhiJain]

[kring]

With tiles creates by MapTiler, you need to use TileMapServiceImageryProvider, not OpenStreetMapImageryProvider. OSM tiles are numbered from the North, TMS tiles are numbered from the South. I'm going to close this issue, since it doesn't appear to be a bug in Cesium. If switching imagery providers doesn't address your issue, let's continue the discussion in the Cesium forum: http://cesium.agi.com/forum.html

[SurabhiJain]

Thanks, but with tiles creates by MapTiler, its not necessary to use TileMapServiceImageryProvider because Mercator tiles compatible with Google, Yahoo or Bing Map and OpenstreetMap. I have generated tiles of following kind: Google Maps compatible(Spherical Mercator).

As per your suggestion I have used TSM also but its also not working, infect through TSM not a single tile is coming

[kring]

I still believe that TileMapServiceImageryProvider is the correct one to use with MapTiler generated tiles with the Spherical Mercator profile. What error or problem are you using when you try?

[SurabhiJain]

Thanks, I have tried to put tiles with TileMapServiceImageryProvider and now I am able to see only one tile. While zooming no further tiles are coming and errors are as follows shown in firebug:

1) "NetworkError: 404 Not Found - http://localhost/Cesium-b14//Apps/Sandcastle/images/cesium_maptiler/gp/3/2/4.jpg"

2) "NetworkError: 404 Not Found - http://localhost/Cesium-b14//Apps/Sandcastle/images/cesium_maptiler/gp/3/1/4.jpg"

3) An error occurred in "TileMapServiceImageryProvider": Failed to obtain image tile X: 2 Y: 3 Level: 3.

4) An error occurred in "TileMapServiceImageryProvider": Failed to obtain image tile X: 1 Y: 3 Level: 3.

Note: while creating tiles from MapTilers there is level 3 but X and Y values are different so the problem is how to get these tiles which are not generated by MapTilers also. Similar types of errors are coming at every level.

[kring]

I just tried generating a tile set for an area in India using MapTiler, and it went well. My source data was a Landsat 7 tile downloaded with the USGS Earth Explorer: http://earthexplorer.usgs.gov/. I'll walk through the MapTiler options I chose so we can discover what you did differently.

• For the tile profile, I chose "Google Maps compatible (Spherical Mercator)".
• I added my input file to the "Source data files" list. In my case it was a JPG with auxiliary georeferencing information (provided by USGS).
• I kept the default Spatial reference system that MapTiler selected.
• I changed the "Minimum Zoom" field to 0. If I don't do this, Cesium will still show the imagery once I zoom in far enough - that is, once I reach the specified minimum view - but lots of errors will show up in the console as it tries to download missing tiles, and it won't show the imagery when zoomed out.
• All other options were left at their defaults.

I then modified the "Imagery Layers" Sandcastle example to add another imagery layer like so:

    layers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
        url : 'http://localhost:8080/l7india/LE71440462004103ASN01_TIR'
    }));

l7india/LE71440462004103ASN01_TIR is the path from my web server root to the MapTiler output directory.

The new imagery showed up in India as expected, and behaved properly when zooming in and out.

[SurabhiJain]

Thank you very much. Now I am able to get tiles as expected when zooming in and out. I am new to this technique therefore I was may be silly while questioning. I have followed the steps which you have mentioned and now imagery are showed up as required. Now I am going to implement this method on my live project and hope it will work. Thanks once again.

[kring]

I'm glad to hear it's working for you now! Do you mind sharing which step or steps you were missing? It will help me help others in the future.

[SurabhiJain]

Sorry for being late in response. The steps which I was missing are: 1) Initially I put code in Imagery Layers Manipulation.html in place of Imagery Layers.html.

2)While generating tiles from MapTiler, tilemapresource.xml was not generated. After studying code of TileMapServiceImageryProvider.js I found out this mistake. Then I have generated tiles agian.

After giving url of tile in Imagery Layers.html, should check the image format. If its png then no need to change otherwise do change in TileMapServiceImageryProvider.js as jpg in place of png.

Actually I am new to this technique so it was my bad in understading of codes.If these errors will help others I'll be happy. Thanks once again.

[SurabhiJain]

TileMapServiceImageryProvider.js and Imagery layers Manipulation.html is present in only Cesium but if I want to use Cesium with OpenLayer in terms of 3D then how could I get imagery generated from maptiles same as mentioned in earlier issues. Because Cesium with OpenLayer support only Bing, OSM, SingltTile services not TMS.

[kring]

Can you clarify your question about OpenLayers? I don't entirely follow, because the TMS tiling layout is supported by OpenLayers. In fact, MapTiler will generate an OpenLayers viewer for your tiles automatically if you ask it to do so.

[SurabhiJain]

There are two things: 1) https://github.com/AnalyticalGraphicsInc/cesium 2) https://github.com/openlayers/openlayers

The first one is based on Cesium only while the second one is based on openlayers with cesium. The second one has Cesium.js as well as O2C.js(openlayer to Cesium) files.

Now my issue was as you mentioned that you had created tile and put url of imagery in "Imagery Layers" in Sancastle examples, yes I have also did the same and got required output.But that is only Cesium i.e. first one.

Now I am using the second technique i.e. https://github.com/openlayers/openlayers. Here in O2C TileMapServiceImageryProvider.js is not given so I have to use map tiles with OpenStreetMapTileProvider.js file. When I put the url in OSM then imagery were showed but they were repeated thrice at different locations and while zoom in tile were scattered. How to resolve this isssue?

But now I am able to resolve this problem by adding a formula in Cesium.js where OpenStreetMapTileProvider is given, the formula is -

var newy=Math.pow(2,tile.zoom)-tile.y-1;

(this formula is used for changing the position of tiles as I am using OSM in place of TMS supported tiles)

And the second thing:- url format for getting imagery was below

var url = this._url + tile.zoom + '/' + tile.x + '/' + newy + '.' + this._fileExtension; I have chaged it as adding one slash before tile.zoom to get imagery because tiles hierarchy which I have is not supported by the above url, the new url is -

var url = this._url + '/' + tile.zoom + '/' + tile.x + '/' + newy + '.' + this._fileExtension;

The new imagery showed as expected, and behaved properly when zooming in and out.

[SurabhiJain]

Here I have attached 2 images - The first one is from only Cesium plateform( https://github.com/AnalyticalGraphicsInc/cesium ), there is blackmarble imagery in backside and over it a green portion( at lower part of India, in south direction) is mentioned i.e. kerala tiles. I have added kerela state tiles over that black marble. The second one which is openlayers with Cesium plateform( https://github.com/openlayers/openlayers) has only that green portion, the same kerala tiles but there is no other map so its hard to identify where it is located either over india or somwhere else.

My problem is that I want to add map layers over globe so that user can identify that kerela tile is coming over India at proper location, there should be layer for reference in behind as shown in first image.But I am not able to do so.

[kring]

I don't know much about the integration between OpenLayers and Cesium. @mrmattf?

[mrmattf]

I'm not caught up on all this, but the work being done in openlayers3 is in this branch. https://github.com/openlayers/ol3/tree/cesium