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; } } }

Integrating streetview to my Flex Application urgent.......

Matildaobaseki

Hi All,

I did integrate Google streetview Wedge by dbechtold to my flex application ran it the first time from my flex builder, it worked, but wont display the second time i ran the flex application.

Also dbechtold wedge only displayed one location. I need a code( from the guru's) that when I used the location wedge in my flex application, which uses esri geocoding Api, it registers the lalng and displays the corresponding location in google streetview panorama.

Any Ideas..................

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

JoshCalhoun

Download this file from Robert Scheitlen. His street viewer is a lot easier to set up and use. Make sure line 62 in the Streetview.mxml has a virtual directory pointing to the StreetView.html file. Also, do not change the WKID (spatail reference) value in line 40. My map is in TN SPC 83 it did not work for me when I changed it from the original value.

hope it helps,

Josh Calhoun
City of Chattanooga GIS

GoogleStreetView.zip

FrankRoberts

I have just worked up a new version of that tool that gets around the pop up blocking issue by loading the content into a frame within flash. It also mashes up the Streetview data with the Pictometry oblique view data in one window. The widget is running under the Flexviewer 2 Beta. You can check it out at:

http://gis.cdatribe-nsn.gov/flashmaps2/

Let me know if you want to be a guinea pig and test the widget?

Frank

LeeAllen

Frank,

I will be a guinea pig, that is awesome!!

SimonMorgan

I have just worked up a new version of that tool that gets around the pop up blocking issue by loading the content into a frame within flash. It also mashes up the Streetview data with the Pictometry oblique view data in one window. The widget is running under the Flexviewer 2 Beta. You can check it out at:

http://gis.cdatribe-nsn.gov/flashmaps2/

Let me know if you want to be a guinea pig and test the widget?

Frank

Could I be a guinea pig too, this widget would fulfill the biggest request I get from my users!!!!!

IainCampion

I have just worked up a new version of that tool that gets around the pop up blocking issue by loading the content into a frame within flash. It also mashes up the Streetview data with the Pictometry oblique view data in one window. The widget is running under the Flexviewer 2 Beta. You can check it out at:

http://gis.cdatribe-nsn.gov/flashmaps2/

Let me know if you want to be a guinea pig and test the widget?

Frank

Gidday mate,

What a legend!!

Keen to be a guinea pig and help out on the code too, very smart/designed widget mate.

Cheers
Coomsie

LeeAllen

I just gave this a try on the new 2.1 API and 2.1 flexviewer and get the following error:

Description Resource Path Location Type
Could not resolve <flexiframe:IFrame> to a component implementation. WebForm.mxml /FlexViewer2/src/widgets/FrStreetview line 59 Flex Problem

I see in the doc that you used 2.0, would that be the difference?

TetsuyaYAMAMOTO_0-1762907876615.png

GaryBushek

would like to try the streetview widget out. Any idea where I can get it? The code gallery seems very slim. I'm new to the flex 2.x stuff as of today and i've never worked within the sample viewer before so it seems difficult to get started with custom stuff.

JoshCalhoun

Frank your asome. Thanks for the posting.

I tried your hyperlink tool but I could not get it too work. Could you post when you get it up and running?

thanks,

LeeAllen

Got it to work, perfect!!! Yes, this is awesome. I looked at your hyperlink tool as well, and it seemed to work, except when I went to close out the window it got stuck and I couldn't get it to go away. Would love to see that code soon as well.

GaryBushek

Lee,
What did you get working? I dont see any code attachments here to try out. Is this available elsewhere?

Thanks, Gary

Matildaobaseki

Hi Frank,

Thanks, please send this as a zip file so I could try the code myself. Others seem to have liked it.

Thanks......

Matildaobaseki

Hi Josh,

could you attached a new copy of the googlestreetview, the zip you sent previously seem to be corrupt. I ' m unable to view download the files.

Thanks

RobertScheitlin__GISP

Matilda and Josh,

The issue with the zip file be corrupted is a known issue with Internet Explorer and this forum. The original zip is not actually corrupted you just have to use any browser other that IE to download it. My preference is Firefox.

deleted-user-RjoC4IOGTpoH

Hi Frank,

Is your your dual view app working with 2.1?
Mind if I try it out?

Excellent work ...

Nestor.

FrankRoberts

Thank you everyone for the intrest. I have 4 people testing currently. Once I get feedback from them I'll start a new thread or post out the zip file in the user samples. I have the sample working in 2.1, after some reworking. My next task is to finish up work on the hyperlink code, once that is done I'll do the same.

Sorry for hyjacking the thread Robert!

Matildaobaseki

Hello Code Gurus....
Below im mxml code for gecoding Addresses, now embedding google streetview in my html. What I want to archieve is as the marker locates the postcode search or address search in my map, it then parse the latlon of the position maker to the streetview panorama and displays the streetview image of that search.   but obviously, I' M NOT ARCHIEVING THIS. HELP PLEASE.
HERE IS THE CODE.... it displays the marker for the search but not the streetview
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:maps="com.google.maps.*"
    width="100%" height="100%" layout="absolute" viewSourceURL="srcview/index.html">
<mx:Panel title="Google Maps Demo" width="100%" height="100%">
<mx:VBox width="100%" height="55%">
   <mx:HBox width="100%" height="25">
    <mx:Label
     text="Enter address: "/>
    <mx:TextInput x="76" y="10"
      id="address"
     text="london"
    enter="doGeocode(event);" />
    <mx:Button
     id="submitButton" label="Search"
     click="doGeocode(event);"
     />
   </mx:HBox>
   <maps:Map
    id="map"
    key="ABQIAAAA6-wf-nBKy-SMBfMdxRjYqxRjBgYrW1knLEOdndkig2gkeE6wEhT7MqUe29V1DYC-8Dw_CYwZPhdzzw"
    mapevent_mapready="onMapReady(event)"
    width="100%" height="100%"/>
</mx:VBox>
</mx:Panel>
<mx:Script>
<![CDATA[
   import com.google.maps.services.ClientGeocoderOptions;
   import com.google.maps.LatLng;
   import com.google.maps.Map;
   import com.google.maps.MapEvent;
   import com.google.maps.MapMouseEvent;
   import com.google.maps.MapType;
   import com.google.maps.services.ClientGeocoder;
   import com.google.maps.services.GeocodingEvent;
   import com.google.maps.overlays.Marker;
   import com.google.maps.overlays.MarkerOptions;
   import com.google.maps.InfoWindowOptions;
   import mx.controls.Alert;
   import com.google.maps.controls.ZoomControl;


   import com.google.maps.controls.MapTypeControl;
   import com.google.maps.controls.PositionControl;

private function onMapReady(event:Event):void {
//this.map.setCenter(new LatLng(37.4419, -122.1419), 13, MapType.NORMAL_MAP_TYPE);
this.map.setCenter(new LatLng(51.522524, -0.110933), 13, MapType.NORMAL_MAP_TYPE);

    map.enableScrollWheelZoom();
    map.enableContinuousZoom();
    map.addControl(new ZoomControl());
   }

   private function doGeocode(event:Event):void {
    // Geocoding example
    var geocoder:ClientGeocoder = new ClientGeocoder();
    geocoder.addEventListener(
    GeocodingEvent.GEOCODING_SUCCESS,
    function(event:GeocodingEvent):void {
    var placemarks:Array = event.response.placemarks;
if (placemarks.length > 0) {
map.setCenter(placemarks[0].point);
var marker:Marker = new Marker(placemarks[0].point);
marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));

This is the error....
marker.setLatLng(event.latLng);
ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );
       });

map.addOverlay(marker);
      }
     });
    geocoder.addEventListener(
     GeocodingEvent.GEOCODING_FAILURE,
     function(event:GeocodingEvent):void {
      Alert.show("Geocoding failed");
      trace(event);
      trace(event.status);
     });
    geocoder.geocode(address.text);
   }
]]>
</mx:Script>
</mx:Application>

