bryankaraffa

FeatureLayers each w/ onMouseOver highlight & onClick infowindow

Discussion created by bryankaraffa on May 25, 2012
Hi Everybody,

Been working on this little script but I just can't seem to get it working...  I am trying to add an overlay layer that onMouseOver highlight effect with an onClick  event to display the infowindow.  I believe the best way to do this is with a FeatureLayer(??) and have gotten it to a point where the layer is added, and it highlights the symbol onMouseover, but my onClick function isn't being called because of the overlay.... here's what I have so far.. hoping somebody can tell me if I'm going about this the right way and help me through it..

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <!--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>
    </title>
     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
     <style type="text/css">
      html, body {
        height: 100%; width: 100%; margin: 0;
      }
      body{
        background-color:white; overflow:hidden;
        font-family: "Trebuchet MS";
      }
      #header {
        background-image: url(http://help.arcgis.com/en/webapi/javascript/arcgis/demos/layout/images/banner.jpg); background-repeat: repeat-x;
        margin: 2px;
        border: solid 4px #224a54;
        color:white; font-size:18pt;
        text-align:left; font-weight:bold; height:70px;
      }
      #subheader {
        font-size:small;
        color:white;
        padding-left:20px;
      }
      #rightPane{
        background-color:white;
        color:#3f3f3f;
        border: solid 2px #224a54;
        width:20%;
      }
      #leftPane{
        margin: 5px;
        padding:2px;
        background-color:white;
        color:#3f3f3f;
        border: solid 2px #224a54;
        width:20%;
     }
      #map {
        margin: 5px;
        border:solid 4px #224a54;
        -moz-border-radius: 4px;
      }
      #footer {
        margin: 2px;
        border: solid 2px #224a54;
        background-color:#ecefe4;color:#3f3f3f;
       font-size:10pt; text-align:center; height:40px;
      }
      .dijitTabInnerDiv{
        background-color:#ecefe4;
      }
      #tabs{
        padding:5px;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {
        parseOnLoad: true
      };
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
    <script type="text/javascript">
      dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
   dojo.require("dijit.layout.TabContainer");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Legend");
   dojo.require("esri.layers.FeatureLayer");
     
      var map;
   var infoTemplate, highlightLayer;
  
      function init() {
        //var initialExtent = new esri.geometry.Extent({"xmin":-9594311.29,"ymin":4594549.09,"xmax":-9476292.52,"ymax":4639188.31,"spatialReference":{"wkid":102100}});
        map = new esri.Map("map", {
        //  extent: initialExtent
        });
        dojo.connect(map, 'onLoad', function(map) {
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
        var basemapUrl = "http://ags2.geog.ucsb.edu/ArcGIS/rest/services/icmBasemap20120413/MapServer";
        var dynamicUrl = "http://ags2.geog.ucsb.edu/ArcGIS/rest/services/icmRecycling20120411/MapServer/2";
       
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
 
  var recyclingInfoTemplate = new esri.InfoTemplate("Recycling", "<b>FID</b>: ${FID} <br />");
        var dynamicLayer = new esri.layers.FeatureLayer(dynamicUrl,{
      mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
   outFields: ["*"],
   infoTemplate: recyclingInfoTemplate
  });
  selectSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE, 5, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,   new dojo.Color([255,144,0]), 1),   new dojo.Color([255,144,0,0.25]));
  dynamicLayer.setSelectionSymbol(selectSymbol);
 

  var dynamicLayerOnMouseOver = dojo.connect(dynamicLayer, "onMouseOver", function (evt) {
            map.setMapCursor("pointer");
   var query = new esri.tasks.Query();
   query.where = "1=1";
   dynamicLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
   console.log('onMouseOver: dynamicLayer - Pt:' + evt.screenPoint);
        });
  var dynamicLayerOnMouseOut = dojo.connect(dynamicLayer, "onMouseOut", function (evt) {
            map.setMapCursor("pointer");
   dynamicLayer.clearSelection();
   console.log('onMouseOut: dynamicLayer');
        });
 
 

       
        dojo.connect(map,'onLayersAddResult',function(results){
         //add the legend
          var legend = new esri.dijit.Legend({
            map:map,
            layerInfos:[{layer:dynamicLayer,title:"Recycling Layer"}],
            arrangement:esri.dijit.Legend.ALIGN_RIGHT
          },"legendDiv");
          legend.startup();
        });
 
       
        map.addLayer(basemap);
        map.addLayers([dynamicLayer]);
      }


      //show map on load
      dojo.addOnLoad(init);
    </script>
  </head>
 
  <body class="claro">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
    gutters="false" style="width:100%; height:100%;">
      <div id="header" dojotype="dijit.layout.ContentPane" region="top">
        This is the header section
       <div id="subheader">subheader</div>
      </div>
      <div dojotype="dijit.layout.ContentPane" id="leftPane" region="left">
        <div dojotype="dijit.layout.TabContainer" >
          <div dojotype="dijit.layout.ContentPane" title = "Legend" selected="true">
            <div id="legendDiv"></div>
          </div>
          <div dojotype="dijit.layout.ContentPane"  title="About" >
            To the right is a map.  This is an area of text that could talk about the map and a summary of what it is, who made it, and why.
          </div>
        </div>
      </div>
      <div id="map" dojotype="dijit.layout.ContentPane" region="center">
      </div>
      <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
        this is the footer section
      </div>
    </div>
  </body>

</html>[/HTML]

Outcomes