kensu

Disable click graphic point

Discussion created by kensu on Jun 18, 2013
Latest reply on Jun 19, 2013 by rivercitygis
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>

Outcomes