Multiple 'onClick' events to query and perform other functions

ChadRiley · ‎05-09-2012

I'm trying to connect two onClick events. The first will perform a query and place a graphic on the map. I would then like to click on the graphic and perform some other action (open another page for example). What is currently happening is the graphic is being placed and when i click it the first time, it performs the action i want. But when i place another graphic and click it, i get nothing...it just places a new graphic in the location I clicked.

Any help would be greatly appreciated

http://jsfiddle.net/sTbBQ/

<!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,IE=9" />
    <!--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>Topographic Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriScalebar{
        padding: 20px 20px;
      }
      #map{
        padding:0;
      }
    </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.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");

      var vectorBM = "http://carvergisweb1.co.carver.mn.us/ArcGIS_AD/rest/services/OpenAccess/CC_Basemap_Vector_UTM/MapServer";
      var orthoBM = "http://carvergisweb1.co.carver.mn.us/ArcGIS_AD/rest/services/OpenAccess/CC_Basemap_Ortho_UTM/MapServer"
      var initialExtent = new esri.geometry.Extent({ "xmin": 415899, "ymin": 4933051, "xmax": 463042, "ymax": 4989947, "spatialReference": { "wkid": 26915} });
      var map;
       var graphicsLayer = new esri.layers.GraphicsLayer();         
        function init() {

            map = new esri.Map("map", { extent: initialExtent });
            streetMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(vectorBM);
            map.addLayer(streetMapServiceLayer);        
            dojo.connect(map,"onClick",doidentifyTask);
            dojo.connect(map,"onLoad",function(){
                dojo.connect(graphicsLayer,"onClick",function(){
                    alert("graphic clicked");
                });
            });   
        }
        function doidentifyTask(evt){
            graphicsLayer.clear();
            var symbol = new esri.symbol.PictureMarkerSymbol('http://carvergisweb1.co.carver.mn.us/mpublicparcel/images/identify.png', 35, 35);
            var pt = new esri.geometry.Point(evt.mapPoint);
            graphicsLayer.add(new esri.Graphic(pt, symbol));
            map.addLayer(graphicsLayer);
        }

      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
     </div>
    </div>
  </body>

</html>

KellyHutchins · ‎05-09-2012

Looks like you are adding the graphics layer to the map in doIdentifyTask which will add a graphics layer to the map each time you click the map. Try something like this instead:

  var vectorBM = "http://carvergisweb1.co.carver.mn.us/ArcGIS_AD/rest/services/OpenAccess/CC_Basemap_Vector_UTM/MapServer";
      var orthoBM = "http://carvergisweb1.co.carver.mn.us/ArcGIS_AD/rest/services/OpenAccess/CC_Basemap_Ortho_UTM/MapServer"
      var initialExtent = new esri.geometry.Extent({ "xmin": 415899, "ymin": 4933051, "xmax": 463042, "ymax": 4989947, "spatialReference": { "wkid": 26915} });
      var map;
      var graphicsLayer;

        function init() {   
            map = new esri.Map("map", { extent: initialExtent });
            
            dojo.connect(map,"onLoad",function(){
                graphicsLayer = new esri.layers.GraphicsLayer();      
                map.addLayer(graphicsLayer);
                dojo.connect(graphicsLayer,"onClick",function(){
                    alert("graphic clicked");
                });
            });   
            
            streetMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(vectorBM);
            map.addLayer(streetMapServiceLayer);     
               
           dojo.connect(map,"onClick",doidentifyTask);
           

        }
        function doidentifyTask(evt){
            graphicsLayer.clear();
            var symbol = new esri.symbol.PictureMarkerSymbol('http://carvergisweb1.co.carver.mn.us/mpublicparcel/images/identify.png', 35, 35);
            var pt = new esri.geometry.Point(evt.mapPoint);
            graphicsLayer.add(new esri.Graphic(pt, symbol));
        }

ChadRiley · ‎05-10-2012

Kelly, great, that was the solution. I've got it working now.
http://jsfiddle.net/sTbBQ/2/
Thanks for the help!