Highlight image on mouseover

OscarMonell — Sat, 11 Dec 2021 15:30:29 GMT

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;
          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!

Re: Highlight image on mouseover

BrettLord-Castillo — Wed, 09 Jun 2010 14:59:36 GMT

It looks like the object in your map application are in the map service, not graphics on the map. That makes the mouseover a little tricky, because there is no event to trigger when you mouse over those locations.

If you are going to have a small number of objects, you might querying at startup and using that query to add graphic overlays (they can be transparent) to the map. Once you do that, then you have a mouseover event that can be triggered without doing a query.
That's how I handle the crime incidents in this map:
http://maps.stlouisco.com/police/beta/
There are actually transparent graphics over the top of each crime point. When you click on the crime point displayed in the map service, you are actually clicking on the graphic (so there is no query to execute, because the query was already executed when the graphic was created).

I did this so I could limit clicks to a specific city boundary. For example, if you go here:
http://maps.stlouisco.com/police/beta/?xg=JEN
You will see that you now only get a response when you click on incidents inside the blue boundary (the city limits of Jennings).

If you do the graphic overlay, you can then use esri.GraphicsLayer.onMouseOver() to detect when a graphic has been moused over and change the appearance of the graphic.

topic Highlight image on mouseover in ArcGIS JavaScript Maps SDK Questions

Highlight image on mouseover

Re: Highlight image on mouseover