AnsweredAssumed Answered

Setting an exent for a FL hover?

Question asked by owenmt8656 on Sep 16, 2020
Latest reply on Sep 17, 2020 by owenmt8656

I'm working on a feature layer hover that uses the tooltip dialog. Pretty much out of the box from the documentation:

Feature layer hover | ArcGIS API for JavaScript 3.33 

However, I'm attempting to only utilize the tooltip and graphic layer only below a certain map scale. I have added the set extent and an if statement but it seems once it draws for the first time when I zoom back out it still continues to fire. What am I missing?

///////////////////////////////////////////////////////////////////////////
// Copyright © Esri. All Rights Reserved.
//
// Licensed under the Apache License Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//    http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
///////////////////////////////////////////////////////////////////////////
define([
    'dojo/_base/declare',
    "dojo/dom",
    'dojo/parser',
    "dojo/dom-construct",
    'dijit/_WidgetsInTemplateMixin',
    "esri/graphic",
    'esri/layers/GraphicsLayer',
    "esri/geometry/Geometry",
    "esri/SpatialReference",
    "esri/symbols/PictureMarkerSymbol",
    'dojo/_base/lang',
    "esri/tasks/locator",
    'esri/domUtils',
    "esri/geometry/Point",
    "esri/geometry/webMercatorUtils",
    "esri/dijit/PopupTemplate",
    'dijit/form/TextBox',
    'dijit/form/Button',
    'dijit/Tooltip',
    'jimu/PanelManager',
    "jimu/WidgetManager",
    "esri/geometry/scaleUtils",
    'jimu/BaseWidget',
    "esri/map", "esri/layers/FeatureLayer",
    "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
    "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
    "esri/Color", "dojo/number", "dojo/dom-style",
    "dijit/TooltipDialog",
    "dijit/popup",
    "dojo/domReady!"
  ],
  function(declare, dom, parser, domConstruct, _WidgetsInTemplateMixin, Graphic, GraphicsLayer, Geometry, SpatialReference, PictureMarkerSymbol, lang, Locator, domUtils, Point, webMercatorUtils, PopupTemplate, TextBox, Button, Tooltip, PanelManager, WidgetManager, scaleUtils, BaseWidget, Map, FeatureLayer, SimpleFillSymbol, SimpleMarkerSymbol, SimpleLineSymbol, SimpleRenderer, Graphic, esriLang, Color, number, domStyle, TooltipDialog, dijitPopup ) {
    //To create a widget, you need to derive from BaseWidget.
    return declare([BaseWidget], {

      baseClass: '.jimu-panel2',
      //checkExtent: null,
      
      postCreate: function() {
        this.inherited(arguments);
        console.log('postCreate');
          this.own((this.map.on('extent-change', lang.hitch(this, this._ShowPopup))));
      },

      startup: function() {
        this.inherited(arguments);
      },

      onOpen: function() {
        console.log('onOpen');
      },
      
      _ShowPopup: function() {
          map = this.map;
        //console.log("Popup Fired");
        var scale = scaleUtils.getScale(this.map);
        if (scale < 37000) {
          //console.log("Popup Fired and scale >37000");
          var map, dialog;

          var Sold = new FeatureLayer("https://gis.co.greene.oh.us/gcags/rest/services/ValueDashboard/Transactions/MapServer/2", {
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["SQ_FT", "RMBED", "FIXBATH"]
          });


          var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 15,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL,
              new Color([255, 255, 255]), 1),
            new Color([255, 255, 255, 0.0]));

          Sold.setRenderer(new SimpleRenderer(symbol));
          map.addLayer(Sold);


          map.infoWindow.resize(245, 125);

          dialog = new TooltipDialog({
            /*  id: "tooltipDialog", */
            style: "position: absolute; width: 100px; font: normal normal normal 11pt Helvetica;z-index:100"
          });
          dialog.startup();



          var highlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_NULL,
            new Color([255, 255, 255]), 0),
            new Color([0, 255, 0, 1.0]));

          

          //close the dialog when the mouse leaves the highlight graphic
          map.on("load", function() {
            map.graphics.enableMouseEvents();
            map.graphics.on("mouse-out", closeDialog);

          });

          //listen for when the onMouseOver event fires on the SoldGraphicsLayer
          //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
          Sold.on("mouse-over", function(evt) {
            var t = "<b>${RMBED}</b><b> bd, </b><b>${FIXBATH}</b><b> ba </b><br>" +
              "<b>${SQ_FT}</b><b> sq ft </b>";

            var content = esriLang.substitute(evt.graphic.attributes, t);
            var highlightGraphic = new Graphic(evt.graphic.geometry, highlightSymbol);
            map.graphics.add(highlightGraphic);

            dialog.setContent(content);

            domStyle.set(dialog.domNode, "opacity", 1);
            dijitPopup.open({
              popup: dialog,
              x: evt.pageX,
              y: evt.pageY
            });
          });

        }
          function closeDialog() {
          map.graphics.clear();
          dijitPopup.close(dialog);
        }
      },
      
      onClose: function() {
        console.log('onClose');
      },

      onMinimize: function() {
        console.log('onMinimize');
      },

      onMaximize: function() {
        console.log('onMaximize');
      },

      onSignIn: function(credential) {
        /* jshint unused:false*/
        console.log('onSignIn');
      },

      onSignOut: function() {
        console.log('onSignOut');
      }

    });
  });

Outcomes