nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

info window gets stuck

JuneAcosta

I used the sample code "featurelayer hover", but instead of polygon features I use line features. The info window gets hung up when you go from feature to feature, and there seems to be a delay with the highlighting symbol. My app just doesnt run as well as the sample code and I have no idea where to start or how to troubleshoot the issue. I'm sure its something symbol and I just lack the experience. Here's the link so you can see my issue.... http://50.18.218.190/trafficStatus/index.html

and here's my version from the sample code.

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">     <!--The viewport meta tag is used to improve the presentation and behavior of the samples        on iOS devices-->     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Carlsbad Traffic Conditions</title>      <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">     <style>       html, body, #mapDiv {         padding:0;         margin:0;         height:100%;       }     </style>      <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>     <script>       dojo.require("esri.map");       dojo.require("esri.layers.FeatureLayer");       dojo.require("dijit.TooltipDialog");       dojo.require("dojo.number");    //add Bing map    //dojo.require("esri.virtualearth.VETiledLayer");              var map, dialog;        function init(){       //function init() {         //map = new esri.Map("mapDiv", {           //basemap: "streets",           //center: [-80.94, 33.646],           //zoom: 8         //});          var initExtent = new esri.geometry.Extent({"xmin":-13068974.11,"ymin":3909008.57,"xmax":-13051775.78,"ymax":3920474.13,"spatialReference":{"wkid":102100}});                    map = new esri.Map("mapDiv",{            extent:initExtent         });           //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service              var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");          map.addLayer(basemap);          //Create Bing map to add to map               var dynamicTraffic = new esri.layers.ArcGISDynamicMapServiceLayer("http://50.18.218.190/arcgis/rest/services/publicAGS/trafficStatus/MapServer");          map.addLayer(dynamicTraffic);                  var carlsbadTraffic = new esri.layers.FeatureLayer("http://50.18.218.190/arcgis/rest/services/publicAGS/trafficStatus/MapServer/0", {           mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,           outFields: ["*"]      });              //southCarolinaCounties.setDefinitionExpression("EndDate > = GETDATE()");          //var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([125,125,125,0.35]));     var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([125,125,125,0.1]));         carlsbadTraffic.setRenderer(new esri.renderer.SimpleRenderer(symbol));         map.addLayer(carlsbadTraffic);          map.infoWindow.resize(245,125);                  dialog = new dijit.TooltipDialog({           id: "tooltipDialog",           style: "position: absolute; width: 260px; font: normal normal normal 10pt Helvetica;z-index:100"         });         dialog.startup();                  var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0,1]),3);          //close the dialog when the mouse leaves the highlight graphic         dojo.connect(map, "onLoad", function(){           map.graphics.enableMouseEvents();           dojo.connect(map.graphics,"onMouseOut",closeDialog);                 });                          //listen for when the onMouseOver event fires on the countiesGraphicsLayer         //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer         dojo.connect(carlsbadTraffic, "onMouseOver", function(evt) {           var t = "<b>${ProjectName}</b><hr><b>Road: </b>${Road}<br/>"                              + "<b>Start: </b>${StartDate:DateFormat}<br/>"                              + "<b>End: </b>${EndDate:DateFormat}<br/>"                              + "<b>Phone: </b>${ContactPhone}<br/>"    + "<b>Email: </b>${ContactEmail}<br/>"    + "<b>Traffic Impact: </b>${TrafficImpact}<br/>"         + "<b>Type: </b>${Type}<br/>"                        + "<b>Addl Info: </b>${AddlInfo}<br/>";             var content = esri.substitute(evt.graphic.attributes,t);           var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);           map.graphics.add(highlightGraphic);                      dialog.setContent(content);            dojo.style(dialog.domNode, "opacity", 0.85);           dijit.popup.open({popup: dialog, x:evt.pageX,y:evt.pageY});         });       }            function closeDialog() {         map.graphics.clear();         dijit.popup.close(dialog);       }        dojo.ready(init);     </script>   </head>   <body class="claro">     <div id="mapDiv"></div>   </body> </html>

Encontre mais publicações marcadas com

Accepted answers

evtguy

