0

I am using this webgl earth for the project, but I can't seem to find a way to change the position of the planet on the canvas. My desired goal was to put the planet on the bottom of the page, but I can't find a way around it.
I am providing the simple working demo for the issue. Thank you in advance.

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>

4

0 回答 0