Move Hover Widget Into WAB Functionality

joerodmey — Sun, 12 Dec 2021 09:04:08 GMT

Hi all,

I'm trying to move the FLHover widget into the main WAB application. The reason I want to do this is that this way I don't need to have the widget button sitting on the screen. How would I accomplish this?

I would even be happy with moving this code within WAB:

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Tooltips</title>
  <style>
    html,
    body,
    #divMap {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }

    #bcMain {
      width: 100%;
      height: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
  <script src="https://js.arcgis.com/3.24/"></script>
  <script>
    var lastState = null;
    require([
        "esri/map",
        "esri/layers/FeatureLayer",
        "esri/graphic",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/Color",
        "esri/InfoTemplate",
        "dojo/parser",
        "dojo/on",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ],
      function(
        Map, FeatureLayer, Graphic,
        SimpleFillSymbol, SimpleLineSymbol, Color,
        InfoTemplate, parser, on,
        BorderContainer, ContentPane) {

        parser.parse();

        var sUrlUSAService = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2";

        var mapMain = new Map("divMap", {
          basemap: "satellite",
          center: [-119.65, 36.87],
          zoom: 4
        });

        var infoTemplate = new InfoTemplate("<b>State Name</b>", "${state_name}");
        var lyrUSA = new FeatureLayer(sUrlUSAService, {
          mode: FeatureLayer.MODE_ONDEMAND,
          infoTemplate: infoTemplate,
          outFields: ["state_name"]
        });
        mapMain.addLayers([lyrUSA]);

        lyrUSA.on("mouse-move", function(evt) {
          if(evt.graphic.attributes["state_name"] === lastState){
            return;
          }
          setTimeout(function(){
            mapMain.infoWindow.setFeatures([evt.graphic]);
            mapMain.infoWindow.show(evt.screenPoint, mapMain.getInfoWindowAnchor(evt.screenPoint));
            lastState = evt.graphic.attributes["state_name"];
          }, 1);
        });
      });
  </script>
</head>

<body class="claro">
  <div id="bcMain" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', liveSplitters:'true'">
    <div id="cpCenter" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div id="divMap"></div>
      </div>
    </div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Thanks

Re: Move Hover Widget Into WAB Functionality

shaylavi — Mon, 23 Dec 2019 05:17:53 GMT

Are you referring to the popup/infowindow when hovering over a feature layer? not sure I understand what is the FLHover widget

Re: Move Hover Widget Into WAB Functionality

joerodmey — Mon, 23 Dec 2019 21:31:25 GMT

No I'm referring to the Hover widget. Can be found here: https://community.esri.com/docs/DOC-13431-feature-layer-hover-widget-version-212-090519

Re: Move Hover Widget Into WAB Functionality

shaylavi — Mon, 23 Dec 2019 22:27:10 GMT

So I assume the main WAB application you refer to is the built-in functionality and not being a widget?

If so, you can change this behavior at the MapManager.js file inside the jimu.js folder, after the map was loaded.

The main WAB application can also refer to the built-in version of the Portal, which then means you need to load this widget as a hosted website and create a portal item for it.

Re: Move Hover Widget Into WAB Functionality

joerodmey — Fri, 10 Jan 2020 20:43:20 GMT

Yes you are correct.

How can I integrate the widget functionality into MapManager so it interfaces correctly?

What do you mean about the "Built in version of portal"?

topic Re: Move Hover Widget Into WAB Functionality in Web AppBuilder Custom Widgets Questions

Move Hover Widget Into WAB Functionality

Re: Move Hover Widget Into WAB Functionality

Re: Move Hover Widget Into WAB Functionality

Re: Move Hover Widget Into WAB Functionality

Re: Move Hover Widget Into WAB Functionality