How to create custom recenter button

[rsharma]

Hi I am trying to get custom recenter button and basemap 3 custom button like below image. Is their any example

[FC_Basson]

What version of the API are you using? 3.x or 4.x?

[rsharma]

4.x

[FC_Basson · Accepted solution]

Use "dojo/dom-construct" in the require and define it in the function variables like domConstruct.

Then after you have initialised your view you can create the button.

// create DOM object
recenterBtn = domConstruct.toDom("<div class='map-button esri-component esri-locate esri-widget--button esri-widget' role='button' title='Recenter'><span aria-hidden='true' role='presentation' class='esri-icon esri-icon-globe'></span></div>");
// add to view
view.ui.add(recenterBtn, "bottom-right");
// add button click listener
recenterBtn.addEventListener('click', recenterFunction);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Use the MapView goTo() function to set the center view: MapView | ArcGIS API for JavaScript 4.14 

Add your own CSS to style it as you wish.

Also see the Custom Recenter Widget | ArcGIS API for JavaScript 4.14 example for the TypeScript version.

[FC_Basson]

You must still create the recenter function e.g.

function recenterView(){
  view.goTo({
    center: [-126, 49],
    zoom: 15
  });‍‍‍‍
}‍‍‍‍‍‍

which you then call with the listener

recenterBtn.addEventListener('click', recenterView);‍

[rsharma]

OK now it is clickable, but it do only zoom where ever it is on world map, it do not goto to that exact location of x and y axis(lat,long)

view.when(function() {
          // Add the boundary polygon and new lot polygon graphics
          addGraphics();
          // create DOM object
          var recenterBtn = domConstruct.toDom("<div class='map-button esri-component esri-locate esri-widget--button esri-widget' role='button' title='Recenter'><span aria-hidden='true' role='presentation' class='esri-icon esri-icon-globe'></span></div>");

          // add to view
          view.ui.add(recenterBtn, "bottom-right");
          // add button click listener
          recenterBtn.addEventListener('click', recenterView);
             function recenterView(){
                view.goTo({
                center: ['<?=$map_xy_coordinate['x']?>', '<?=$map_xy_coordinate['y']?>'],
                  zoom: 15
                });
              }
         });

[rsharma]

Its done, it was some minor error, btw thanks alot for ur kind efforts.

So now i will create  basemap buttons with the same method now, but what method do i call on click to change basemap

[FC_Basson]

It depends on how many basemaps you want to use.

Have a look at the documentation for BasemapToggle | ArcGIS API for JavaScript 4.14 and the BasemapGallery | ArcGIS API for JavaScript 4.14 widgets.

Otherwise the function for switching basemaps can be simple as:

function setbasemap(basemap){
   map.basemap = basemap;
}‍‍‍‍‍‍

and attach the click event to the buttons

basemapBtn.addEventListener('click', function(){
  setbasemap('hybrid');
});‍‍‍

[rsharma]

Thanks Basson it worked for me