topic Custom Home Button In ArcGIS API for Javascript in ArcGIS JavaScript Maps SDK Questions

Custom Home Button In ArcGIS API for Javascript

BruceGreen — Sat, 11 Dec 2021 07:34:31 GMT

Can you please take a look at This Demo and let me know how I can set up a custom home button

        var map;
        require(["esri/map", "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/graphic", "dojo/dom","dojo/on", "dojo/domReady!"], function (Map, Point,
        SimpleMarkerSymbol, SimpleLineSymbol,
        Graphic, dom, on) {
                map = new Map("map", {
                center: [0, 0],
                zoom: 5,
                basemap: "topo",
                slider: false, // set to false to remove default zoom buttons
                spatialReference: { wkid: 4326 }
            });
            on(dom.byId("zoomInBtn"), "click", function(evt){map.setZoom(map.getZoom()+1);});
            on(dom.byId("zoomOutBtn"), "click", function(evt){map.setZoom(map.getZoom()-1);});
            on(dom.byId("goHome"), "click", function(evt){});
        });

Re: Custom Home Button In ArcGIS API for Javascript

HerdisGudbrandsdottir — Sat, 11 Dec 2021 07:34:34 GMT

Hi Behrouz,

You can read the initial map extent on load, and use that as home extent (line 15):

      var map;
      var extent;
        require(["esri/map", "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/graphic", "dojo/dom","dojo/on", "dojo/domReady!"], function (Map, Point,
        SimpleMarkerSymbol, SimpleLineSymbol,
        Graphic, dom, on) {
                map = new Map("map", {
                center: [0, 0],
                zoom: 5,
                basemap: "topo",
                slider: false, // set to false to remove default zoom buttons
                spatialReference: { wkid: 4326 }
            })       
            map.on("load", function(){extent = map.extent});
         
            on(dom.byId("zoomInBtn"), "click", function(evt){map.setZoom(map.getZoom()+1);});
            on(dom.byId("zoomOutBtn"), "click", function(evt){map.setZoom(map.getZoom()-1);});
            on(dom.byId("goHome"), "click", function(evt){map.setExtent(extent)});
        });

Re: Custom Home Button In ArcGIS API for Javascript

BruceGreen — Wed, 02 Sep 2015 07:50:15 GMT

Thanks a lot Herdis!