'How to change position of the Earth in WebGL Earth
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>
Solution 1:[1]
The last line of your code. Sets camera to the given latitude / longitude position. Leaflet's LatLng is supported. ie:
earth.setView([51.505, 0], 6);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | mhearse |