I think it might be failing because your show dialog event doesn't create a new instance of the dialog? Truth be told, my code was adapted from someone else's example. Maybe the full context for my dialog code helps:

 var thisObject = this;   //=============================================================================   // Functions to display and dismiss the tooltp on the SnoCo Stream Gage features  //=============================================================================   this.showUsgsTooltip = function(evt) {      var usgsDialog = new dijit.TooltipDialog({    id: "usgsTooltipDialog",    content: "<SPAN style=\"color:blue;font-weight:bold\">USGS Gage</SPAN><br/><SPAN style=\"color:#256EB8\"><SPAN style=\"font-style:italic\">" + evt.graphic.attributes.NAME + "</SPAN></SPAN>",    style: "position: absolute; width: auto; font: normal normal bold 8pt Tahoma;z-index:100"   });   usgsDialog.startup();    dojo.style(usgsDialog.domNode, "opacity", 0.85);   dijit.placeOnScreen(usgsDialog.domNode, {x: evt.pageX, y: evt.pageY}, ["TL", "BL"], {x: 10, y: 10});  }   this.closeUsgsDialog = function() {   var widget = dijit.byId("usgsTooltipDialog");   if (widget) {    widget.destroy();   }  }    dojo.connect(theUsgsLayer, "onMouseOver", function(evt) {   thisObject.closeUsgsDialog();   thisObject.showUsgsTooltip(evt);   map.setMapCursor("pointer");  });    dojo.connect(theUsgsLayer, "onMouseOut", function(evt) {   map.setMapCursor("default");   thisObject.closeUsgsDialog();  });

All comments

evtguy

Seems to work fairly well. The popup does hang every now and then but I don't know what you can do about it. If it was me, I'd probably live with it. 😄

JuneAcosta

Here's my code after the changes from earlier post. The closeDialog() is getting called with the onMouseOut event.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Carlsbad Traffic Conditions</title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
    </style>

    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("dijit.TooltipDialog");
      dojo.require("dojo.number");
   //add Bing map
   dojo.require("esri.virtualearth.VETiledLayer");
      
      var map, dialog, veTileLayer;
   
   function init(){
      
    var initExtent = new esri.geometry.Extent({"xmin":-13073942.51,"ymin":3898938.00,"xmax":-13039545.85,"ymax":3921869.10,"spatialReference":{"wkid":102100}});  
    
        map = new esri.Map("mapDiv",{ 
          extent:initExtent
        }); 
    //map = new esri.Map("mapDiv");
    //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service     
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); 
        map.addLayer(basemap);
    
    //Create Bing map to add to map
    //veTileLayer = new esri.virtualearth.VETiledLayer({bingMapsKey: 'Aq6wyAehkpyMoyml9DNUcKN3YDVZ5oRbNwK0O--vJ2WJ7fAb0pC7VBX1VeRA6U9V', mapStyle:esri.virtualearth.VETiledLayer.MAP_STYLE_ROADS});
    //map.addLayer(veTileLayer);
    
    var dynamicTraffic = new esri.layers.ArcGISDynamicMapServiceLayer("http://50.18.218.190/arcgis/rest/services/publicAGS/trafficStatusNEW/MapServer"); 
        map.addLayer(dynamicTraffic);
        
        var carlsbadTraffic = new esri.layers.FeatureLayer("http://50.18.218.190/arcgis/rest/services/publicAGS/trafficStatus/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
     });
        
    //southCarolinaCounties.setDefinitionExpression("EndDate > = GETDATE()");

        //var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,255,0.35]), 1),new dojo.Color([125,125,125,0.35]));
    var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([168,0,0,0.1]),3);
        carlsbadTraffic.setRenderer(new esri.renderer.SimpleRenderer(symbol));
        map.addLayer(carlsbadTraffic);

        map.infoWindow.resize(225,125);

        //close the dialog when the mouse leaves the highlight graphic
        dojo.connect(map, "onLoad", function(){
          map.graphics.enableMouseEvents();
          dojo.connect(map.graphics,"onMouseOut",closeDialog);        
        });
                
        //listen for when the onMouseOver event fires on the countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        dojo.connect(carlsbadTraffic, "onMouseOver", function(evt) {
       closeDialog();
         showDialog(evt);  
        });
      }
   
   function showDialog(evt) {  
     dialog = new dijit.TooltipDialog({
          id: "tooltipDialog",
          style: "position: absolute; width: 225px; font: normal normal normal 8pt Helvetica;z-index:100"
        });
        dialog.startup();
    
    var highlightSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,255,0,1]),4);
    
    var t = "<b>${ProjectName}</b><hr><b>Road: </b>${Road}<br/>"
                             + "<b>Start: </b>${StartDate:DateFormat}<br/>"
                             + "<b>End: </b>${EndDate:DateFormat}<br/>"
                             + "<b>Phone: </b>${ContactPhone}<br/>"
               + "<b>Email: </b>${ContactEmail}<br/>"
               + "<b>Traffic Impact: </b>${TrafficImpact}<br/>"
               + "<b>Type: </b>${Type}<br/>"
               + "<b>Addl Info: </b>${AddlInfo}<br/>";
 
          var content = esri.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new esri.Graphic(evt.graphic.geometry,highlightSymbol);
          map.graphics.add(highlightGraphic);
          
          dialog.setContent(content);
    
    dojo.style(dialog.domNode, "opacity", 0.85);
    
    dijit.popup.open({popup: dialog, x:evt.pageX,y:evt.pageY});
   }

   function closeDialog() {
        map.graphics.clear();
    map.infoWindow.onHide();
        var widget = dijit.byId("tooltipDialog");
        if (widget) {
             widget.destroy();
        }
      }
   
      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div id="mapDiv"></div>
  </body>
