<< Click to Display Table of Contents >>

 

Adding ArcGIS Online Map to SuperGIS Server Map Website

 

 

 

1.

Open SGSWebApp.htm (the default directory location is C:\Inetpub\wwwroot\servicename) under the website directory created in previous section in Notepad or text editor and add the code that quotes ArcGIS Online API in <script> (the bold texts in blue).

………

<script type="text/javascript" src="scripts/Overview.js"></script>

<script type="text/javascript" src="scripts/Bookmark.js"></script>

<script type="text/javascript" src="scripts/ArcGISOnline.js"></script>

………

 

 

2.

Copy function InitWnd() and paste to code of SGSWebApp.htm. Please paste function InitWnd() to the very beginning of main program <Script> block, making it the first function(you can change the ArcGIS Online URL).

………

<script type="text/javascript" src="scripts/Bookmark.js"></script>

<script type="text/javascript" src="scripts/ArcGISOnline.js"></script>

<script>

function InitWnd()

 {

         new ArcGISOnline("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", LoadConfig);

 }

 

var gMapBase = null;

function InitWnd()

………

 

 

3.

Use search function to find <body onresize="onResize();" onload="LoadConfig();">，and change LoadConfig() into InitWnd()。

………

<body onresize="onResize();" onload="InitWnd();">

 <div id="headerNode">

         <img id="logo" src="images/SuperGeo_logo.png" />

         <h1 id="title">Title</h1>

         <div id="ToolGroup">

         </div>

 </div>

 <div id="menu">

 </div>

 <div id="mapNode">

         <img id="copyright" src="images/Copyright.png" />

         <label id="Coordinate">

         </label>

 </div>

</body>

</html>

………

 

 

4.

Then, search xmlhttp.onreadystatechange , add a line of code to declare:

var that = this; SuperGIS Server layer variance in function OnLoaded and point pLyrA to ArcGIS Online Layer in function InitWnd()(the bold texts in blue). Also, add that in CreateMap function (the bold texts in blue).

 

………

var that = this;

           xmlhttp.onreadystatechange = function() {

               if (xmlhttp.readyState == 4) {

                   if (xmlhttp.status == 200)

                       CreateMap(xmlhttp.responseXML, that);

                   else

                       alert("Config.xml not found!");

               }

           }

………

 

 

5.

Serach function CreateMap(xmlDoc)，and change it into function CreateMap(xmlDoc,that);

..............

function CreateMap(xmlDoc, that) {

                 var pOMap = document.getElementById("mapNode");

           var cacheElem = xmlDoc.getElementsByTagName("UseCache");

.........

 

 

 

6.

After that, add 2 lines of code to declare pLyrA layer and add pLyrA layer to website right above the pLyr (SuperGIS Server Layer). Note that the layer added earlier will be placed at the bottom while those added later will be placed at the top.

 

..............

          var pLyrA = that;

          pMapBase.AddLayer(pLyrA);

           

           pMapBase.AddLayer(pLyr);

           pMapBase.ZoomMapTo(pExt);

           pTrans.putMapLevel(Math.floor(pTrans.getMapLevel()));

           pTrans.FitLevel();

.........

 

 

 

7.

When the settings are finished, save SGSWebApp.htm. Open website browser, link SuperGIS Server website and ArcGIS Online map will be displayed and overlaid with SuperGIS Server map service on SuperGIS Server map website.

 

 

 

 

NOTE: If you want to provide a better interface for mobile users, you need to follow the steps above and change contents of SGSMobileApp.htm.

 

 

©2017 Supergeo Technologies Inc.