Mouse event and rest service

vinayb — Sun, 12 Dec 2021 05:08:59 GMT

HI All,

I saw this sample http://developers.arcgis.com/en/javascript/sandbox/sandbox.html?sample=fl_hover

here population is displayed when we mouse hover a south calorina state, if i want to display something onclick , then its not happening , please help me understand this.i added following code but still no help.

 require(["dojo/on", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic"], function(on, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic) {
                    on(southCarolinaCounties, "click", function(evt) {
                        alert("graphics");
                        // clears current selection
                       
                        
                        // create new graphic with selected graphic's geometry
                        var graphic = new Graphic(evt.graphic.geometry);
                        
                        // create a new symbol for the graphic
                        var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
                        
                        // add symbol to the graphic
                        graphic.setSymbol(sfs);     
                        
                        // add the graphic to the map   
                        map.graphics.add(graphic);
                    });
                });

Do it depend on rest service that we are using whether we can add onclick funtionality or how does mous event work .Please guide.

Re: Mouse event and rest service

vinayb — Fri, 23 Aug 2013 13:13:22 GMT

Great,

can you please tell me what is the difference in applying onclcik function to map object and applying onclick to featurelayer service.

Re: Mouse event and rest service

ShreyasVakil — Fri, 23 Aug 2013 15:09:48 GMT

applying onclcik function to map object

This will apply onClick to the map, in simple words, if you click anywhere on the map the on click event will fire.

applying onclick to featurelayer service

When you apply on click to a feature layer, it'll only fire when you click on any feature on the map.

Re: Mouse event and rest service

ShreyasVakil — Sun, 12 Dec 2021 05:09:02 GMT

Follow the code and see if this what you were looking for.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--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>Feature Layer - display results as an InfoWindow onHover</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      #mapDiv {
        position: relative;
      }
      #info {
        background: #fff;
        box-shadow: 0 0 5px #888;
        left: 1em;
        padding: 0.5em;
        position: absolute;
        top: 1em;
        z-index: 40;
      }
    </style>

    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      var map, dialog;
      require([
        "esri/map", "esri/layers/FeatureLayer",
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", 
        "esri/renderers/SimpleRenderer", "esri/graphic", "esri/lang",
        "dojo/_base/Color", "dojo/number", "dojo/dom-style", 
        "dijit/TooltipDialog", "dijit/popup", "dojo/domReady!"
      ], function(
        Map, FeatureLayer,
        SimpleFillSymbol, SimpleLineSymbol,
        SimpleRenderer, Graphic, esriLang,
        Color, number, domStyle, 
        TooltipDialog, dijitPopup
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-80.94, 33.646],
          zoom: 8,
          slider: false
        });
        
        var southCarolinaCounties = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
        });
        southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");

        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID, 
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID, 
            new Color([255,255,255,0.35]), 
            1
          ),
          new Color([125,125,125,0.35])
        );
        southCarolinaCounties.setRenderer(new SimpleRenderer(symbol));
        map.addLayer(southCarolinaCounties);

        map.infoWindow.resize(245,125);
        
        dialog = new TooltipDialog({
          id: "tooltipDialog",
          style: "position: absolute; width: 250px; font: normal normal normal 10pt Helvetica;z-index:100"
        });
        dialog.startup();
        
        var highlightSymbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID, 
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID, 
            new Color([255,0,0]), 3
          ), 
          new Color([125,125,125,0.35])
        );

        //close the dialog when the mouse leaves the highlight graphic
        map.on("load", function(){
          map.graphics.enableMouseEvents();
          map.graphics.on("mouse-out", closeDialog);
          
        });
                
        //listen for when the onMouseOver event fires on the countiesGraphicsLayer
        //when fired, create a new graphic with the geometry from the event.graphic and add it to the maps graphics layer
        southCarolinaCounties.on("click", function(evt){
          var t = "<b>${NAME}</b><hr><b>2000 Population: </b>${POP2000:NumberFormat}<br>"
            + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br>"
            + "<b>2007 Population: </b>${POP2007:NumberFormat}<br>"
            + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}";
  
          var content = esriLang.substitute(evt.graphic.attributes,t);
          var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
          map.graphics.add(highlightGraphic);
          
          dialog.setContent(content);

          domStyle.set(dialog.domNode, "opacity", 0.85);
          dijitPopup.open({
            popup: dialog, 
            x: evt.pageX,
            y: evt.pageY
          });
        });
    
        function closeDialog() {
          map.graphics.clear();
          dijitPopup.close(dialog);
        }

      });
    </script>
  </head>
  <body class="tundra">
    <div id="mapDiv">
      <div id="info">
        Hover over a county in South Carolina to get more information.
      </div>
    </div>
  </body>
</html>

Do it depend on rest service that we are using whether we can add onclick funtionality or how does mous event work

No it does not depend on the REST service. These are all client side events and does not rely on the service. Service is only responsible to supply us the data when requested.

topic Re: Mouse event and rest service in ArcGIS JavaScript Maps SDK Questions

Mouse event and rest service

Re: Mouse event and rest service

Re: Mouse event and rest service

Re: Mouse event and rest service