Select to view content in your preferred language

Create a zoom in zoom out and a full screen icon and add functionality to these icons on a map

971
2
09-20-2023 12:15 AM
kumarprince8071
New Contributor III

MicrosoftTeams-image (4).png

I want to create the same showing on above image with the functionality also in arcgis api using javascript , 

please help me in that , i'm new to this ,please provide me any reference also if posible.

0 Kudos
2 Replies
Paco
by
Occasional Contributor

I created my own custom Zoom buttons this way with JS and some html/css..

document.getElementById("zoominbtn").addEventListener('click', function(){
  console.log("zoom in")
  var n= view.zoom + 1;
  view.zoom = n
  });
document.getElementById("zoomoutbtn").addEventListener('click', function(){
  console.log("zoom out")
  var n= view.zoom - 1;
  view.zoom = n
  });

 

0 Kudos
JeffreyThompson2
MVP Regular Contributor

The Zoom and Fullscreen widgets will get the functionality you are looking for. If you want to style them in the same way as the picture it will take some additional work. (ESRI won't help you trying to make your map look like Google.)

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Zoom.html

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Fullscreen.html

GIS Developer
City of Arlington, Texas
0 Kudos