Custom Home Button In ArcGIS API for Javascript

3739
2
Jump to solution
09-02-2015 12:13 AM
BruceGreen
New Contributor III

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){});
        });
0 Kudos
1 Solution

Accepted Solutions
HerdisGudbrandsdottir
New Contributor III

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

View solution in original post

2 Replies
HerdisGudbrandsdottir
New Contributor III

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)});
        });
BruceGreen
New Contributor III

Thanks a lot Herdis!