RobertScheitlin__GISP

Matilda,

Where is your javascript code for the ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );?

JoshCalhoun1

Frank,

I just tried loading your street viewer widget and it works fine with the Services from ESRI but when I loaded it into my own viewer none of the windows would show up flash or html (see attachment). When I zoomed out inside the Google Map window, I found that my location had been switched to somewhere in Africa. It was way off.

Does the spatial reference have anything to do with this? I know it did not matter when I used Robert Scheitlens SV widget but this is a lot different. My map services are in TN State Plane NAD 83 (wkid 2274).

Your thoughts would be greatly appreciated.

thanks,

FRStreetViewer.jpg

Matildaobaseki

Hi Rob,

here is of the Javascript for the streetview panorama.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<link rel="stylesheet" type="text/css" href="history/history.css" />


<title>${title}</title>

<script src="iframe/iframe.js" type="text/javascript"></script>
<script src="AC_OETags.js" language="javascript"></script>


<script src="history/history.js" language="javascript"></script>


<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">

</script>

<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA6-wf-nBKy-SMBfMdxRjYqxRjBgYrW1knLEOdndkig2gkeE6wEhT7MqUe29V1DYC-8Dw_CYwZPhdzzw"   type="text/javascript"></script>
<script type="text/javascript">

var myPano;
var panoClient;
var nextPanoId;

