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

Feature layer hover

BulbulMajumder1

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.

Trouver plus de publications taguées avec

Accepted answers

All comments

BulbulMajumder1

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

FC_Basson

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

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

AdrianWelsh

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).

blake.terhune

Posting Code blocks in Esri GeoNet

BulbulMajumder1

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

DavidChrest

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){...

AdrianWelsh

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

BulbulMajumder1

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

AdrianWelsh

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

BulbulMajumder1

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

AdrianWelsh

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

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