Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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>&nbsp;</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

share|improve this question
    
Please put your code to {code} tag –  Sunil Feb 2 '13 at 10:55
    
I think in child window it will not display.. –  Sunil Feb 2 '13 at 11:04
    
You can use Ctrl-K to auto-indent code blocks by 4 spaces, which will format it correctly. –  blah238 Feb 2 '13 at 13:10
    
@user14628 Can you post the complete code from both windows? I have done something similar by displaying a new page with a callback function that has access to both the pages. How exactly are you doing it? –  Devdatta Tengshe Feb 2 '13 at 16:00
    
Hi Devdatta, I have edited my question with complete code in parent window and child window. please let me know if you require anything more. –  user14628 Feb 3 '13 at 14:56
add comment

1 Answer

I would request you to look at this answer on StackOverflow: http://stackoverflow.com/a/901278/895

Here is how I transferred some Information from one window to a child window.

In My main Window, I have the following JavaScript:

var helper = { // pseudo namespace

map: null,

/*-- print --*/

print_window: null,

openPrintWindow: function() {
  helper.print_window = window.open('print.html', '<Title>', 'width=1100,height=700,scrollbars=1,toolbar=0,menubar=1,location=0,personalbar=0,navigation=0,resizable=0');
},

// called by child window after it has finished loading
printWindowReadyCallback: function() {

  helper.print_window.applyMapSettings(helper.map); //or you can pass something else as well

}    
}; 

In the child window, I have the body onload listener setup like this:

<body onLoad="init()" >

My JavaScript in the child window is something like this:

function init() {
      opener.helper.printWindowReadyCallback();
    }

    function applyMapSettings(source_map) {
    //do whatever you need to here.

}

}

Whenever I need to open the new Window & pass the variables, I do this:

this.helper.map=this.map;
this.helper.openPrintWindow();
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.