I have been working with this WebGL Earth component for my project, but I am facing difficulty in adjusting the position of the planet on the canvas. My intention was to place the planet at the bottom of the page, but I haven't been able to achieve that yet.
Below is a basic demo illustrating the issue. Thank you for any assistance.
function initialize() {
var options = {
// sky: true,
atmosphere: true,
zooming: false,
};
var earth = new WE.map('earth_div', options);
WE.tileLayer('https://webglearth.github.io/webglearth2-offline/{z}/{x}/{y}.jpg', {
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);
});
var marker = WE.marker([51.5, -0.09]).addTo(earth);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.<br /><span style='font-size:10px;color:#999'>Tip: Another popup is hidden in Cairo..</span>", {
maxWidth: 150,
closeButton: true
}).openPopup();
var marker2 = WE.marker([30.058056, 31.228889]).addTo(earth);
marker2.bindPopup("<b>Cairo</b><br>Yay, you found me!", {
maxWidth: 120,
closeButton: false
});
var markerCustom = WE.marker([50, -9], '/img/logo-webglearth-white-100.png', 100, 24).addTo(earth);
// earth.setView([51.505, 0], 2.5);
}html,
body {
padding: 0;
margin: 0;
background-color: white;
font-family: 'MyWebFont';
overflow: hidden;
}
#earth_div {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute !important;
} <script src="http://www.webglearth.com/v2/api.js"></script>
<body onload="initialize()">
<div id="earth_div">
</div>