topic Re: embed webpage into the overview map in ArcGIS Viewer for Flex Questions

embed webpage into the overview map

philippschnetzer — Tue, 24 Jan 2012 13:40:10 GMT

Here is a challenge! Would embedding a webpage into the overview map widget basically require an entire rewrite of the code? I would like to embed the following:

<script type="text/javascript">         width='80%';          //the width of the embedded map in pixels or percentage         height=400;         //the height of the embedded map in pixels or percentage         border=1;           //the width of border around the map. Zero means no border         notation=false;     //true or false to display or not the vessel icons and options at the left         shownames=false;    //true or false to dispaly ship names on the map         latitude=37.4460;   //the latitude of the center of the map in decimal degrees         longitude=24.9467;  //the longitude of the center of the map in decimal degrees         zoom=9;             //the zoom level of the map. Use values between 2 and 17         maptype=3;          //use 0 for Normal map, 1 for Satellite, 2 for Hybrid, 3 for Terrain         trackvessel=0;      //the MMSI of the vessel to track, if within the range of the system         fleet='';           //the registered email address of a user-defined fleet to display         remember=false;     //true or false to remember or not the last position of the map </script> <script type="text/javascript" src="http://www.marinetraffic.com/ais/embed.js"></script>

this would allow the user to stay in the flex environment and not have to go to a new url to check out the location of ships in the area....

Or are there any other easier alternatives that could work? Should this be written directly into the index.html? Can javascript code even be embedded in the first place?

Re: embed webpage into the overview map

RobertScheitlin__GISP — Sat, 11 Dec 2021 15:56:42 GMT

Phillip,

You can not add/embed html in Flex without using something like the iFrame which is kind of limited. But here is the changes you would make to the index.template.html to do what you are asking for.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">    
    <!-- 
    Smart developers always View Source. 
    
    This application was built using Adobe Flex, an open source framework
    for building rich Internet applications that get delivered via the
    Flash Player or to desktops via Adobe AIR. 
    
    Learn more about Flex at http://flex.org 
    // -->
    <head>
        <title>${title}</title>
        <meta name="google" value="notranslate">         
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and 
             the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as 
             the percentage of the height of its parent container, which has to be set explicitly.  Fix for
             Firefox 3.6 focus border issues.  Initially, don't display flashContent div so it won't show 
             if JavaScript disabled.
        -->
        <style type="text/css" media="screen"> 
            html, body    { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center; 
                   background-color: ${bgcolor}; }   
            object:focus { outline:none; }
            #flashContent { display:none; }
/* Added Code */            
            #container {
                width: 100%;
                height: 100%;
                position: relative;
            }
            #flashContent, 
            #vessels {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }
            #vessels {
                z-index: 10;
            }
/* End Added Code */
        </style>
        
        <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
        <!-- BEGIN Browser History required section ${useBrowserHistory}>
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="history/history.js"></script>
        <!${useBrowserHistory} END Browser History required section -->  
            
        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> 
            var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "${expressInstallSwf}";
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.bgcolor = "${bgcolor}";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "${application}";
            attributes.name = "${application}";
            attributes.align = "middle";
            swfobject.embedSWF(
                "${swf}.swf", "flashContent", 
                "${width}", "${height}", 
                swfVersionStr, xiSwfUrlStr, 
                flashvars, params, attributes);
            <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. -->
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
 <!-- Added Code -->       
        <script language="javascript"> 
        function toggle() {
            var ele = document.getElementById("vessels");
            var text = document.getElementById("displayText");
            if(ele.style.display == "block") {
                ele.style.display = "none";
                text.innerHTML = "show";
              }
            else {
                ele.style.display = "block";
                text.innerHTML = "hide";
            }
        } 
        </script>
<!-- End Added Code -->
    </head>
    <body>
        <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough 
             JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show
             when JavaScript is disabled.
        -->
<!- Added/changed Code -->
        <div id="container">
            <a id="displayText" href="javascript:toggle();">show</a>
            <div id="vessels" style="display: none">
                <script type="text/javascript">
                        width='80%';          //the width of the embedded map in pixels or percentage
                        height=400;         //the height of the embedded map in pixels or percentage
                        border=1;           //the width of border around the map. Zero means no border
                        notation=false;     //true or false to display or not the vessel icons and options at the left
                        shownames=false;    //true or false to dispaly ship names on the map
                        latitude=37.4460;   //the latitude of the center of the map in decimal degrees
                        longitude=24.9467;  //the longitude of the center of the map in decimal degrees
                        zoom=9;             //the zoom level of the map. Use values between 2 and 17
                        maptype=3;          //use 0 for Normal map, 1 for Satellite, 2 for Hybrid, 3 for Terrain
                        trackvessel=0;      //the MMSI of the vessel to track, if within the range of the system
                        fleet='';           //the registered email address of a user-defined fleet to display
                        remember=false;     //true or false to remember or not the last position of the map
                </script>
                <script type="text/javascript" src="http://www.marinetraffic.com/ais/embed.js"></script>
            </div>
            <div id="flashContent">
                <p>
                    To view this page ensure that Adobe Flash Player version 
                    ${version_major}.${version_minor}.${version_revision} or greater is installed. 
                </p>
                <script type="text/javascript"> 
                    var pageHost = ((document.location.protocol == "https:") ? "https://" :    "http://"); 
                    document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
                                    + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
                </script> 
            </div>
        </div>
<!-- End Added/Changed Code -->            
           
           <noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="${width}" height="${height}" id="${application}">
                <param name="movie" value="${swf}.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="${bgcolor}" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="${swf}.swf" width="${width}" height="${height}">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="${bgcolor}" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                    <p> 
                        Either scripts and active content are not permitted to run or Adobe Flash Player version
                        ${version_major}.${version_minor}.${version_revision} or greater is not installed.
                    </p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </noscript>        
   </body>
</html>

Re: embed webpage into the overview map

philippschnetzer — Tue, 24 Jan 2012 18:29:10 GMT

oh wow, this is awesome! only one issue - when I click to 'show' the page comes up but blocks the user from closing it down because it obscures the 'hide' button - I tried some CSS to move it but it wouldn't budge. Also, is there a way to place the clickable 'show' button directly overtop of the map somewhere rather than have it occupy its own container (see the white bar across the top of the screen in the attached image)- because it actually pushes the rest of the map down the screen by the same amount and cuts it off - its probably around 20px or so.

I am so glad this sort of thing can be done and really appreciate your effort in this!

Re: embed webpage into the overview map

RobertScheitlin__GISP — Tue, 24 Jan 2012 18:50:44 GMT

Phillip,

You can make sure the div does not cover up the link to show or hide by changing this:

#vessels { z-index 10; top: 50px; }

I can help with styling and positioning in another post.