Urgent help with hover-onclick!

YuwonNg — Thu, 24 Mar 2011 07:37:32 GMT

Hi, I'm new & I need help as I'm stuck with the codes.

Basically, what I'm trying to do is to implement hover & onclick functions on an icon. When I mouse over an icon, the infoWindow will appear or user can choose to onclick on the infoWindow.

Here's the sample codes that I tried with:

    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.tasks.geometry"); 
        //dojo.require("esri.dijit.InfoWindow");
        var map=null;
        var topoMap=null; 
        var levelNumber=1; 
        var centerPoint="32173.834393929,29296.8452311538"; 
        var OneMap = new GetOneMap('map','SM',{level:levelNumber,center:centerPoint}); 
        function initialize() { 
        try{
 
            map=OneMap.map; 
            //handle map object here
            if( map ==null  )
            {
                LogError("map not initialized");return;
            }
            //dojo.connect(map, "onLoad", PlaceLabel); 
            PlaceLabel();
        }
        catch(err2){LogError(err2.message);}
        }

        function PlaceLabel(evt) {
        
        map.graphics.clear(); 
        var strImage,symbol,pt,graphic,stX,stY,infoTemplate,json,g,cont,cont1,tit,lin;
        var icounter = 0;
 
stX             =   "23319.3347409758";
stY             =   "28825.7191286444";
tit = "TRY OUT";
cont = "abc";
lin= "www.onemap.com" 
 
pt= new esri.geometry.Point(stX,stY,map.spatialReference); 
cont1 = "Description:"+cont+ "<br/>Detail:"+lin; 
 
strImage = "C:/Users/L33508/Desktop/images/fish.jpg";
 
symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25,25);
 
json = {title:tit,content:cont1 };
 
infoTemplate = new esri.InfoTemplate(json);
graphic = new esri.Graphic(pt,symbol); 
graphic.setInfoTemplate(infoTemplate);
map.graphics.add(graphic); 
 
dojo.connect(graphic, "onClick", function(evt){
g = evt.graphic;
map.infoWindow.setTitle();
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
map.infoWindow.resize(260,130); 
 
 
});
 
 
}
dojo.addOnLoad(initialize);
    </script>

Here's the sample OneMap codes which I want to implement the above codes into:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <title>OneMap-Add Map</title>
  
   <script type='text/JavaScript' src='http://www.onemap.sg/API/JS?accessKEY=xkg8VRu6Ol+gMH+SUamkRIEB7fKzhwMvfMo/2U8UJcFhdvR4yN1GutmUIA3A6r3LDhot215OVVkZvNRzjl28TNUZgYFSswOi'></script>
    <script language="JavaScript" type="text/JavaScript">
    
//    //add map with default settings
//    var OneMap = new GetOneMap('divMain','SM');
    
//    //add map with defined centerPoint
//    var centerPoint="28968.103,33560.969"
//    var OneMap = new GetOneMap('divMain','SM',{center:centerPoint});

//    //add map with defined zoom level
//    var levelNumber=8;
//    var OneMap = new GetOneMap('divMain','SM',{level:levelNumber});

//    //add map with layer
//    var myLayerService = "http://www.onemap.sg/ArcGIS/rest/services/POI/MapServer";
//    var myLayer = new esri.layers.ArcGISDynamicMapServiceLayer(myLayerService);
//    var centerPoint="28968.103,33560.969"
//    var levelNumber=8;
//    var OneMap = new GetOneMap('divMain','SM',{level:levelNumber,layer:myLayer,center:centerPoint}); 
    
    
    //add map with defined center location and zoom level
    var centerPoint="28968.103,33560.969"
    var levelNumber=8;
    var OneMap = new GetOneMap('divMain','SM',{level:levelNumber,center:centerPoint});  

   
function addMap() {
    var myLayerService = "http://www.onemap.sg/ArcGIS/rest/services/POI/MapServer";
    var myLayer = new esri.layers.ArcGISDynamicMapServiceLayer(myLayerService);
    OneMap.map.addLayer(myLayer);
}
    
function GetCurrentLevel() {
  alert ("Current Level:" + OneMap.map.getLevel())
   
}

  </script>
 
  </head>
  <body class="tundra">
  
  <table>
  <tr>
  <td>
  <div id="divMain" style='width:450px;height:450px;'></div></td>
  <td>Map navigation using mouse:
    <ul>
      <li>Drag to pan</li>
      <li>Mouse Scroll Forward to zoom in</li>
      <li>Mouse Scroll Backward to zoom out</li>
      <li>Use Arrow keys to pan</li>
      <li>Double Click to Center and Zoom in</li>
    </ul>
  </td>  </tr></table>
  <input id="Button1" type="button" style="width:150px" value="Add Map" onclick="addMap()" />
<input id="Button3" type="button" style="width:150px" value="Current Map Level" onclick="GetCurrentLevel()" />


    </body>

</html>

I've also attached a sample screenshot of a onclick version. However, I want both the onclick & hover.

Please help, thanks!

Re: Urgent help with hover-onclick!

derekswingley1 — Thu, 24 Mar 2011 17:58:03 GMT

I would encourage you to rethink this design. I would use onmouseover or onclick, but not both (and I would go with onclick).

From a practical standpoint, how are you envisioning this would work? For a user to click an icon, they have to mouse over it. It doesn't make sense to do the same thing for onmouseover and onclick.

Re: Urgent help with hover-onclick!

YuwonNg — Thu, 24 Mar 2011 23:59:31 GMT

I would encourage you to rethink this design. I would use onmouseover or onclick, but not both (and I would go with onclick).

From a practical standpoint, how are you envisioning this would work? For a user to click an icon, they have to mouse over it. It doesn't make sense to do the same thing for onmouseover and onclick.

Hi, thanks for the reply! I have decided to use onclick as there would be multiple tabs in the infoWindow. (:

Re: Urgent help with hover-onclick!

WarrenMedernach — Thu, 12 May 2011 14:02:56 GMT

So then how would you suggest the following design scenario: I want a tooltip/maptip displayed automatically when a user hovers over a feature, but then I would like to enable them to edit the attributes by selecting (onclick) the feature?

Or are there better ways to accomplish this?

Thanks so much.

Warren M

I would encourage you to rethink this design. I would use onmouseover or onclick, but not both (and I would go with onclick).

From a practical standpoint, how are you envisioning this would work? For a user to click an icon, they have to mouse over it. It doesn't make sense to do the same thing for onmouseover and onclick.

topic Re: Urgent help with hover-onclick! in ArcGIS JavaScript Maps SDK Questions

Urgent help with hover-onclick!

Re: Urgent help with hover-onclick!

Re: Urgent help with hover-onclick!

Re: Urgent help with hover-onclick!