topic Feature layer hover in ArcGIS JavaScript Maps SDK Questions

Feature layer hover

BulbulMajumder1 — Mon, 13 Jun 2016 15:35:15 GMT

I visited "Feature layer hover" sample code. It is almost what I am looking for. Only the different what I would like "to hover on objects on the map, instead of area-boundary (as shown in this sample code)". Please help.

Re: Feature layer hover

AdrianWelsh — Mon, 13 Jun 2016 15:42:26 GMT

Hi Bulbul,

It might help if you post the sample link you visited (likely this one: Feature layer hover | ArcGIS API for JavaScript ) and it might be best to post this thread in the ArcGIS API for JavaScript place. Community help is for help on the GeoNet.

In any case, have you looked at this code? Does this help?

Show info window on mouse hover | ArcGIS API for JavaScript

Re: Feature layer hover

BulbulMajumder1 — Thu, 16 Jun 2016 18:40:52 GMT

Here is the Link
Feature layer hover | ArcGIS API for JavaScript
Please let me know if you need anything else
Thanks

Re: Feature layer hover

AdrianWelsh — Thu, 16 Jun 2016 18:51:25 GMT

Thanks, looks like we're on the same page.

Have you looked at this sample code?

Show info window on mouse hover | ArcGIS API for JavaScript

Re: Feature layer hover

BulbulMajumder1 — Thu, 16 Jun 2016 18:56:29 GMT

Yes I did but in it you have to click but I just want hover and the geometry of the feature layer is point as this example Feature layer hover | ArcGIS API for JavaScript
here they are using polygon geometry from feature layer and I want point geometry from the feature layer.
Thanks

Re: Feature layer hover

AdrianWelsh — Thu, 16 Jun 2016 20:40:20 GMT

Bulbul,

I am not fully sure since I do not know enough about JavaScript. Maybe take a look at these two threads. They may be able to help you:

Popup on hover not working properly

Feature layer hover problem

Re: Feature layer hover

DavidChrest — Fri, 17 Jun 2016 14:23:54 GMT

I used this same example to hover over a point feature layer.

Just use the name of your Feature Layer.

Instead of southCarolinaCounties.on("mouse-over", function(evt){...

Just do yourPointFeatureLayer.on("mouse-over", function(evt){...

Re: Feature layer hover

BulbulMajumder1 — Fri, 17 Jun 2016 15:04:12 GMT

Thanks David but Its still not working do you mind to have a look in my code thanks

Re: Feature layer hover

BlakeTerhune — Fri, 17 Jun 2016 15:22:16 GMT

Posting Code blocks in Esri GeoNet

Re: Feature layer hover

AdrianWelsh — Fri, 17 Jun 2016 15:28:43 GMT

Bulbul,

You can post your code in this thread. It helps if you use the code block like Blake pointed out. (you can also attach a file to this thread but it may be more visual for people to see the code posted as opposed to attached).

Re: Feature layer hover

BulbulMajumder1 — Sat, 11 Dec 2021 07:15:55 GMT

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=
no">
    <title>Feature Layer - display results as an InfoWindow onHover</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      #mapDiv {
        position: relative;
      }
      #info {
        background: #fff;
        box-shadow: 0 0 5px #888;
        left: 1em;
        padding: 0.5em;
        position: absolute;
        top: 1em;
        z-index: 40;
      }
    </style>

    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
      var map, dialog;
      require([
        "esri/map", "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
        "esri/Color", "dojo/number", "dojo/dom-style",
        "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        SimpleFillSymbol, SimpleLineSymbol,
        SimpleRenderer, Graphic, esriLang,
        Color, number, domStyle,
        TooltipDialog, dijitPopup
      ) {
        map = new Map("mapDiv", {
          basemap: "topo",
          center: [-101, 38],
          zoom: 8,
          slider: false
        });

        var historicQuakesFeatureLayer = new FeatureLayer("http://*******.*****.***/ArcGIS/rest/services/MapServer/0", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["Date_", "Lat", "Long_",  "Source", "Link"]
        });
       legendLayers.push({
          layer: historicQuakesFeatureLayer,
          title: "Significant Historic Earthquakes"
      });

        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255,255,255,0.35]),
            1
          ),
          new Color([125,125,125,0.35])
        );
        historicQuakesFeatureLayer.setRenderer(new SimpleRenderer(symbol));
        map.addLayer(historicQuakesFeatureLayer);

        map.infoWindow.resize(300, 150);

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

        var highlightSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color([255,0,0]), 3
          ),
          new Color([125,125,125,0.35])
        );

        //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 countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        historicQuakesFeatureLayer.on("mouse-over", function(evt){
          var t = "<b>${NAME}</b><hr><b>Magnitude </b>${Mag}<br>"
            + "<b>Approx Location </b>${Approximate_Location}";

          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", 0.85);
          dijitPopup.open({
            popup: dialog,
            x: evt.pageX,
            y: evt.pageY
          });
        });

        function closeDialog() {
          map.graphics.clear();
          dijitPopup.close(dialog);
        }

      });
    </script>
  </head>
  <body class="tundra">
    <div id="mapDiv">
      <div id="info">
       Test
      </div>
    </div>
  </body>
</html>

Re: Feature layer hover

FC_Basson — Mon, 20 Jun 2016 07:22:54 GMT

I tested your code sample and it works. Two things I would change is to make sure that the fields your request in the popup is specified in the FeatureLayer outfields e.g. ["*"], and the point symbol is a SimpleMarkerSymbol | API Reference | ArcGIS API for JavaScript

Re: Feature layer hover

BulbulMajumder1 — Sat, 11 Dec 2021 07:15:58 GMT

Following is the code on which I am working. It is allowing to click the features to get the queried info window.

I am looking for the hover option, instead of clicking. Any help, please.

require([
  "esri/InfoTemplate", "esri/dijit/Legend", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/tasks/query", "esri/tasks/QueryTask",
  "esri/tasks/LegendLayer", "dojo/on", "dijit/registry", "esri/dijit/BasemapGallery", "esri/geometry/webMercatorUtils",
  "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer",
  "dojo/dom", "dojo/dom-construct", "dojo/parser", "dojo/_base/array",
  "dijit/layout/AccordionContainer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
],
  function (
    Graphic, SpatialReference, Extent, GraphicsLayer, Color,
    InfoTemplate, Legend, SimpleFillSymbol, SimpleLineSymbol, Query, QueryTask,
    LegendLayer, on, registry, BasemapGallery, webMercatorUtils,
    ArcGISDynamicMapServiceLayer, FeatureLayer,
    dom, domConstruct, parser, arrayUtils,
    AccordionContainer, BorderContainer, ContentPane, TitlePane
  ) {

      parser.parse();

      var legendLayers = [];

      var map = new esri.Map("map", {
          basemap: "topo",
          center: [-110, 47],
          zoom: 6
      });

      /* Add the BASEMAP GALLERY from ESRI */

      var basemapGallery = new BasemapGallery(
          );

      /*********************************************************
        HISTORIC QUAKES FEATURE LAYER 
      *********************************************************/

      /* Create a new InfoTemplate for the MBMG SWAMP layer  2014-12-29 */ 
      var historicInfoTemplate = new InfoTemplate();
      historicInfoTemplate.setTitle("SWAMP Record ${GWICId}");
      historicInfoTemplate.setContent("<table>" +
           "<tr valign='top'><td style='white-space:nowrap;'>Event Date</td><td>${Date_}</td></tr>" +
           "<tr><td style='white-space:nowrap;'>Location</td><td style='white-space:nowrap;'>${Lat}, ${Long_}</td></tr>" +
           "<tr><td style='white-space:nowrap;'>Magnitude</td><td style='white-space:nowrap;'>${Mag}</td></tr>" +
           "<tr><td style='white-space:nowrap;'>Approx Location</td><td>${Approximate_Location}</td></tr>" +
           "<tr><td style='white-space:nowrap;'>Source</td><td>${Source}</td></tr>" +
           "<tr><td style='white-space:nowrap;'>Other Info</td><td><a href='${Link}' target='_newwindow'>${Link}</a></td></tr>" +
           "</table>");

      var historicQuakesFeatureLayer = new FeatureLayer("http://mbmgmap.mtech.edu/ArcGIS/rest/services/quakes/Historic_quakes/MapServer/0",
          {
              mode: FeatureLayer.MODE_SNAPSHOT,
              outFields: ["Date_", "Lat", "Long_", "Mag", "Approximate_Location", "Source", "Link"],
              infoTemplate: historicInfoTemplate
          }
          );

      map.addLayers([historicQuakesFeatureLayer]);

      /* Re-size the infoWindow to fit the standard contents */ 

      map.infoWindow.resize(350, 150);
   
  });