3

Following guide at switch2osm.org I was able to get my own OSM tile server running.

I did have verify state of my OSM tile server by using webrowser. For example at http://localhost/osm_tiles/0/0/0.png I get small picture od world. Evertthing seems to be working at server side to me.

Cesium connected to online source of maps works fine as well.

Problem pops up, when i try connect Cesium to local OSM server. In Firefox console i get this error:

"An error occurred in "": Failed to obtain image tile X: 1 Y: 1 Level: 1." Cesium.js:381:25514 "An error occurred in "": Failed to obtain image tile X: 1 Y: 0 Level: 1." Cesium.js:381:25514 "An error occurred in "": Failed to obtain image tile X: 0 Y: 0 Level: 1." Cesium.js:381:25514 "An error occurred in "": Failed to obtain image tile X: 0 Y: 1 Level: 1." Cesium.js:381:25514

I'm stuck at this problem for few days. Searching web did not provide me any useful clues.

Here is sourcecode of webpage I'm running Cesium from:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello World!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
  @import url(../Build/Cesium/Widgets/widgets.css);
  html, body, #cesiumContainer {
      width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
  }
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>

//Initialize the viewer widget with several custom options and mixins.
var viewer = new Cesium.Viewer('cesiumContainer', {
//Hide the base layer picker
baseLayerPicker : false,
//Use OpenStreetMaps
imageryProvider : new Cesium.OpenStreetMapImageryProvider({
    url : 'http://localhost/osm_tiles/'
  //url : '//a.tile.openstreetmap.org/'
}),

// Show Columbus View map with Web Mercator projection
//    mapProjection : new Cesium.WebMercatorProjection()
});

//Add basic drag and drop functionality
viewer.extend(Cesium.viewerDragDropMixin);

//Show a pop-up alert if we encounter an error when processing a dropped file
viewer.dropError.addEventListener(function(dropHandler, name, error) {
console.log(error);
window.alert(error);
});
</script>
</body>
</html>
8
  • Do these requests from Cesium show up in your webserver log? Do they look different from the requests sent by Firefox?
    – scai
    Mar 10, 2015 at 9:03
  • 1
    Are you also hosting your Cesium app on localhost? (and the same port) If the answer is no, then you need to enable CORS for it to work: enable-cors.org Mar 10, 2015 at 13:46
  • @scai my DEFAULT_ERRORLOG is set to "logs/error_log", but there is no such file on my system. With documentation on apache.org i was able locate /var/log/apache2/error.log file. Per request a identical line pops up in there : debug: init_storage_backend: initialising file storage backend at: /var/lib/mod_tile . I was not able to find any difference in logs on Apache side between request from Cesium and webrowser.
    – Empty_Mind
    Mar 12, 2015 at 14:07
  • @MatthewAmato They are not running on the same port. Tried that option. Unfortunately Cesium is not able to start, and report Error: Port 8080 is already in use, select a different port. Example: node server.js --port 8081 { [Error: listen EADDRINUSE] code: 'EADDRINUSE', errno: 'EADDRINUSE', syscall: 'listen' } Now I'm going to try cors.
    – Empty_Mind
    Mar 12, 2015 at 14:16
  • In Chrome, hit F12 for DevTools and go to the "Network" tab. Then reload your page to capture network requests. Do some of these lines turn red? What does the text in the "status" column say on such a line? Is there more info available by clicking the left-most column of a red line to reveal headers and responses?
    – emackey
    Mar 12, 2015 at 21:52

2 Answers 2

2

Have you enabled CORS (cross-origin resource sharing) on your tile server? An origin is defined as a URI scheme, hostname, and port number. Even though your tileserver and Cesium are both running on localhost, you'll need to configure the server to provide a CORS header in order for Cesium to use the images. See http://enable-cors.org/server_apache.html for instructions on how to configure CORS on the osm apache server.

1
  • Thank you for tip. This unfortunately did not solve my problem. Here is what I did: enabled mod_headers by a2enmod headers followed by modifying Apache2 config file at /etc/apache2/apache.conf. In config file I wrote Header set Access-Control-Allow-Origin "*" to sections <Directory />, <Directory /var/www/>, <Directory /var/lib/mod_tile/>. That last was created from scratch by me. Guessing from guide I mentioned in my question, this is output directory for renderd & mod_tile. Reloaded Apache.... and nothing has changed for me.
    – Empty_Mind
    Mar 12, 2015 at 17:17
0

I was still running into this problem (same issue was reported on the Cesium mailing list) and I was using Python's SimpleHTTPServer to serve the tiles. When I switched to a CORS-enabled webserver, the problem disappeared.

What was really confusing was thatthe vanilla SimpleHTTPServer (non-CORS) was printing out requests from Cesium with HTTP 200 success codes, so it appeared that it was servicing Cesium's requests, but Cesium would report the error you were finding. Switching to CORS remained the solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.