I'm using webGL earth in my application, it was working but now i'm getting CORS issue when i try to run on local wamp server or live server.
Access to image at 'https://www.webglearth.com/v2/SkyBox/mx.jpg' from origin 'https://mydomain.in' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
<!DOCTYPE HTML>
<html>
<head>
<script src="v2/api.js"></script>
<script>
function initialize() {
/* if (window.location.href.substr(0, 5) === 'file:')
alert("This file must be accessed via http:// or https:// to run properly.");
var earth = new WE.map('earth_div');
earth.setView([46.8011, 8.2266], 2);
WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
tileSize: 256,
bounds: [[-85, -180], [85, 180]],
minZoom: 0,
maxZoom: 16,
attribution: 'WebGLEarth example',
tms: true
}).addTo(earth); */
var options = {
sky: true,
atmosphere: true,
zooming: true,
};
var earth = new WE.map("earth_div", options);
WE.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
//tileSize: 256,
//tms: true
}).addTo(earth);
// Start a simple rotation animation
var before = null;
requestAnimationFrame(function animate(now) {
var c = earth.getPosition();
var elapsed = before ? now - before : 0;
before = now;
earth.setCenter([c[0], c[1] + 0.1 * (elapsed / 30)]);
requestAnimationFrame(animate);
});
navigator.geolocation.getCurrentPosition(function (position) {
var marker = WE.marker([
position.coords.latitude,
position.coords.longitude,
]).addTo(earth);
marker
.bindPopup("<b>Hello world!</b><br>My current location<br />", {
maxWidth: 150,
closeButton: true,
})
.openPopup();
});
// earth.setView([51.505, 0], 2.5);
}
</script>
<style type="text/css">
html, body{padding: 0; margin: 0;}
#earth_div{top: 0; right: 0; bottom: 0; left: 0;
position: absolute !important;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(253,253,253)),
color-stop(0.15, rgb(253,253,253)),
color-stop(0.53, rgb(223,223,223)),
color-stop(0.56, rgb(255,255,255)),
color-stop(1, rgb(253,253,253))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(253,253,253) 0%,
rgb(253,253,253) 15%,
rgb(223,223,223) 53%,
rgb(255,255,255) 56%,
rgb(253,253,253) 100%
);
}
</style>
<title>WebGL Earth API: Custom Tiles</title>
</head>
<body onload="initialize()">
<div id="earth_div"></div>
</body>
</html>
my .htaccess file is
RewriteEngine on
RewriteCond %{REQUEST_URI} !/globenew/
RewriteRule ^/?(.*)$ /globenew/$1 [END,QSA]
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
Any solution to resolve this issue is highly appreciated.
Thanks