nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Google Street View Widget for the Flexviewer

andrewj_ca

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

Find more posts tagged with

Accepted answers

All comments

deleted-user-yA_w_FC9FKe5

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.

AndrewKeith1

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>

andrewj_ca

Sean Spansel,

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

SeanSpansel

This is an excellent add-on and thanks for providing the help for others to get it running. I'm having some of the same issues as listed above and I've hit a brick wall on trying to think up a way to fix it.

I'm using the compiled version, followed the readme (btw, using Streetview_v3.0 file) and I'm getting the widget/icons/etc but when I place the StreetGuy, I'm not getting the popup window with 360 view. Inside of the flexviewer 3.0 program, it works, but when I follow the web address it doesn't.

Any help would be greatly appreciated. I've done

PawanVuppala

Hi Andrew,
Thanks again for this great widget. Wondering if theres a way to add the Image Date as shown in the Google Streetview page. Its
at the bottom left on the google page but, can't see that in our widget. This would really add great value to the maps that we use.

Thanks in advance.

-Pawan

GISProgrammer9,

I've updated the size of the download. I also included a couple of readme files for those who are interested.

Andrew

Google Street View Image Date.JPG

andrewj_ca

GISProgrammer9,

I've updated the size of the download. I also included a couple of readme files for those who are interested.

Andrew

MLowry

Great work Andrew. That is quite a large download at 40MB!

Going to check out your source code shortly.

andrewj_ca

No problem, don't forget to rate it. Cheers

PawanVuppala

This works great !! Thanks Andrew. For all those who are using Robert's eSearch widget this works now on top of Streetview widget..I been wanting to be able to use these two for a while and now I finally can!!

Thanks again you guys for wonderful widgets.

Updated 3.0 API code found here. Install instructions to follow but I wanted to get the code out there.
Cheers,

Andrew

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

andrewj_ca

Updated 3.0 API code found here. Install instructions to follow but I wanted to get the code out there.
Cheers,

Andrew

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

PawanVuppala

This is a great widget to have. I tried it with 3.0 viewer by copying the compiled version under sv_api_v3 folder abd it never worked for me. However I have a 2.5 version that seems to work but, I'd really love to get it upgraded.

Thanks!

Gerald,

This code isn't currently compiled for the 3.0 viewer. I have seen a few comments from other people have have successfully ported it over the the new 3.0 viewer. When I get an opportunity I will be updating the code, but for now I'd suggest looking at some of the other uploads from people. Sorry I've haven't been much help here.

Andrew

andrewj_ca

HI Andrew,

Just tried your Street Widget ... on your webpage it looks great! I am fairly new at this Ia m usinf ArcGis viewer for Flex 3.0. I have copy and paste the compiled 3.0 to the widget added the widge string to the congif.xml and I am having a problem the widget is open, I click on the icon to start the street viewer and click on a street and nothing. I don't what is wrong...

Can you please help ?

Gerald
GIS Analyst
Moncton, NB

Gerald,

This code isn't currently compiled for the 3.0 viewer. I have seen a few comments from other people have have successfully ported it over the the new 3.0 viewer. When I get an opportunity I will be updating the code, but for now I'd suggest looking at some of the other uploads from people. Sorry I've haven't been much help here.

Andrew

GeraldLegacy

HI Andrew,

Just tried your Street Widget ... on your webpage it looks great! I am fairly new at this Ia m usinf ArcGis viewer for Flex 3.0. I have copy and paste the compiled 3.0 to the widget added the widge string to the congif.xml and I am having a problem the widget is open, I click on the icon to start the street viewer and click on a street and nothing. I don't what is wrong...

Can you please help ?

Gerald
GIS Analyst
Moncton, NB

GeorgiannaStrode

I can't compile Street View 2.4 with SFV 2.5.

The error is inside FrStreetView/WebForm.mxml at line 39 <flexiframe:IFrame .....

The error says:

"Could not resolve <flexiframe:IFrame> to a component implementation"

Any suggestions are greatly appreciated.

JamesKo

Andrew,

