I am adding some graphics to the map in a parent window, and I would like to show the same graphics in a child window. I am using the ArcGIS Javascript API (version 3.1). I have written code as below:
Complete code in parent window:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="ePermit.Test.Test1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>GIS Search </title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
<%--<link href="Styles/claro.css" rel="stylesheet" type="text/css" />--%>
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body
{
overflow: hidden;
font-family: "Trebuchet MS";
}
#header
{
height: 30px;
padding: 15px;
overflow: hidden;
background-color: #d0eff3;
color: #80a8c1;
font-size: 21pt;
text-align: left;
border: solid 2px #80a8c1;
font-weight: bold;
}
#leftPane
{
float: left;
padding-right:8px;
margin:0px;
background-color: #fafafa;
color: #80a8c1;
border: solid 1px #80a8c1;
}
#rightPane
{
float: right;
background-color: #fafafa;
color: #80a8c1;
border: solid 1px #80a8c1;
width:22%;
}
#centerPane
{
float: left;
margin: 0px auto;
padding: 0px 10px;
background-color:#CCCCCC;
}
#results
{
background-color: #00FFFF;
color: #80a8c1;
text-align: center;
border: solid 0px #80a8c1;
margin: 0px;
padding: 0px 10px;
}
.roundedCorners
{
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
}
/*Example of a id selector, using the # side with an element name will
apply this style to a single unique element, in this case the html element
with an id of 'map'.*/
#map
{
margin: 5px;
border: solid 1px #80a8c1;
}
.dijitBorderContainer, .dijitGutter
{
background-color: #d0eff3 !important;
}
/*Example of a class selector, using a period in front of an HTML elment
allows you to specify a style for multiple elements. All elements with
a class attribute set to the specified value will have this style applied.*/
.shadow
{
padding: 8px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0px 6px 3px -3px #888;
-webkit-box-shadow: 0px 6px 3px -3px #888;
box-shadow: 0px 6px 3px -3px #888;
background-color: white;
border: solid 4px #80a8c1;
}
.mapOverviewIcon
{
background-image: url(../images/Icons/toggleov.GIF);
width: 16px;
height: 16px;
}
.zoomToFullIcon
{
background-image: url(../images/Icons/fullextent.GIF);
width: 16px;
height: 16px;
}
.zoomToActiveIcon
{
background-image: url(../images/Icons/zoomactive.GIF);
width: 16px;
height: 16px;
}
.zoomToBackIcon
{
background-image: url(../images/Icons/back2ex.GIF);
width: 16px;
height: 16px;
}
.zoominIcon
{
background-image: url(../images/Icons/zoomin16.GIF);
width: 16px;
height: 16px;
}
.zoomoutIcon
{
background-image: url(../images/Icons/zoomout16.GIF);
width: 16px;
height: 16px;
}
.pan
{
background-image: url(../images/Icons/pan.GIF);
width: 16px;
height: 16px;
}
.identityIcon
{
background-image: url(../images/Icons/identify.GIF);
width: 16px;
height: 16px;
}
.printIcon
{
background-image: url(../images/Icons/print.GIF);
width: 16px;
height: 16px;
}
.refreshIcon
{
background-image: url(../images/Icons/refresh.GIF);
width: 16px;
height: 16px;
}
.plssHistoryIcon
{
background-image: url(../images/Icons/history_icon.GIF);
width: 16px;
height: 16px;
}
.plssAcreageIcon
{
background-image: url(../images/Icons/acreage_icon.GIF);
width: 16px;
height: 16px;
}
.plssAccurayIcon
{
background-image: url(../images/Icons/accuracy_icon.GIF);
width: 16px;
height: 16px;
}
.clearLayersIcon
{
background-image: url(../images/Icons/reset_plsstool.GIF);
width: 16px;
height: 16px;
}
.xouter
{
width: 100%;
border: 1px solid #000;
}
.floatstop {
clear:both;
}
.floatstopl {
clear:left;
}
.floatstopr {
clear:right;
}
.esriOverviewMap.ovwTL .ovwShow, .esriOverviewMap.ovwBR .ovwHide {
display: none !important;
}
.esriOverviewMap.ovwTR .ovwShow, .esriOverviewMap.ovwBL .ovwHide {
display: none !important;
}
.esriOverviewMap.ovwBL .ovwShow, .esriOverviewMap.ovwTR .ovwHide {
display: none !important;
}
.esriOverviewMap.ovwBR .ovwShow, .esriOverviewMap.ovwTL .ovwHide {
display: none !important;
}
.esriOverviewMap .logo-med, .esriOverviewMap .logo-sm, .esriOverviewMap .bingLogo-lg {
display: none !important;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
<script type="text/javascript" src="AddPoints.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.Toolbar");
dojo.require("esri.toolbars.navigation");
dojo.require("dijit.Tooltip");
dojo.require("esri.map");
dojo.require("dijit.form.Button");
dojo.require("esri.arcgis.utils");
dojo.require("esri.dijit.OverviewMap");
var map, navToolbar, layer, visible = [];
var m_glayer;
function init() {
var initExtent = new esri.geometry.Extent({ "xmin": -111.23080504945419, "ymin": 40.28582425473493, "xmax": -103.87680757086906, "ymax": 45.71549561177383, "spatialReference": { "wkid": 4608} });
map = new esri.Map("map", { logo: false, slider: false });
layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://myserver/WSIPL/rest/services/myservice/MapServer");
//map.addLayer(dynamicMapServiceLayer);
navToolbar = new esri.toolbars.Navigation(map);
map.addLayer(layer);
map.setExtent(initExtent);
//Add Map Overview
dojo.connect(map, 'onLoad', function (theMap) {
overviewMapDijit = new esri.dijit.OverviewMap({
map: map,
extent: initExtent,
visible: true,
attachTo: "top-left"
});
overviewMapDijit.startup();
ov = true;
});
m_glayer = new esri.layers.GraphicsLayer();
dojo.connect(layer, "onLoad", printPreview);
}
function printPreview() {
dojo.connect(map, 'onClick', function () {
var x = -110.893677;
var y = 44.058510;
for (var i = 0; i < 10; i++) {
addPoint(x, y);
x = x + 0.001;
y = y + 0.001;
}
});
}
function addPoint(x, y) {
var point = new esri.geometry.Point(x, y, map.spatialReference);
var simpleMarkerSymbol = new esri.symbol.SimpleMarkerSymbol();
var graphic = new esri.Graphic(point, simpleMarkerSymbol);
m_glayer.add(graphic);
map.addLayer(m_glayer);
}
function showPrintWindow() {
var xMin = document.getElementById('hfxmin').value;
var xMax = document.getElementById('hfxmax').value;
var yMin = document.getElementById('hfymin').value;
var yMax = document.getElementById('hfymax').value;
printWin = window.open("../WebForm3.aspx?XMin=" + xMin + "&XMax=" + xMax + "&YMin=" + yMin + "&YMax=" + yMax, null, "status=no,toolbar=no,menubar=no,location=no,scrollbars=no,resizable=yes");
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<form id="form1" runat="server">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 100%; height: 100%;">
<div id="leftPane" dojotype="dijit.layout.ContentPane" region="left" style="width: 3%;">
<div id="navToolbar" dojotype="dijit.Toolbar" class="dojotool">
<div dojotype="dijit.form.Button" id="mapOverview" title="Toggles Vicinity Map" iconclass="mapOverviewIcon"
onclick="ShowHideOVMap()" align="center">
</div>
<div dojotype="dijit.form.Button" id="zoomToFull" title="Zoom to Full Extent" align="center"
iconclass="zoomToFullIcon" onclick="navToolbar.zoomToFullExtent();">
</div>
<div dojotype="dijit.form.Button" id="zoomToActive" title="Zoom to Active Layer"
align="center" iconclass="zoomToActiveIcon" onclick="normalTool();changeDojoHighlight(this.id);navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);map.enableScrollWheelZoom();">
</div>
<div dojotype="dijit.form.Button" id="zoomToBack" title="Zoom to Previous Extent"
align="center" iconclass="zoomToBackIcon" onclick="navToolbar.zoomToPrevExtent();">
</div>
<div dojotype="dijit.form.Button" id="zoomin" title="Zoom In" iconclass="zoominIcon"
align="center" onclick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);">
</div>
<div dojotype="dijit.form.Button" id="zoomout" title="Zoom Out" iconclass="zoomoutIcon"
align="center" onclick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">
</div>
<div dojotype="dijit.form.Button" id="pan" title="Recenter" iconclass="pan" align="center"
onclick="navToolbar.activate(esri.toolbars.Navigation.PAN);">
</div>
<div dojotype="dijit.form.Button" id="identity" title="Identify Features" iconclass="identityIcon"
align="center" onclick="">
</div>
<div dojotype="dijit.form.Button" id="print" title="Print" iconclass="printIcon"
align="center" onclick="showPrintWindow()">
</div>
<div dojotype="dijit.form.Button" id="refresh" title="Refresh" iconclass="refreshIcon"
align="center" onclick="">
</div>
<div dojotype="dijit.form.Button" id="plssHistory" title="History"
iconclass="plssHistoryIcon" align="center" onclick="">
</div>
<div dojotype="dijit.form.Button" id="plssAcreage" title="Acreage" iconclass="plssAcreageIcon"
align="center" onclick="">
</div>
<div dojotype="dijit.form.Button" id="plssAccuracy" title="Accuracy" iconclass="plssAccurayIcon"
align="center" onclick="">
</div>
<div dojotype="dijit.form.Button" id="clearLayers" title="Clear Layer" iconclass="clearLayersIcon"
align="center" onclick="">
</div>
</div>
</div>
<div class="floatstopl> </div>
<div id="rightPane" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="right"
style="width: 22%;">
<div dojotype="dijit.layout.TabContainer">
<div dojotype="dijit.layout.ContentPane" title="QUERIES" selected="true">
</div>
<div dojotype="dijit.layout.ContentPane" title="TOC">
Content for the second tab
Layer List : <span id="layer_list"></span><br />
</div>
<div dojotype="dijit.layout.ContentPane" title="LEGEND">
Content for the third tab
</div>
</div>
</div>
<div id="centerpane" dojotype="dijit.layout.BorderContainer" region="center" gutters="false">
<%--<div id="map" dojotype="dijit.layout.contentpane" class="shadow" region="center"
style="position: relative; overflow: hidden;">
</div>--%>
<table>
<tbody>
<tr>
<td>
<%-- <button onclick="map.panUpperLeft();"></button>--%>
<img src="images/Icons/north_l.gif" alt="northwest" />
</td>
<td align="center">
<%--<button onclick="map.panUp();"></button>--%>
<img src="images/Icons/n_arrow.gif" alt="north"/>
</td>
<td>
<%--<button onclick="map.panUpperRight();"> </button>--%>
<img src="images/Icons/north_r.gif" alt="northeast"/>
</td>
</tr>
<tr>
<td valign="middle">
<%--<button onclick="map.panLeft();"></button>--%>
<img src="images/Icons/w_arrow.gif" alt="west"/>
</td>
<td>
<div id="map" style="width: 610px; height: 400px; border: 1px solid #000;">
</div>
</td>
<td valign="middle">
<%--<button onclick="map.panRight();"></button>--%>
<img src="images/Icons/e_arrow.gif" alt="east"/>
</td>
</tr>
<tr>
<td>
<%--<button onclick="map.panLowerLeft();"> </button>--%>
<img src="images/Icons/south_l.gif" alt="southwest" />
</td>
<td align="center">
<%--<button onclick="map.panDown();"></button>--%>
<img src="images/Icons/s_arrow.gif" alt="south"/>
</td>
<td>
<%--<button onclick="map.panLowerRight();"></button>--%>
<img src="images/Icons/south_r.gif" alt="southeast"/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="floatstopl"></div>
<div id="results" dojotype="dijit.layout.ContentPane" region="bottom" style="width:700px; height:100px;" >
This is the results section
</div>
<asp:HiddenField ID="hfxmin" runat="server" />
<asp:HiddenField ID="hfxmax" runat="server" />
<asp:HiddenField ID="hfymin" runat="server" />
<asp:HiddenField ID="hfymax" runat="server" />
</form>
</body>
</html>
Complete code in Child window:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="ePermit.WebForm3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>GIS Search </title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
<%--<link href="Styles/claro.css" rel="stylesheet" type="text/css" />--%>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
<script type="text/javascript" src="AddPoints.js" type="text/javascript"></script>
<script type="text/javascript">
dojo.require("esri.map");
var map;
function init() {
//var initialExtent = new esri.geometry.Extent({ "xmin": -400, "ymin": -400, "xmax": 400, "ymax": 400, "spatialReference": { "wkid": 102100} });
var fltxmin = parseFloat(document.getElementById('<%=hfxmin.ClientID%>').value);
var fltxmax = parseFloat(document.getElementById('<%=hfxmax.ClientID%>').value);
var fltymin = parseFloat(document.getElementById('<%=hfymin.ClientID%>').value);
var fltymax = parseFloat(document.getElementById('<%=hfymax.ClientID%>').value);
var initialExtent = new esri.geometry.Extent({ "xmin": fltxmin, "ymin": fltymin, "xmax": fltxmax, "ymax": fltymax, "spatialReference": { "wkid": 4269} });
//var initExtent = new esri.geometry.Extent({ "xmin": -111.40, "ymin": 44.31, "xmax": -110.10, "ymax": 45.17, "spatialReference": { "wkid": 4608} });
map = new esri.Map("map", {logo: true, slider: true});
dojo.connect(map, "onLoad", function (map) { map.infoWindow.resize(100, 100); });
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(http://myserver/WSIPL/rest/services/myservice/MapServer);
map.addLayer(dynamicMapServiceLayer);
map.setExtent(initialExtent);
map.addLayer(m_glayer);
// dojo.connect(map, "onLoad", map, "disablePan");
// dojo.connect(map, "onLoad", map, "disableMapNavigation");
// dojo.connect(map, "onLoad", map, "disableScrollWheelZoom");
// dojo.connect(map, "onLoad", map, "disableKeyboardNavigation()");
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<form id="form1" runat="server">
<div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
<div id="info" style="padding:5px; margin:5px; background-color:#eee;"></div>
<asp:HiddenField ID="hfxmin" runat="server" />
<asp:HiddenField ID="hfxmax" runat="server" />
<asp:HiddenField ID="hfymin" runat="server" />
<asp:HiddenField ID="hfymax" runat="server" />
</form>
</body>
</html>
When user click on print button child widow should open with the same graphics as in parent window.
Thanks, Uday
