Setting an exent for a FL hover?

MartinOwens1 — Sun, 12 Dec 2021 09:22:30 GMT

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');
      }

    });
  });
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Setting an exent for a FL hover?

RobertScheitlin__GISP — Thu, 17 Sep 2020 13:16:03 GMT

Martin,

You really need to reconsider your workflow here.

Every time the maps extent changes and the the map scale is below 37000 you create a NEW FeatureLayer and add it to the map and then attach events to that layer. You never check if the featurelayer exists already. You should really create the layer in the widget startup and then only add the layer to the map when the map scale is correct and remove the layer when not at the correct scale.

Next you have a on map load line in your code. Well the map will always already be loaded before your widgets code is called so this will never be reached.

It still fires after you zoom out because you have nothing that tells it to stop in your code (i.e. like removing the mouse-over listener or even better the layer).

Re: Setting an exent for a FL hover?

MartinOwens1 — Sun, 12 Dec 2021 09:22:33 GMT

That makes a lot more sense. In attempting to change the work flow I've added the new feature layer at startup and am trying to add the layer if the scale is correct but it says the layer isn't defined. I've tried the map.getLayer and then map. addLayer.

      startup: function() {
        this.inherited(arguments);
		 var Sold = new FeatureLayer("https://gis.co.greene.oh.us/gcags/rest/services/ValueDashboard/Transactions/MapServer/2", {
			id: "Sold", 
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["SQ_FT", "RMBED", "FIXBATH"],
          });
      },
  
      _ShowPopup: function() {
		
		var scale = scaleUtils.getScale(this.map);
		if (scale < 37000) {

		var Sold = this.map.getLayer("Sold");
	        this.map.addLayer(Sold);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Setting an exent for a FL hover?

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:22:35 GMT

Martin,

Because the way you have the var Sold inside the startup function it only exists in that functions scope. Instead do this:

      startup: function() {
        this.inherited(arguments);
        this.Sold = new FeatureLayer(...

....‍‍‍‍‍‍‍‍‍‍

      _ShowPopup: function() {
          var scale = scaleUtils.getScale(this.map);
          if (scale < 37000) {
             if(!this.map.getLayer('Sold')){
               this.map.addLayer(this.Sold);
             }‍‍‍‍‍‍‍‍‍‍‍‍
             ...‍‍‍‍‍‍‍
          }else{ //map scale greater than 37000
             this.map.removeLayer(this.Sold);
          }
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Setting an exent for a FL hover?

MartinOwens1 — Thu, 17 Sep 2020 18:02:31 GMT

I see now. Thanks Robert for your help. I got it working.

topic Re: Setting an exent for a FL hover? in Web AppBuilder Custom Widgets Questions

Setting an exent for a FL hover?

Re: Setting an exent for a FL hover?

Re: Setting an exent for a FL hover?

Re: Setting an exent for a FL hover?

Re: Setting an exent for a FL hover?