strip functionality from 'home' widget

CamCode · ‎03-07-2020

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

RobertScheitlin__GISP · ‎03-09-2020

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.

CamCode · ‎03-09-2020

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;

}

RobertScheitlin__GISP · ‎03-09-2020

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

CamCode · ‎03-09-2020

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

RobertScheitlin__GISP · ‎03-09-2020

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