topic Re: custom Zoom button in Developers Questions

custom Zoom button

Paco — Thu, 25 May 2023 17:32:41 GMT

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
}
});

Re: custom Zoom button

Paco — Fri, 26 May 2023 21:51:03 GMT

Okay, im going to add a bit more information. I'm thinking this 'may' be a structure/scope issue within the HTML/js because im having trouble finding the "view". keep getting errors.. I know it's there, but I can't seem to access it. again, just trying to add a 'button' and have it zoom in just like the standard ESRI ui zoom controls.

anyways, here's the important bits of what ive got and hoping you'all can help!

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

function zoomin() {
document.getElementById('zoominbtn')
console.log('console log')
var n = view.zoom + 1;
view.zoom = n;
};
</script>

Re: custom Zoom button

Paco — Mon, 05 Jun 2023 16:08:25 GMT

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

});