function initialize()
{
var whiteHouse = new GLatLng(51.522524, -0.110933);

var whiteHousePOV = {yaw:180,pitch:0};

panoClient = new GStreetviewClient();

myPano = new GStreetviewPanorama(document.getElementById("pano"));
myPano.setLocationAndPOV(whiteHouse, whiteHousePOV);
GEvent.addListener(myPano, "error", handleNoFlash);
panoClient.getNearestPanorama(whiteHouse, showPanoData);
}

function showPanoData(panoData)
{
if (panoData.code != 200) {
    GLog.write('showPanoData: Server rejected with code: ' + panoData.code);
    return;
}

myPano.setLocationAndPOV(panoData.location.latlng);
}

function handleNoFlash(errorCode)
{
if (errorCode == 603) {
    alert("Error: Flash doesn't appear to be supported by your browser");
    return;
}
}

function setPanorama( lat, lon )
{
panoClient.getNearestPanorama(new GLatLng(lat, lon), showPanoData);
}

</script>
</script>

</head>

<body scroll="no" onload="initialize()" onunload="GUnload()">

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr><td width="100%" height="100%">
<script language="JavaScript" type="text/javascript">
<!--

Thanks,
Matilda

RobertScheitlin__GISP

Matilda,

This is what I got working (mostly)

<!-- saved from url=(0014)about:internet -->
<html 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--  BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!--  END Browser History required section -->

<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<!--  BEGIN Browser History required section -->
<script src="history/history.js" language="javascript"></script>
<!--  END Browser History required section -->

<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = ${version_major};
// Minor version of Flash required
var requiredMinorVersion = ${version_minor};
// Minor version of Flash required
var requiredRevision = ${version_revision};
// -----------------------------------------------------------------------------
// -->
</script>
</head>

<body scroll="no" onload="initialize()" onunload="GUnload()">
<div id="pano" style="width: 100%; height: 50%;float:top"></div>
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

var myPano;
var panoClient;
var nextPanoId;

var sv = new google.maps.StreetViewService();
var panorama;

function initialize()
{
 panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"));
 
}

function setPanorama( lat, lng )
{
 alert(lat + ", " +lng);
 var svlatLng = new google.maps.LatLng(lat,lng);
 sv.getPanoramaByLocation(svlatLng, 50, processSVData);
}

function processSVData(data, status) {
 
    if (status == google.maps.StreetViewStatus.OK) {
      //alert("Got to StreetViewStatus");      
      panorama.setPano(data.location.pano);
      panorama.setPov({
        heading: 270,
        pitch: 0,
        zoom: 1
      });
      panorama.setVisible(true);
    } else {
      alert("Street View data not found for this location.");
    }
  }
if ( hasProductInstall && !hasRequestedVersion ) {
 // DO NOT MODIFY THE FOLLOWING FOUR LINES
 // Location visited after installation is complete if installation is required
 var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
 var MMredirectURL = window.location;
    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    var MMdoctitle = document.title;

 AC_FL_RunContent(
  "src", "playerProductInstall",
  "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
  "width", "${width}",
  "height", "${height}",
  "align", "middle",
  "id", "${application}",
  "quality", "high",
  "bgcolor", "${bgcolor}",
  "name", "${application}",
  "allowScriptAccess","sameDomain",
  "type", "application/x-shockwave-flash",
  "pluginspage", "http://www.adobe.com/go/getflashplayer"
 );
} else if (hasRequestedVersion) {
 // if we've detected an acceptable version
 // embed the Flash Content SWF when all tests are passed
 AC_FL_RunContent(
   "src", "${swf}",
   "width", "${width}",
   "height", "${height}",
   "align", "middle",
   "id", "${application}",
   "quality", "high",
   "bgcolor", "${bgcolor}",
   "name", "${application}",
   "allowScriptAccess","sameDomain",
   "type", "application/x-shockwave-flash",
   "pluginspage", "http://www.adobe.com/go/getflashplayer"
 );
  } else {  // flash is too old or we can't detect the plugin
    var alternateContent = 'Alternate HTML content should be placed here. '
   + 'This content requires the Adobe Flash Player. '
    + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
    document.write(alternateContent);  // insert non-flash content
  }
