Disable click graphic point

EduardoCarvalho · ‎06-18-2013

HI,

I created two points and when I move mouse over on point, show the popup about the point. But, when I click at point, the API create a new graphic on clicked point with light blue square.

My problem is when I move mouse over the same point after clicked at point, the popup is blank, because the event onMouseOver get the new graphic, not my graphic point.

It's possible block the event onClick on point or the problem is mine with my script?

<!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">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

  <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">

  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script>   
  
  <style>
    html, body, #mapDiv {
   height:100%;
   width:100%;
   margin:0;
   padding:0;
    }
  </style>  
  
  <script>
  // Imports
  dojo.require("esri.map");
  dojo.require("esri.dijit.Popup");
     
  var map;
  var dialog;
  var graphic;
  var popup;       

  function init() {   
   
   map = new esri.Map("mapDiv", {
     center: [-73.966339,40.781191],
     zoom: 15,
     basemap: "streets"
   });
   
   dojo.connect(map, "onLoad", load);
  }
  
  function load(){   
   map.graphics.clear();
   
   addPointPopUp();      
   
   dojo.connect(map.graphics, "onMouseOver", openPopUp);
   dojo.connect(map.graphics, "onMouseOut", closePopUp); 
  }
  
  function openPopUp(event){
   map.infoWindow.setContent(event.graphic.getContent());
   map.infoWindow.setTitle(event.graphic.getTitle());
   map.infoWindow.show(event.screenPoint,map.getInfoWindowAnchor(event.screenPoint));   
  }
  
  function closePopUp() {     
   map.infoWindow.hide();
  } 
  
  function addPointPopUp(){
  
   // First Point
   var point = new esri.geometry.Point(-73.966339, 40.781191);
   var defaultSymbol = new esri.symbol.PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Shapes/GreenPin1LargeB.png', 55, 45);     
   defaultSymbol.setOffset(0, 17);
   var graphic = new esri.Graphic(point, defaultSymbol); 

   var popupTemplate = new esri.dijit.PopupTemplate({
     title: " He ",
     fieldInfos: [
      {fieldName: "Name: John", visible: true},
      {fieldName: "Age: 18", visible:true}
     ]
   });

   graphic.setInfoTemplate(popupTemplate);
   map.graphics.add(graphic); 
   
   // Second Point
   point = new esri.geometry.Point(-73.977339, 40.782191);
   var defaultSymbol = new esri.symbol.PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png', 55, 45);     
   defaultSymbol.setOffset(0, 17);
   graphic = new esri.Graphic(point, defaultSymbol); 

   popupTemplate = new esri.dijit.PopupTemplate({
     title: " She ",
     fieldInfos: [
      {fieldName: "Name: Anne", visible: true},
      {fieldName: "Age: 19", visible:true}
     ]
   });

   graphic.setInfoTemplate(popupTemplate);
   map.graphics.add(graphic);   
  }

  dojo.ready(init);
  
  </script>
 </head>
  
 <body class="claro">  
  <div id="mapDiv">
  </div>
 </body>
  
</html>

JacksonGilman1 · ‎06-19-2013

Here's a crude way to go about it at least; you can decorate the GraphicsLayer._processEvent method. Roughly:


function modifyLayerYoureAddingPointsTo(layer) {
                var _processEvent = layer._processEvent;
                layer._processEvent = function (evt) {
                    _processEvent.call(this, evt);
                    if (evt.graphic && evt.graphic.originalPoint) {
                        evt.graphic = evt.graphic.originalPoint;
                    }
                }
            }

            function createLightBlueSquare(originalPoint) {
                var lightBlueGraphic = new Graphic();
                // .. add symbology geometry, etc...
                lightBlueGraphic.originalPoint = originalPoint;
                return lightBlueGraphic;
            }

Note: The above wasn't tested, but I've used this technique in the past and it works