google-app-engineleafletmaptiler

WebGL Earth Cross-Origin Error

Custom map tiles do not load in WebGL Earth from App Engine. The error message says No 'Access-Control-Allow-Origin' header is present on the requested resource - but I'm requesting the tiles from the same domain. You can see the problem in split-screen at bangmaps.com How do I fix this?

API.tileLayer('http://example.com/img/pop/{z}/{x}/{y}.jpg', {

My first attempt to fix the problem (did not work):

app.yaml

- url: /img
  static_dir: static/img
  http_headers:
    Access-Control-Allow-Origin: "*"
Solution

  • It appears App Engine only adds 'Access-Control-Allow-Origin' for requests that are prefixed by 'www.'

    I changed this line:

    API.tileLayer('http://example.com/img/pop/{z}/{x}/{y}.jpg', {

    to

    API.tileLayer('http://www.example.com/img/pop/{z}/{x}/{y}.jpg', {

    That fixed the problem.