What is proper way to programmatically move map? #182
Description
The Orbit controls are quite nice but I also wanted to add control buttons.
I knwo that I did not do this 'correctly' in that I accessed internal variables. What is the correct way?
Here is how I did it (code derived from an example of OSMBuildings):
html:
<!-- symbols defined at: https://graphemica.com/ -->
<button class="move left" title="move left">←</button>
<button class="move right" title="move right">→</button>
<button class="move back" title="move back">↑</button>
<button class="move forward" title="move forward">↓</button>
<!-- north east arrow ? https://graphemica.com/%E2%86%97 -->
<button class="tilt up" title="tilt up">↗</button>
<!-- left-side arc anticlockwise arrow https://graphemica.com/%E2%A4%B9 -->
<button class="tilt down" title="tilt down">↙</button>
<button class="rotate left" title="rotate left">↻</button>
<button class="rotate right" title="rotate right">↺</button>
<button class="zoom in" title="zoom in">╋</button>
<button class="zoom out" title="zoom out">━</button>
javascript:
var controlButtons = document.querySelectorAll('.control button');
for (var i = 0; i < controlButtons.length; i++) {
controlButtons[i].addEventListener('click', function (e) {
var button = this;
var title = button.title;
var classList = button.classList
var increment = classList.contains('forward') || classList.contains('right') || classList.contains('in') || classList.contains('down');
var direction = increment ? 1 : -1;
var angle = direction * .1;
if (classList.contains('move')) {
var distance = direction * 20;
if (classList.contains('back') || classList.contains('forward')) {
controls._controls.pan(0, distance);
} else {
controls._controls.pan(distance, 0);
}
} else if (classList.contains('tilt')) {
controls._controls.rotateUp(angle);
} else if (classList.contains('rotate')) {
controls._controls.rotateLeft(angle)
} else if (classList.contains('zoom')) {
if (increment) {
controls._controls.dollyOut(controls._controls.getZoomScale());
} else {
controls._controls.dollyIn(controls._controls.getZoomScale());
}
}
});
} //end for loop over controls