topic Re: ArcGIS API 4.11 Custom Zomm Button in ArcGIS JavaScript Maps SDK Questions

ArcGIS API 4.11 Custom Zomm Button

Den-GIS — Sun, 12 Dec 2021 03:18:17 GMT

I need a custom zoom button for my project with the arcgis api 4.11. I found this example for 3.x series:

   var map;    // esri map initialization    require(["esri/map", "esri/geometry/Point",    "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",    "esri/graphic", "dojo/domReady!"], function (Map, Point,    SimpleMarkerSymbol, SimpleLineSymbol,    Graphic, Color) {            map = new Map("map", {            center: [0, 0],            zoom: 5,            basemap: "topo",            slider: true // set to false to remove default zoom buttons        });    });

on(dom.byId("zoomInBtn"), "click", function(evt){map.setZoom(map.getZoom()+1);});on(dom.byId("zoomOutBtn"), "click", function(evt){map.setZoom(map.getZoom()-1);});

Is it possible to implement something like that with arcgis api 4.11. ?

Re: ArcGIS API 4.11 Custom Zomm Button

RobertScheitlin__GISP — Fri, 07 Jun 2019 13:34:47 GMT

Denis,

Does the standard Zoom widget not work for you?

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

Re: ArcGIS API 4.11 Custom Zomm Button

Den-GIS — Fri, 07 Jun 2019 13:54:34 GMT

Robert,

yes, it works.

I just would like to zoom in/out buttons to separate and put the home widget button between them.

Re: ArcGIS API 4.11 Custom Zomm Button

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:18:20 GMT

Denis,

Then this is what you are looking for:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>Home Button - 4.11</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      
      .esri-widget--button.esri-widget.esri-interactive.home {
        border-top: solid 1px #e0e0e0;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.11/"></script>

    <script>
      require([
        "esri/Map", 
        "esri/views/MapView", 
        "dojo/query",
        "dojo/dom-construct",
        "dojo/on"], function(
          Map, 
          MapView, 
          query,
          domConstruct,
          on) {
        var map = new Map({
          basemap: "streets"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 4,
          center: [15, 65]
        });

        view.when(function(){
          var zoomInBtn = query('.esri-component.esri-zoom.esri-widget>div')[0];
          var homeBtn = domConstruct.toDom("<div class='esri-widget--button esri-widget esri-interactive home' role='button' title='Home Extent'><span aria-hidden='true' role='presentation' class='esri-icon esri-icon-home'></span></div>");
          on(homeBtn, 'click', function(evt){
            console.info("Home Extent Button Clicked");
          });
          domConstruct.place(homeBtn, zoomInBtn, "after");
        });
        
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: ArcGIS API 4.11 Custom Zomm Button

Den-GIS — Fri, 07 Jun 2019 15:49:36 GMT

Great, that's it!

Just one more question:
I used the function goTo () for the home button:

on(homeBtn, 'click', function(evt){
              view.goTo({
               center: [-112, 38],
               zoom: 13
           });
          });

Everything seems to be ok. Home Button works fine.

Is there another way to implement home center?

Thank you very much Robert

Re: ArcGIS API 4.11 Custom Zomm Button

RobertScheitlin__GISP — Fri, 07 Jun 2019 15:52:01 GMT

That's how I would do it.