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

タグ付けされた投稿をもっと見る

Accepted answers

All comments

RobertScheitlin__GISP

All,

Here is a new Google Street View widget:

http://forums.arcgis.com/threads/86574-Google%C2%AE-Street-View-Widget

deleted-user-yA_w_FC9FKe5

Thanks. I wish I could help with your problem to give back but unfortunatly I cannot. Sorry but again thanks.

David_Caussin

Hi guys,

here is a V3.3 that work for me.

I have just a little problem with the projection. I work with WID 31370 and i have a gap more than 100 meters 😞

Is there anyone that could help me?

Thanks a lot

David

StreetView.zip

deleted-user-yA_w_FC9FKe5

Can someone upload the 3.3 compiled version of this widget please? I know one of you masterminds have already completed this. It would be very helpful and much appreciated by more than just me I am sure.

TimDine

I've gotten around the V3 google api not having a maximize button.

I've used information from http://www.drcoen.com/2010/12/html-divs-layered-onto-google-streetview-chrome-issue/ to create a new div overlayed on top of my map (like their Hello dialog). The div contains a maximize button which is an image. Clicking on the image uses onclick to call the maximizeStreetView function which is a new function that changes the dimensions of the ArcGIS map and the streetview panorama.

The other piece of key information I needed was the function to call once the panorama div is resized to refresh the panorama so it fills the whole div. The function is google.maps.event.trigger(panorama, 'resize');

I need to build another button which will do the same thing, except call the restore function to get out of fullscreen. The concept should be identical though.

function initialize_container()
{
 //alert('Container Initialized');
 // create container
 var obj= getSWF("agsview3");
 obj.height = getPageHeight() - streetviewHeight;
 
 var svh = streetviewHeight + "px";
 var divTag = document.createElement("div");                
 divTag.id = "pano";                
 divTag.style.width = "100%";
 divTag.style.height = svh;
 divTag.style.position = "absolute";
 divTag.style.bottom = "0px";
 divTag.style.right = "0px";
 divTag.style.left = "0px";
 divTag.innerHTML = '<div style="position: absolute; top: 20px; right: 20px; width: 100px; height: 36px; text-align: center; color: #000; z-index: 2; line-height: 36px;"><img width="20px" height="20px" src="assets/images/maximize-button.png" onclick="maximizeStreetView();" /></div>';
 document.body.appendChild(divTag);
 addEvent(window, "resize", windowResized ); 
}

function maximizeStreetView()
{
 try
 {
  var theDiv = document.getElementById("pano");
  if(theDiv!=null)
  {
   var obj= getSWF("agsview3");
   obj.height = "1";
   
   theDiv.style.display = "block";
   theDiv.style.height = "100%";
   google.maps.event.trigger(panorama, 'resize');
  } 
 }catch(err){
  alert(err);
 }

}

TimDine

I used the widget found here http://www.arcgis.com/home/item.html?id=b721eec8dde442559e9c17acecd22188

LucBourbousson

Hi Tim , do you know where to find the uncompiled version?
Thanks

TimDine

I've used the uncompiled widget and put it into the 3.3 viewer. Looks great. I've found with some research though that in the v3 api of streetview they've removed the full screen button from the top right of the panorama. Now I'm stuck with only the streetviewheight for what I can see. Has anyone tried any work arounds or options for this? I'm going to try a few things with it tomorrow to see what might be possible.

LucBourbousson

The widget works great on Viewer for flex 3.2! Unfortunately very few customizations are possible, so we'd like to get the source code if it's possible. Thank you.

Michelle,
I have not seen an update on this widget for a good deal of time on the ESRI site...(the widget we have been updating as the FV releases change "was" titled: FrStreetView)

I have attached the compiled widget that works for 3.1 viewer (at least for us). Let me know if you need the uncompiled code.
Hope this helps.
Eric V
Gurnee, IL

Anonymous User

Michelle,
I have not seen an update on this widget for a good deal of time on the ESRI site...(the widget we have been updating as the FV releases change "was" titled: FrStreetView)

I have attached the compiled widget that works for 3.1 viewer (at least for us). Let me know if you need the uncompiled code.
Hope this helps.
Eric V
Gurnee, IL

This works for us as well! I have been hoping it would get updated for 3.1. Thank you for posting this.

Is there any information on how to configure the widget? I would like for the widget to default to Street View Only, when we had it installed for flexviewer 3.0, we were able to add the line <defaultContent>3</defaultContent> to the configuration file, to accomplish this. However, this does not appear to work for this iteration.

Again, thanks for this.

EricVenden

Michelle,
I have not seen an update on this widget for a good deal of time on the ESRI site...(the widget we have been updating as the FV releases change "was" titled: FrStreetView)