// -->
</script>
<noscript>
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="${application}" width="${width}" height="${height}"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
   <param name="movie" value="${swf}.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="${bgcolor}" />
   <param name="allowScriptAccess" value="sameDomain" />
   <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}"
    width="${width}" height="${height}" name="${application}" align="middle"
    play="true"
    loop="false"
    quality="high"
    allowScriptAccess="sameDomain"
    type="application/x-shockwave-flash"
    pluginspage="http://www.adobe.com/go/getflashplayer">
   </embed>
 </object>
</noscript>
</body>
</html>

Matildaobaseki

Thanks Rob,

If I embed your code in my javascript will this set my marker to display location and at same time set streetview panorama to the same location of that marker.

check the code below and see if this :marker.setLatLng(event.latLng);
ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );.....................
is alright to be within the geocode function or not...

Thanks,
// Geocoding example
var geocoder:ClientGeocoder = new ClientGeocoder();
geocoder.addEventListener(
GeocodingEvent.GEOCODING_SUCCESS,
function(event:GeocodingEvent):void {
var placemarks:Array = event.response.placemarks;
if (placemarks.length > 0) {
map.setCenter(placemarks[0].point);
var marker:Marker = new Marker(placemarks[0].point);
marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));

This is the error....
marker.setLatLng(event.latLng);
ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );
});

map.addOverlay(marker);
}

RobertScheitlin__GISP

Matilda,

What is the error you are getting the the flex app I never got an error in the flex side.

Matildaobaseki

Hi Robert,

Thanks it works but one more thing, after doing the search, it displays the location using the marker and then I have to click on the marker to get me the streetview because I' m using this function...
marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {...
marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
marker.setLatLng(event.latLng);
ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );

How can I avoid not having to click on the marker first, I quess it will always have to set streetview to read the latlng of that location.
How can I modify my code to do the search get it to parse th latlng to the streetview location somehow and then displays the corresponding streetview location without having to click on the marker.

Many Thanks.....

TonyCollins

So does anyone know if there are any legal issues in doing this?

RobertScheitlin__GISP

Tony,

Well over a year or more ago there was some discussion on just that the legality of using Google and particularly Bird's eye view data (Pictometry) inside a flex site and the popular route was that as long as you opened this data in a separate window and clearly indicated the origin of that data that you were OK. Now just last week I tried to dig into this when Frank showed his version that had Google street view and Bird's Eye inside a flex popup window, but could not find anything concise on the issue from Pictomerty or Microsoft. So I am going to continue to play it safe and open only Google Street View in a completely separate browser window.

TonyCollins

Tony,

Well over a year or more ago there was some discussion on just that the legality of using Google and particularly Bird's eye view data (Pictometry) inside a flex site and the popular route was that as long as you opened this data in a separate window and clearly indicated the origin of that data that you were OK. Now just last week I tried to dig into this when Frank showed his version that had Google street view and Bird's Eye inside a flex popup window, but could not find anything concise on the issue from Pictomerty or Microsoft. So I am going to continue to play it safe and open only Google Street View in a completely separate browser window.

Ah thanks Robert, that's what I do here. I just saw the example up above and wondered if anything had changed but the opinion here is that we can't embed Google into our application for free just now.

I'll keep listening...

Matildaobaseki

Hi Robert,

still waiting for a reply, is there a possible answer to my above question.

Thanks,

Matilda

RobertScheitlin__GISP

Matilda,

Sorry I don't know the answer to that one. You would be better off posting this non ESRI related question to a Google Maps forum.

Matildaobaseki

Alright, I thought about that too. Thanks Robert...

Matildaobaseki

Hello All,

I would like to say thank you for to all who have replied to this thread especially robert. My question was resolved....

Thanks to all....

Matilda

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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