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