strip functionality from 'home' widget

358
5
03-07-2020 02:41 PM
CamCode
New Contributor III

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

0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
CamCode
New Contributor III

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;
}
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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");
0 Kudos
CamCode
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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>