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){}); });
Solved! Go to Solution.
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)});
});
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)});
});
Thanks a lot Herdis!