I've created a simple ESRI Javascript API map withquery functionality. (Click on a point to show infowindow).My question: Is it possible to highlight the points/images/symbols on mouseover?It's always easier for the user to know that the object is clickableif it has a highlight behavior.The map is found here:http://kartweb.staffanstorp.se/uac.htmThe code embedded here: <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<style type="text/css">
/* set title font properties */
.infowindow .window .top .right .user .titlebar .title { font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:8pt; }
/* set content font properties */
.infowindow .window .top .right .user .content { font-size:7pt; }
</style>
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.tasks.query");
var map, queryTask, query;
var featureSet;
function init() {
var startExtent = new esri.geometry.Extent(108390,6156104,141918,6179811, new esri.SpatialReference({"wkid":3008}));
//set position of slider at 10 pixels offset from right/top of map
//set slider height to 100 pixels
esriConfig.defaults.map.slider = { left:"10px", top:"5px", width:null, height:"100px" };
//create map
map = new esri.Map("karta",{extent:startExtent});
dojo.connect(map,"onLoad", function(map) {map.infoWindow.resize(135, 160);} );
var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://kartweb.staffanstorp.se/ArcGIS/rest/services/Grundkartaskane/MapServer/");
map.addLayer(tiledLayer);
//Takes a URL to a dynamic map service.
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://kartweb.staffanstorp.se/ArcGIS/rest/services/uac/MapServer/");
map.addLayer(dynamicMapServiceLayer);
//Listen for click event on the map, when the user clicks on the map call executeQueryTask function.
dojo.connect(map, "onClick", executeQueryTask);
//Listent for infoWindow onHide event
dojo.connect(map.infoWindow, "onHide", function() {map.graphics.clear();});
//build query task
queryTask = new esri.tasks.QueryTask("http://kartweb.staffanstorp.se/ArcGIS/rest/services/uac/MapServer/1");
//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 = ["Name", "URL"];
}
function executeQueryTask(evt) {
map.infoWindow.hide();
map.graphics.clear();
featureSet = null;
var centerPoint = new esri.geometry.Point
(evt.mapPoint.x,evt.mapPoint.y,evt.mapPoint.spatialReference);
var mapWidth = map.extent.getWidth();
//Divide width in map units by width in pixels
var pixelWidth = mapWidth/map.width;
//Calculate a 40 pixel envelope width (20 pixel tolerance on each side)
var tolerance = 40 * pixelWidth;
//Build tolerance envelope and set it as the query geometry
var queryExtent = new esri.geometry.Extent
(1,1,tolerance,tolerance,evt.mapPoint.spatialReference);
query.geometry = queryExtent.centerAt(centerPoint);
//Execute task and call showResults on completion
queryTask.execute(query, function(fset) {
if (fset.features.length === 1) {
showFeature(fset.features[0],evt);
} else if (fset.features.length !== 0) {
showFeatureSet(fset,evt);
}
});
}
function showFeature(feature,evt) {
map.graphics.clear();
//set symbol
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
feature.setSymbol(symbol);
//construct infowindow title and content
var attr = feature.attributes;
var title = attr.Name;
var content = attr.URL
map.infoWindow.setTitle(title);
map.infoWindow.setContent(content);
(evt) ? map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint)) : null;
}
function showFeatureSet(fset,evt) {
//remove all graphics on the maps graphics layer
map.graphics.clear();
var screenPoint = evt.screenPoint;
featureSet = fset;
var numFeatures = featureSet.features.length;
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the infowindow.
var title = "You have selected " + numFeatures + " fields.";
var content = "Please select desired field from the list below.<br />";
for (var i=0; i<numFeatures; i++) {
var graphic = featureSet.features;
content = content + graphic.attributes.Name + " Field (<A href='#' onclick='showFeature(featureSet.features[" + i + "]);'>show</A>)<br/>";
}
map.infoWindow.setTitle(title);
map.infoWindow.setContent(content);
map.infoWindow.show(screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
//resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
//the following help topic for more details http://helpdev.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
var resizeTimer;
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized
clearTimeout(resizeTimer);
resizeTimer = setTimeout( function() {
map.resize();
map.reposition();
}, 500);
});
});
}
dojo.addOnLoad(init);
</script>
I would apreciate any help!