custom Zoom button

Paco

Hello all!   I'm trying to create custom zoom buttons within my Webapp.

I've created simple Div/Buttons with HTML/CSS and would like to simply click and zoomin/zoomout at the standard MapView 'zoom' levels.

the usual code has been added but I will need to reference the click on the Button and zoom the view.  any help?  thanks! Screenshot included.  Javascript 4.x

const view = new MapView({
container: "viewDiv",
map: map,
center: [-100.0, 40.0], // longitude, latitude
zoom: 3,
padding: {
left: 45
}
});

<div id="myleftnav" class="leftnav">
<button type="button" class=zoominbtn>+</button>
<button type="button" class=zoomoutbtn>-</button>
</div>

 

zoom.jpg

Paco

I'll answer my own question 😉 after a several days of trial and error,  a custom zoom button:

// Navigation //

document.getElementById("zoominbtn").addEventListener('click', function(){

  console.log("zoom in")

  var n= view.zoom + 1;

  view.zoom = n

  });