Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Show info window on mouse hover
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how you can display an InfoWindow when the user hovers the mouse over a feature. In this sample, the feature is the result of a QueryTask that queries USA states. The user follows this workflow:
- User clicks a feature
- The feature is "highlighted" using a graphic.
- User hovers the mouse over the graphic to see an InfoWindow with attribute information.
If you want to hover the mouse over any feature and see an InfoWindow, see the sample "Load query results, show on hover".
Code
<!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>QueryTask with geometry, results as an InfoWindow</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<script src="https://js.arcgis.com/3.46/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.tasks.query");
var map, queryTask, query;
var symbol, infoTemplate;
function init() {
map = new esri.Map("mapDiv");
//create and add new layer
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer");
map.addLayer(layer);
//Listen for click event on the map, when the user clicks on the map call executeQueryTask function.
dojo.connect(map, "onClick", executeQueryTask);
//build query task
queryTask = new esri.tasks.QueryTask("https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2");
//Can listen for onComplete event to process results or can use the callback option in the queryTask.execute method.
//dojo.connect(queryTask, "onComplete", showResults);
//build query filter
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["state_name", "state_abbr", "pop2000"];
//create the infoTemplate to be used in the infoWindow.
//All ${attributeName} will be substituted with the attribute value for current feature.
infoTemplate = new esri.InfoTemplate("${state_name}", "State abbreviation: ${state_abbr}<br />Population (2000): ${pop2000}");
symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
}
function executeQueryTask(evt) {
//onClick event returns the evt point where the user clicked on the map.
//This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).
//set query geometry = to evt.mapPoint Geometry
query.geometry = evt.mapPoint;
//Execute task and call showResults on completion
queryTask.execute(query, showResults);
}
function showResults(featureSet) {
//remove all graphics on the maps graphics layer
map.graphics.clear();
var features = featureSet.features;
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
dojo.forEach(features,function(feature){
var graphic = feature;
graphic.setSymbol(symbol);
//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer.
map.graphics.add(graphic);
});
dojo.connect(map.graphics, "onMouseMove", function(evt) {
var g = evt.graphic;
map.infoWindow.setContent(g.getContent());
map.infoWindow.setTitle(g.getTitle());
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
});
dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} );
}
dojo.ready(init);
</script>
</head>
<body class="claro">
Click on a state to get more info. When state is highlighted, move mouse over state to get more info.
<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
</body>
</html>