POST
|
Hi, can someone please help me out with this? I've tried it a few time but couldn't get the image scroller into the infoWindow! :confused: I want to sort of MERGE this code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
#container { text-align: center; }
#imageBox{ margin: auto; width: 360px; border: 1px #000 solid; overflow: hidden; }
#imageBoxInside { width: 10000px; } #imageBox img { float: left; padding: 0px; margin: 0px; }
#imageBox br { clear: both; }
#controls img { border: 0; }
</style>
<script>
function moveToPrevious(){
new Effect.Move('imageBoxInside', { x: 180, y: 0, transition: Effect.Transitions.sinoidal });
}
function moveToNext(){
new Effect.Move('imageBoxInside', { x: -180, y: 0, transition: Effect.Transitions.sinoidal });
}
</script>
</head>
<body>
<div id="container">
<div id="imageBox">
<div id="imageBoxInside">
<img src="C:/Users/L33508/Desktop/Images/sauce.jpg" />
<img src="C:/Users/L33508/Desktop/Images/fish.jpg" />
<img src="C:/Users/L33508/Desktop/Images/pizza.jpg" />
<img src="C:/Users/L33508/Desktop/Images/noodles.jpg" />
<img src="C:/Users/L33508/Desktop/Images/cover.jpg" />
<img src="C:/Users/L33508/Desktop/Images/hotdog.jpg" />
<br/>
</div>
</div>
<div id="controls">
<a href="javascript:void(0);" onclick="moveToPrevious(); return true;"><img src="C:/Users/L33508/Pictures/left_arrow.jpg"/></a>
<a href="javascript:void(0);" onclick="moveToNext(); return true;"><img src="C:/Users/L33508/Pictures/right_arrow.jpg"/></a>
</div>
<div>
</body>
</html>
into this one shown here:
<%@ Page Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage.Master" CodeBehind="PeranakanMain.aspx.vb" Inherits="Peranakan_SG.PeranakanMain"
title="" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript">
function addSymbol(){
var map=OneMap.map;
if(map.getLayer("symbolLayer")==null){
map.addLayer(gLayer);
//dojo.connect(omap.map.infoWindow, "onShow", setInfoContent);
map.infoWindow.resize(525,252);
map.infoWindow.setFixedAnchor(esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT);
}
gLayer.clear();
alert("Do you know where Peranakan food can be found?? Take a look here!!!!");
var stX = "23319.3347409758";
var stY = "28825.7191286444";
var pt= new esri.geometry.Point(stX,stY,map.spatialReference);
//var strImage = "http://www.rw-designer.com/i/download48b.png";
var strImage = "images/museum.png";
var symbol = new esri.symbol.PictureMarkerSymbol(strImage, 25,25);
var attr = {"PlaceName":"Peranakan musem of Singapore","PlaceAddr":"addr"};
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setTitle("Building Name:");
infoTemplate.setContent(getInfoContent);
var graphic = new esri.Graphic(pt,symbol,attr,infoTemplate);
gLayer.add(graphic);
}
function setInfoContent(){
infoWindow.setContent(getInfoContent());
}
function getInfoContent(graphic){
var bc = new dijit.layout.BorderContainer({style: "font-size: 11pt; height: 520px; width:493px; background: #CCFFFF;"});
var c1 = new dijit.layout.ContentPane({
region: "top",
style: "height: 20px width: 100%",
content: "hello Peranakan!! Here is a brief description"
});
bc.addChild(c1);
//make a tab container
var tc = new dijit.layout.TabContainer({
region: "center",
style: "height: 65%; width: 100%; "
}, dojo.create("div"));
//display attribute information
var cp1 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1900 - 1930</font> ",
content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table>"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
title: "<font color= #E4287C><b>1931 - 1960</b></font>",
content: "<table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' target='foo'>1970</a><br/><a href='childpage2.htm' target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table>"
});
tc.addChild(cp2);
var cp3 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1961 - 1990</b></font> ",
content: "<table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
});
tc.addChild(cp3);
var cp4 = new dijit.layout.ContentPane({
//style: " background-color: red; ",
title: "<font color= #E4287C><b>1990 - 2011</b></font> ",
content: "<table><tr><td>Images <u>(add image)</u></td></tr></table><table><tr><td><img src='images/left_arrow.jpg'/></td><td><img src='images/batik_heritage1.jpg'/></td><td><img src='images/batik_heritage2.jpg'/></td><td><img src='images/batik_heritage3.jpg'/></td><td><img src='images/right_arrow.jpg'/></td></tr></table><br/><table><tr><td>Events <u>(add event)</u></td></tr></table><table width= 400 height = 120 ><tr><td width=150><a href='childpage1.htm' target='foo'>1970</a><br/><a href='childpage2.htm' target='foo'>1980</a></td><td><img src='images/timelineImg.jpg'/><td><iframe src='childpage1.htm' width='350' height='150' font-size='10pt' name='foo'></iframe></td></tr></table><br/><table><tr><td>Links <u>(add link)</u></td></tr><tr><td><a href = 'http://peranakan.org.sg/'>Peranakan Association</a></td></tr><tr><td><a href='http://www.google.com.sg'>Google</a></td></tr></table>"
});
tc.addChild(cp4);
bc.addChild(tc);
return bc.domNode;
}
dojo.addOnLoad(addSymbol);
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="NavigationContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 955px; height: 490px; margin: 0 0 0 0px;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" position=""
style="height: 498px; width: 1004px; margin-left: 63px;" ></div>
</div>
</div>
</asp:Content>
I'm still new & learning, any kind souls willing to help me out? P.S. When I insert the 2 script sources from the first sample into the second, my icon on the map disappears! Any idea why too?
... View more
04-13-2011
01:09 AM
|
0
|
0
|
366
|
POST
|
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. (:
... View more
03-24-2011
04:59 PM
|
0
|
0
|
285
|
POST
|
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!
... View more
03-24-2011
12:37 AM
|
0
|
3
|
2326
|
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:23 AM
|