topic Re: How to create custom recenter button in ArcGIS JavaScript Maps SDK Questions

How to create custom recenter button

rsharma — Thu, 05 Mar 2020 06:06:50 GMT

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

Re: How to create custom recenter button

FC_Basson — Thu, 05 Mar 2020 08:58:52 GMT

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

Re: How to create custom recenter button

rsharma — Thu, 05 Mar 2020 09:23:56 GMT

4.x

Re: How to create custom recenter button

FC_Basson — Fri, 10 Dec 2021 20:58:54 GMT

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.

Re: How to create custom recenter button

FC_Basson — Fri, 10 Dec 2021 20:58:57 GMT

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

Re: How to create custom recenter button

rsharma — Thu, 05 Mar 2020 10:51:02 GMT

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

Re: How to create custom recenter button

rsharma — Thu, 05 Mar 2020 11:42:23 GMT

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

Re: How to create custom recenter button

FC_Basson — Fri, 10 Dec 2021 20:58:59 GMT

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

Re: How to create custom recenter button

rsharma — Fri, 06 Mar 2020 08:08:19 GMT

Thanks Basson it worked for me