I have attached the compiled widget that works for 3.1 viewer (at least for us). Let me know if you need the uncompiled code.
Hope this helps.
Eric V
Gurnee, IL

FrStreetView.zip

MichelleCahal1

Hi, I'm just checking to see if there's been a 3.1 update to this widget? Thanks!

MarcLEMAIRE

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

Hello

I have the same problems. When i compile, the widget works, i can see the StreetView Window but it doesn't work with the compiled code. thank you for your help

Marc

LefterisKoumis

I downloaded the uncompiled version of the streetview and run it. It works in Google Chrome but not in Firefox 16.0.1 or IE 8. Haven't tried in IE9.

All other suggested modifications from users in this forum did not work.

It seems that the coding for browser compartibility needs to be revised.

BenDrury

I was having the same problem. Inserted the items in bold below and now mine works.

Good Luck!

<!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" src="swfobject.js"></script>
        <script type="text/javascript">
            
            var swfVersionStr = "11.1.0";
            
            var xiSwfUrlStr = "playerProductInstall.swf";
            var flashvars = {};
            flashvars.localeChain = "en_US";
            flashvars.resourceModuleURLs = "assets/locale/en_US.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 = "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>

PeterMatst

cat be use like this :rolleyes:
http://www.iitechinfo.com/2012/10/google-street-view-adds-250000-miles-of.html

TonyBlades

I think it has to do with index.swf file. What does this file do? It seems as if when I replace the index.html file and the index.swf file on a simple flex project or new project things work fine. However, one where I have a complex project that has already been started if I overwrite that index.swf file it won't work at all 😞 Any thoughts on this???

We got it working. Try this:

StreetView Widget.docx

MarcinDruzgala

Geohaskett,

Thanks for answering. Still i dont understand why this is illegal since i use a Javascript API to run google maps, which is legall. But hey, this is Google. Honestly it's a shame that if u want to create a website with google map as a basemap you can do it only with Javascript...

Regards,
MDruzgala

GeorgeHaskett

MDruzgala,

I'm not a lawyer so my input is simply my basic understanding, so if I am wrong feel free to post.

This has always seemed a question that in some aspects is simple to explain while yet in other aspects it may not be.

My understanding is that te biggest issue is how the data is being pulled in and utilized. It is illegal to hack Google map tiles and import them into your application directly as a service, unless you have permissions to do so via whatever license it takes. I remember a few years ago you could purchase a Google image server and install it as part of your overall GIS server solution, thus allowing you to use their data inside your application. I don't know if this is offered anymore or not. Likewise, Arc2Earth use to offer an application for a fee that did the same within ArcGIS Desktop software. Again, I don't know if its currently available either.

The application or widget in question on this thread does not pull the data into the Flex Viewer as a service, but instead pulls it into a separate shell with the appropriate logos and terms of use, etc.

Having said that, I'm not a lawyer and its typically safer to default to not using their data if you have any doubts. There appears to be multiple threads regarding this, but everyone seems to make a statement without adding additional supporting explaination, etc.

Again this is only my understanding and could be totally wrong....

MarcinDruzgala

Hi, I've got a question. Isn't that illegal to use google maps or google street view in flex application? I'm reffering to this thread:
http://forums.arcgis.com/threads/51953-Google-Maps-in-Flex-Viewer

Two reasons i'm asking:
-using this widget
-using google maps with Javascript function in my Flex application(i posted a thread but noone answered http://forums.arcgis.com/threads/68033-Google-Maps-in-Viewer-for-Flex-amp-amp-Multiple-WMS-layers )

MDruzgala

GeorgeHaskett

Andrew,

Have you thought about adding the Google Earth viewer into this widget so that you can see the terrain data in quasy 3D?

Would that be possible or is that asking too much of a Flex Viewer Widget?

Something similar to this:

http://mcpd.mt.gov/mcpd/Home/threeD?lat=47.1121960589818&lng=-110.264282226563&description=9100200

Thanks,

Haskett

deleted-user-yA_w_FC9FKe5

I think it has to do with index.swf file. What does this file do? It seems as if when I replace the index.html file and the index.swf file on a simple flex project or new project things work fine. However, one where I have a complex project that has already been started if I overwrite that index.swf file it won't work at all 😞 Any thoughts on this???

SteveNelson

Just tagging onto this thread to confirm I'm having the same issue with the compiled version.
If there's anything I can do/test to help out just let me know.

I had an issue with a previous verson of this streetview tool where it conflicted with other widgets that were included in my project - so I'm going to remove all other widgets just to see if this makes any difference.
Cheers
Steve

*EDIT - just noticed someone already tried removing all other widgets..

TonyBlades

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

deleted-user-yA_w_FC9FKe5

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

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

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

andrewj_ca

The smiley face should be - 😄

deleted-user-yA_w_FC9FKe5

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

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>

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

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