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>
Solved! Go to Solution.
I'll answer my own question 😉 after a several days of trial and error, a custom zoom button:
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
}
});
<script>
function zoomin() {
document.getElementById('zoominbtn')
console.log('console log')
var n = view.zoom + 1;
view.zoom = n;
};
</script>
<button id="zoominbtn" class=zoominbtn onclick="zoomin()">
<img src="images/zoom-in-svgrepo-com.svg"width="24" height="24"></button>
I'll answer my own question 😉 after a several days of trial and error, a custom zoom button: