Feature layer hover

BulbulMajumder1 · ‎06-13-2016

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.

BulbulMajumder1 · ‎06-19-2016

<!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>

FC_Basson · ‎06-20-2016

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

BulbulMajumder1 · ‎06-21-2016

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