</html>

evtguy

The dojo.connect for the onMouseOut code in my previous post should accomplish that:

 dojo.connect(theUsgsLayer, "onMouseOut", function(evt) {
  map.setMapCursor("default");
  thisObject.closeUsgsDialog();
 });

which, in turn, calls this function:

 this.closeUsgsDialog = function() {
  var widget = dijit.byId("usgsTooltipDialog");
  if (widget) {
   widget.destroy();
  }
 }

Here is my live example of this.

JuneAcosta

I made the changes as you suggested. The mouseOver works much better, but how do I get the info window to disappear when a feature is not being hovered?

evtguy

 var thisObject = this;   //=============================================================================   // Functions to display and dismiss the tooltp on the SnoCo Stream Gage features  //=============================================================================   this.showUsgsTooltip = function(evt) {      var usgsDialog = new dijit.TooltipDialog({    id: "usgsTooltipDialog",    content: "<SPAN style=\"color:blue;font-weight:bold\">USGS Gage</SPAN><br/><SPAN style=\"color:#256EB8\"><SPAN style=\"font-style:italic\">" + evt.graphic.attributes.NAME + "</SPAN></SPAN>",    style: "position: absolute; width: auto; font: normal normal bold 8pt Tahoma;z-index:100"   });   usgsDialog.startup();    dojo.style(usgsDialog.domNode, "opacity", 0.85);   dijit.placeOnScreen(usgsDialog.domNode, {x: evt.pageX, y: evt.pageY}, ["TL", "BL"], {x: 10, y: 10});  }   this.closeUsgsDialog = function() {   var widget = dijit.byId("usgsTooltipDialog");   if (widget) {    widget.destroy();   }  }    dojo.connect(theUsgsLayer, "onMouseOver", function(evt) {   thisObject.closeUsgsDialog();   thisObject.showUsgsTooltip(evt);   map.setMapCursor("pointer");  });    dojo.connect(theUsgsLayer, "onMouseOut", function(evt) {   map.setMapCursor("default");   thisObject.closeUsgsDialog();  });

JuneAcosta

Thanks for your help, but your suggested function allows only the first invoked info window. All other hovers after the one first fails... I get no more info windows to popup.

evtguy

I'm using a toolTipDialog as well but for point features in a featureLayer. My code for the closing the tooltip dialog is slightly different:

 this.closeUsgsDialog = function() {
  var widget = dijit.byId("usgsTooltipDialog");
  if (widget) {
   widget.destroy();
  }
 }

Maybe you can try:

      function closeDialog() {
        map.graphics.clear();
        var widget = dijit.byId("tooltipDialog");
        if (widget) {
             widget.destroy();
        }
      }

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.