Google Street View Widget for the Flexviewer

andrewj_ca · ‎01-11-2011

I wanted to get some feedback on my street view widget for the Flexviewer 2.*, Check it out here:

http://www.arcgis.com/home/item.html?id=f069d8a3aa304e29a432b48e5f64ca74

andrewj_ca · ‎09-24-2012

Sean Spansel,

Do you mind posting the contents of your index.html?

AndrewKeith1 · ‎09-25-2012

Andrew,
I too am having the same problem of the window not loading at the bottom. I have verified that StreetView exists for area. Could you please help. Here is my index.html file that I am using. Thanks in advance.

<!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" lang="en" xml:lang="en">
    <head>
        <title>Web App</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="Esri ArcGIS viewer for Flex"/>
        <meta name="keywords" content="Esri, ArcGIS, Flex Viewer"/>
        <meta name="author" content="Esri"/>

        <!-- 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: #ffffff; }
            object:focus { outline:none; }
            #flashContent { display:none; }
        </style>

        <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
        <!-- BEGIN Browser History required section >
        <link rel="stylesheet" type="text/css" href="history/history.css" />
        <script type="text/javascript" src="history/history.js"></script>
        <! END Browser History required section -->

        <script type="text/javascript">
            var isIElt9 = false;
        </script>
        <!--[if lt IE 9]>
            <script type="text/javascript">
                isIElt9 = true;
            </script>
        <![endif]-->

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script> 
        <script type="text/javascript" src="widgets/StreetView/streetview.js"></script>

        <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 = "11.1.0";
            <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. -->
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
            flashvars.localeChain = "en_US";
            flashvars.resourceModuleURLs = "assets/locale/en_US.swf";
            //flashvars.localeChain = "ar";
            //flashvars.resourceModuleURLs = "assets/locale/ar.swf";
            //flashvars.localeChain = "de_DE";
            //flashvars.resourceModuleURLs = "assets/locale/de_DE.swf";
            //flashvars.localeChain = "es_ES";
            //flashvars.resourceModuleURLs = "assets/locale/es_ES.swf";
            //flashvars.localeChain = "fr_FR";
            //flashvars.resourceModuleURLs = "assets/locale/fr_FR.swf";
            //flashvars.localeChain = "it_IT";
            //flashvars.resourceModuleURLs = "assets/locale/it_IT.swf";
            //flashvars.localeChain = "ja_JP";
            //flashvars.resourceModuleURLs = "assets/locale/ja_JP.swf";
            //flashvars.localeChain = "ko_KR";
            //flashvars.resourceModuleURLs = "assets/locale/ko_KR.swf";
            //flashvars.localeChain = "nb_NO";
            //flashvars.resourceModuleURLs = "assets/locale/nb_NO.swf";
            //flashvars.localeChain = "nl_NL";
            //flashvars.resourceModuleURLs = "assets/locale/nl_NL.swf";
            //flashvars.localeChain = "pl_PL";
            //flashvars.resourceModuleURLs = "assets/locale/pl_PL.swf";
            //flashvars.localeChain = "pt_BR";
            //flashvars.resourceModuleURLs = "assets/locale/pt_BT.swf";
            //flashvars.localeChain = "ro_RO";
            //flashvars.resourceModuleURLs = "assets/locale/ro_RO.swf";
            //flashvars.localeChain = "ru_RU";
            //flashvars.resourceModuleURLs = "assets/locale/ru_RU.swf";
            //flashvars.localeChain = "sv_SE";
            //flashvars.resourceModuleURLs = "assets/locale/sv_SE.swf";
            //flashvars.localeChain = "zh_CN";
            //flashvars.resourceModuleURLs = "assets/locale/zh_CN.swf";
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var isAIR = navigator.userAgent.indexOf("AdobeAIR") != -1;
            if (isAIR || isIElt9)
            {
                // workaround for overlaying tool tips and other content when loaded into an AIR app
                // workaround for cursor issue - https://bugs.adobe.com/jira/browse/SDK-26818
                params.wmode = "opaque";
            }
            var attributes = {};
            attributes.id = "index";
            attributes.name = "index";
            attributes.align = "middle";
            swfobject.embedSWF(
                "index.swf", "flashContent",
                "100%", "100%",
                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>
    </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.
        -->
        <div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version
                11.1.0 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>

        <noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="index">
                <param name="movie" value="index.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="index.swf" width="100%" height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <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
                        11.1.0 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>

deleted-user-yA_w_FC9FKe5 · ‎09-25-2012

Thanks for creating this. It is very cool. I'm having the same issue as others. I've tried a couple of things. One was just using the compiled version but everything works as plan except opening up the streetview window that should be at the bottom of the map.

So I also tried using the uncompiled code. Rather new to that but it actually works now. However, I can't actually get that swf file to work with my real map that is on the server.

I have a feeling it has to do with the index code which I don't know much about but I am guessing this is what controls the window for the streetview. Since the uncomplied version does not have a index.html but rather a index.template.html I'm not sure how to fix this. I tried the index.html with the complied version but no go.

Both files have this when I view the source:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="widgets/StreetView/streetview.js"></script>

Any suggestions? Since it works in the uncompiled but not the complied version I create or that you sent it must be something simple.

andrewj_ca · ‎09-25-2012

See highlighted missing items in index.html. The html that you provided is not what I provided as part of the download.

<!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" lang="en" xml:lang="en">
    <head>
        <title>ArcGIS Viewer for Flex</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="Esri ArcGIS viewer for Flex"/>
        <meta name="keywords" content="Esri, ArcGIS, Flex Viewer"/>
        <meta name="author" content="Esri"/>

        
        <style type="text/css" media="screen">
            html, body { height:100%; }
            body { margin:0; padding:0; overflow:auto; text-align:center;
                   background-color: #ffffff; }
            object:focus { outline:none; }
            #flashContent { display:none; }
        </style>

        
        

        <script type="text/javascript">
            var isIElt9 = false;
        </script>
        

        <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
        <script type="text/javascript" src="widgets/StreetView/streetview.js"></script>

        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-26683112-1']);
            _gaq.push(['_trackPageview']);

            (function() {
              var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
              ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
              var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>

        <script type="text/javascript" src="swfobject.js"></script>
        <script type="text/javascript">
            
            var swfVersionStr = "11.1.0";
            
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
            var params = {};
            params.quality = "high";
            params.bgcolor = "#ffffff";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            var isAIR = navigator.userAgent.indexOf("AdobeAIR") != -1;
            if (isAIR || isIElt9)
            {
                // workaround for overlaying tool tips and other content when loaded into an AIR app
                // workaround for cursor issue - https://bugs.adobe.com/jira/browse/SDK-26818
                params.wmode = "opaque";
            }
            var attributes = {};
           attributes.id = "agsview3";
            attributes.name = "agsview3";
            attributes.align = "middle";
            swfobject.embedSWF(
                "index.swf", "flashContent",
                "100%", "100%",
                swfVersionStr, xiSwfUrlStr,
                flashvars, params, attributes);
            
            swfobject.createCSS("#flashContent", "display:block;text-align:left;");
        </script>
    </head>
    <body>
        
        <div id="flashContent">
            <p>
                To view this page ensure that Adobe Flash Player version
                11.1.0 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>

        <noscript>
            <object id="agsview3" name="agsview3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="index">
                <param name="movie" value="index.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                
                <object type="application/x-shockwave-flash" data="index.swf" width="100%" height="100%">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                
                
                    <p>
                        Either scripts and active content are not permitted to run or Adobe Flash Player version
                        11.1.0 or greater is not installed.
                    </p>
                
                    <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>
                
                </object>
                
            </object>
        </noscript>
   </body>
</html>

deleted-user-yA_w_FC9FKe5 · ‎09-25-2012

I created a new html file and copied/pasted your code into this file. I then went to my viewer project and went into the main folder where I saved this file over top the existing index.html file. Did I do this correctly?

I am still having the same issue.

One idea on what could be wrong is that I am seeing a smiley face in this line for your posted code:

This is what I had.
<object id="agsview3" name="agsview3" classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="index">

So I added a ": D" between the clsid and 27CD86E :
<object id="agsview3" name="agsview3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="index">

The fact that this is working in my uncompiled code but not in my complied code must mean it is something simple. I've even removed all widgets except for this one. Do you have to have a certain layer loaded?

andrewj_ca · ‎09-25-2012

The smiley face should be - 😄

deleted-user-yA_w_FC9FKe5 · ‎09-25-2012

Thanks Andrew but it is still not working. I'm pretty baffled that it does not. Any suggestions?

TonyBlades · ‎09-25-2012

See highlighted missing items in index.html. The html that you provided is not what I provided as part of the download.

Andrew,
I copied the code from your post this morning and created a new index file. It's still not working for me. My Java savvy co-worker is on vacation this week so please bear with me. On line 104, is that a big grin or is it really "clsid:D27CDB6E..."? Any other thoughts?
Tony

deleted-user-yA_w_FC9FKe5 · ‎09-26-2012

Andrew,
I copied the code from your post this morning and created a new index file. It's still not working for me. My Java savvy co-worker is on vacation this week so please bear with me. On line 104, is that a big grin or is it really "clsid:D27CDB6E..."? Any other thoughts?
Tony

Tony I think you and I have the same issue. From Andrew's comment to me it sounds like you have the right assmumption for the clsid:. I've tried it both ways and still have the same issue.

What is weird for me is that it works in flex/flash builder for me but when I try any compiled version it will not open the bottom pane to see the street view.

So it rules out the browser which is IE 8 and should rule out any of the flash components or anything to do with the server or PC. What would be different from the uncompiled code and the compiled code? I've copied over the compiled code created by the Flash Builder. I've tried the compiled code from the download and even the privious _v3 file but none of them work.

Starting to drive me crazy. I would really love to get this to work.

TonyBlades · ‎09-26-2012

Tony I think you and I have the same issue. From Andrew's comment to me it sounds like you have the right assmumption for the clsid:. I've tried it both ways and still have the same issue....

Michael, I agree. Sounds the same. I haven't worked with the compiled version yet. I'll look into that today. Hopefully one of us finds a solution soon. Tony