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!