I'm having the same problems as mentioned above. However, it does work in firefox and google chrome. One interesting note, if you try the code examples from google's own website on IE, you'll notice the same behaviour.

Regards,
James

haThach

Has anyone that has downloaded or used my code for the Street View Widget had any issues of late? Starting this week, all my apps that use the street view code have stopped working or has intermittent problems. Wondering if it's the api or something else that's going on here.

I recently has intermittent problems only within the street view when trying to use the go forward or backward arrow, which result in a grey window. But the initial startup, click on the street or drag the human icon to a different location seem to work fine. Any idea why? I'm currently using ie8 with flexviewer v2.3. Thanks!

1.png

2.png

andrewj_ca

Has anyone that has downloaded or used my code for the Street View Widget had any issues of late? Starting this week, all my apps that use the street view code have stopped working or has intermittent problems. Wondering if it's the api or something else that's going on here.

VenkatM

Venkat,

The ESRI map object has a logoVisible property which you can set to false.

Thank you..

-Venkat.

andrewj_ca

Venkat,

The ESRI map object has a logoVisible property which you can set to false.

VenkatM

Hi Andrew,

I have a question regarding Flexviewer2.2, I know it is not appropriate place to ask, just for the curiousity. Where can I find code related to the icon at bottom right corner i.e 'Powered by ESRI' icon?

Thanks in advance.

-Venkat.

VenkatM

Definitely.. with my pleasure.

-Venkat.

andrewj_ca

Great, be sure to rate the widget once you're up and running.

VenkatM

Did you copy my index.template.html?

requires lines:

<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAkSuRQhsVGwtKfC10t-cYMhTBpCie6Uzwqy2E6AELFrU6ooWJHRTCzw4I8uhjHu7YLeP32UUD8WWq3Q" type="text/javascript"></script>
<script type="text/javascript" src="widgets /StreetView/streetview.js"></script>

Check the casing of these lines

Hi Andrew,

Got it.. Awersome..!!!!.

Thank you so much for the help.

Regards.

-Venkat.

andrewj_ca

Did you copy my index.template.html?

requires lines:

<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAkSuRQhsVGwtKfC10t-cYMhTBpCie6Uzwqy2E6AELFrU6ooWJHRTCzw4I8uhjHu7YLeP32UUD8WWq3Q" type="text/javascript"></script>
<script type="text/javascript" src="widgets/StreetView/streetview.js"></script>

Check the casing of these lines

VenkatM

Looking like it is not at all invoking the javascript function from the 'StreetviewWidget.as' actionscript class. I placed couple of alert statments in 'loadStreetview' method of javascript file, and when I run the application, this function is not invoking, doesn't shows up any alerts that I have kept.

I am not getting any idea that what I am missing here.

Regards.

-Venkat.

VenkatM

Venkat,

Are you using the compiled or uncompiled versions?

Hi Andrew,

I am using uncompiled version. I haven't tried compiled version yet.

My environment is:

- Jdk 1.6.21.
- FlexBuilder 4. (eclipse 3.5) IDE.
- Flex 4.
- BlazeDS 4 (to get configuration info from database not from xml configuration files for viewer).
- Flexviewer 2.2.
- Weblogic 11g (10.3.4) to deploy viewer as serverside web application.
- ArcGIS 10 (For Mapservices).
- Oracle 10g database (all the xml configurations information to be stored in it).
- Flash player 10.
- everything on top of windows xp.

Regards.

-Venkat.

andrewj_ca

Venkat,

Are you using the compiled or uncompiled versions?

VenkatM

I updated the casing issue, see if that fixes the problem.

Hi Andrew,

Appreciate for the quick response.
I took the latest source code from the hyperlink just now and copy pasted as is according to the readme.txt instructions and updated with new api key. Still the bottom streetview doesn't shows up.

Regards.

-Venkat.

andrewj_ca

I updated the casing issue, see if that fixes the problem.

andrewj_ca

I have a suspicion that the casing is wrong. Check that the Casing on the streetview widget matches. I will post an update to help this.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.