topic Re: strip functionality from 'home' widget in ArcGIS JavaScript Maps SDK Questions

strip functionality from 'home' widget

CamCode — Sat, 07 Mar 2020 22:41:37 GMT

Wondering if it is possible to keep my 'home' widget; but remove the functionality set where it 'returns' to a zoom level and position on my map. i.e. I want to just keep the icon (for now). https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Home.html

Re: strip functionality from 'home' widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:00:13 GMT

Cam,

Sure you can just add this html code to your add:

<div id="myHomeBtn" class="esri-component esri-home esri-widget--button esri-widget" role="button" tabindex="0" aria-label="Default map view" title="Default map view">
  <span aria-hidden="true" class="esri-icon esri-icon-home"></span>
  <span class="esri-icon-font-fallback-text">Home</span>
</div>‍‍‍‍‍‍‍‍‍‍

Now you have a button but no code or event listener hooked up to it.

Re: strip functionality from 'home' widget

CamCode — Mon, 09 Mar 2020 19:27:56 GMT

Thank you Robert; I am invoking it originally with the below code and find it useful to keep due to its location and load time. How can I keep it invoked this way, but disable the current functionality affiliated with zoom. You can see I am trying to use return false and also preventDefault(); in effort to do this.

function addHome(view) {

const home = new Home({ view: view });

view.ui.add(home, 'top-left');

event.preventDefault();

return false;

}

Re: strip functionality from 'home' widget

RobertScheitlin__GISP — Mon, 09 Mar 2020 20:03:21 GMT

Cam,

That is going to be tough. Using the widget it has all the event handlers programmed into the widgets code and there are no simple hooks to get in there and disable those. Location and load time are really not good reasons to try and use a widget for the button look and icon. You can get the location and speed by adding the html to the views UI like this:

view.ui.add(document.getElementById("myHomeBtn"), "top-left");‍

Re: strip functionality from 'home' widget

CamCode — Mon, 09 Mar 2020 20:48:24 GMT

Thanks Robert. Just stand alone like that? I am getting view undefined.

Re: strip functionality from 'home' widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:00:16 GMT

Cam,

Here is my complete concept sample:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1,user-scalable=no"
    />
    <title>Home button - 4.14</title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.14/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.14/"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/widgets/Home"
      ], function(Map, SceneView, Home) {
        var map = new Map({
          basemap: "streets",
          ground: "world-elevation"
        });

        var view = new SceneView({
          container: "viewDiv",
          map: map,
          center: [-56.049, 38.485, 78],
          zoom: 3
        });

        // var homeBtn = new Home({
        //   view: view
        // });

        // // Add the home button to the top left corner of the view
        // view.ui.add(homeBtn, "top-left");
        
        view.ui.add(document.getElementById("myHomeBtn"), "top-left")
      });
    </script>
  </head>

  <body>
    <div id="viewDiv">
      <div id="myHomeBtn" class="esri-component esri-home esri-widget--button esri-widget" role="button" tabindex="0" aria-label="Default map view" title="Default map view">
  <span aria-hidden="true" class="esri-icon esri-icon-home"></span>
  <span class="esri-icon-font-fallback-text">Home</span>
</div>
    </div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