I'm trying to replicate this sample http://developers.arcgis.com/javascript/jssamples/query_hover.html
I just replaced the url in the querytask to my own and changes the formatting of the infoTemplate and the filtering of ther query to
match my own requirements and the graphics was not showing on the map. then, I changed the symbol type from simplefillSymbol to simple MarkerSymbol because I'm using points not polygons. and this also didn't work. I attached my code to see what changes I did to the original code.
help plz!
Solved! Go to Solution.
Hi Isra,
You will want to make sure you're executing the query 'where' statement. Also, you will want to change the highlightSymbol to a SimpleMarkerSymbol as well. Below is a point data example you can refer to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>QueryTask with geometry, results as an InfoWindow onHover</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map;
require([
"esri/map",
"esri/graphic",
"esri/InfoTemplate",
"esri/symbols/SimpleMarkerSymbol",
"esri/SpatialReference",
"esri/geometry/Extent",
"esri/layers/GraphicsLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/Color",
"dojo/domReady!"
],
function (
Map, Graphic, InfoTemplate, SimpleMarkerSymbol, SpatialReference, Extent, GraphicsLayer,
SimpleFillSymbol, SimpleLineSymbol, Query, QueryTask, Color
) {
map = new Map("mapDiv", {
basemap: "streets",
center: [-81.792107, 26.150807],
zoom: 8
});
map.on("load", setUpQuery);
function setUpQuery () {
var queryTask = new QueryTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0");
//build query filter
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
query.outSpatialReference = { "wkid": 102100 };
query.where = "st = 'FL'";
var infoTemplate = new InfoTemplate();
var content = "<b>City Name: </b>${areaname}<br/>" +
"<b>2000 Population: </b>${pop2000}";
infoTemplate.setTitle("${areaname}");
infoTemplate.setContent(content);
map.infoWindow.resize(245, 125);
//Can listen for complete event to process results
//or can use the callback option in the queryTask.execute method.
queryTask.on("complete", function (event) {
map.graphics.clear();
var highlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 1),
new Color([125, 125, 125, 0.35]));
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 1),
new Color([0,255,0,0.25]));
var features = event.featureSet.features;
var countiesGraphicsLayer = new GraphicsLayer();
//QueryTask returns a featureSet.
//Loop through features in the featureSet and add them to the map.
var featureCount = features.length;
for (var i = 0; i < featureCount; i++) {
//Get the current feature from the featureSet.
var graphic = features; //Feature is a graphic
graphic.setSymbol(symbol);
graphic.setInfoTemplate(infoTemplate);
countiesGraphicsLayer.add(graphic);
}
map.addLayer(countiesGraphicsLayer);
map.graphics.enableMouseEvents();
//listen for when the mouse-over event fires on the countiesGraphicsLayer
//when fired, create a new graphic with the geometry from event.graphic
//and add it to the maps graphics layer
countiesGraphicsLayer.on("mouse-over",function (event) {
map.graphics.clear(); //use the maps graphics layer as the highlight layer
var graphic = event.graphic;
map.infoWindow.setContent(graphic.getContent());
map.infoWindow.setTitle(graphic.getTitle());
var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);
map.graphics.add(highlightGraphic);
map.infoWindow.show(event.screenPoint,
map.getInfoWindowAnchor(event.screenPoint));
});
//listen for when map.graphics mouse-out event is fired
//and then clear the highlight graphic
//and hide the info window
map.graphics.on("mouse-out", function () {
map.graphics.clear();
map.infoWindow.hide();
});
});
queryTask.execute(query);
}
});
</script>
</head>
<body class="claro">
Hover over a city in Florida to get more information.
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>
Hi Isra,
You will want to make sure you're executing the query 'where' statement. Also, you will want to change the highlightSymbol to a SimpleMarkerSymbol as well. Below is a point data example you can refer to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>QueryTask with geometry, results as an InfoWindow onHover</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<script src="http://js.arcgis.com/3.11/"></script>
<script>
var map;
require([
"esri/map",
"esri/graphic",
"esri/InfoTemplate",
"esri/symbols/SimpleMarkerSymbol",
"esri/SpatialReference",
"esri/geometry/Extent",
"esri/layers/GraphicsLayer",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/query",
"esri/tasks/QueryTask",
"esri/Color",
"dojo/domReady!"
],
function (
Map, Graphic, InfoTemplate, SimpleMarkerSymbol, SpatialReference, Extent, GraphicsLayer,
SimpleFillSymbol, SimpleLineSymbol, Query, QueryTask, Color
) {
map = new Map("mapDiv", {
basemap: "streets",
center: [-81.792107, 26.150807],
zoom: 8
});
map.on("load", setUpQuery);
function setUpQuery () {
var queryTask = new QueryTask("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/0");
//build query filter
var query = new Query();
query.returnGeometry = true;
query.outFields = ["*"];
query.outSpatialReference = { "wkid": 102100 };
query.where = "st = 'FL'";
var infoTemplate = new InfoTemplate();
var content = "<b>City Name: </b>${areaname}<br/>" +
"<b>2000 Population: </b>${pop2000}";
infoTemplate.setTitle("${areaname}");
infoTemplate.setContent(content);
map.infoWindow.resize(245, 125);
//Can listen for complete event to process results
//or can use the callback option in the queryTask.execute method.
queryTask.on("complete", function (event) {
map.graphics.clear();
var highlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 1),
new Color([125, 125, 125, 0.35]));
var symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 1),
new Color([0,255,0,0.25]));
var features = event.featureSet.features;
var countiesGraphicsLayer = new GraphicsLayer();
//QueryTask returns a featureSet.
//Loop through features in the featureSet and add them to the map.
var featureCount = features.length;
for (var i = 0; i < featureCount; i++) {
//Get the current feature from the featureSet.
var graphic = features; //Feature is a graphic
graphic.setSymbol(symbol);
graphic.setInfoTemplate(infoTemplate);
countiesGraphicsLayer.add(graphic);
}
map.addLayer(countiesGraphicsLayer);
map.graphics.enableMouseEvents();
//listen for when the mouse-over event fires on the countiesGraphicsLayer
//when fired, create a new graphic with the geometry from event.graphic
//and add it to the maps graphics layer
countiesGraphicsLayer.on("mouse-over",function (event) {
map.graphics.clear(); //use the maps graphics layer as the highlight layer
var graphic = event.graphic;
map.infoWindow.setContent(graphic.getContent());
map.infoWindow.setTitle(graphic.getTitle());
var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);
map.graphics.add(highlightGraphic);
map.infoWindow.show(event.screenPoint,
map.getInfoWindowAnchor(event.screenPoint));
});
//listen for when map.graphics mouse-out event is fired
//and then clear the highlight graphic
//and hide the info window
map.graphics.on("mouse-out", function () {
map.graphics.clear();
map.infoWindow.hide();
});
});
queryTask.execute(query);
}
});
</script>
</head>
<body class="claro">
Hover over a city in Florida to get more information.
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>
Thank you that was really helpful. I've been looking for a sample for the points feature and I had no luck.
I have two more question though,
1- What if I don't wanna filter the query? I want all the features to appear on the map?
2- Is it possible to filter the query like this query.where = "ROOM_NO = '1'"; And query.where = "ROOM_NO = '13'"; meaning to have it filtered with two statements or even more?
1. You can use the following query:
query.where = "1=1";
2. You can use the following query:
query.where = "ROOM_NO = '13' OR ROOM_NO = '1'"
Thank you Jake,
it workerd.
Jake,
I'm wondering if there is a way to add a timer for the infoWindow. I inserted links in the content so whenever I hover on a feature, the infoWindow appears but when I go ahead to click on the link inside the content it disapears.
I've been looking for a way to add a timer and tried several methods but no luck.
Thank you
Isra
Hi Isra,
I would recommend creating a new thread for this question.