oscar.monellesri-se-esridist

Highlight image on mouseover

Discussion created by oscar.monellesri-se-esridist Employee on Jun 8, 2010
Latest reply on Jun 9, 2010 by lordcasb
I've created a simple ESRI Javascript API map with
query 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 clickable
if it has a highlight behavior.

The map is found here:
http://kartweb.staffanstorp.se/uac.htm

The 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[i];
          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!

Outcomes