Hyperlink to Streetview - Widget or Popup

[DanNorman]

Hi everyone, since we can't use an in app widget to display google street view I was wondering if anyone has created a widget or edited the popup window to include a hyperlink to google streetview with coordinates from the click eg: http://maps.google.com/maps?q=&layer=c&cbll=31.33519,-89.28720 (got link from another site!)

I've been digging around in the popup manager.js trying to figure out how to add items to what i think ESRI called the popups action items (zoom to and three dots in WABDE 2.4)

[LefterisKoumis]

Understood. That's why I am thinking the new process that  a user clicks on a location (on an ArcGIS basemap) just to capture the xy info and pass it on the url to open an external Google application with the Google basemap and the street view.

[RobertScheitlin__GISP]

That should work with their TOS.

[LefterisKoumis]

Thank you.

So clicking on a map to capture the xy and create the url on the fly like this:

https://www.google.com/maps/@36.5949014,-119.649611,3a,75y,90t/data=!3m6!1e1!3m4!1soHx-Wlfwao0UGy1Q5...  

or like this 

https://3planeta.com/sv.html?0,40.71207163502554,-74.00533101455102,1303.6655622000706,22.2557781449... 

Similarly,  a user can access the Google Earth by capturing the xy like this:

https://earth.google.com/web/@36.58851,-119.64300,333.18185645a,5099.21240811d,35y,19.67176885h,46.2... 

Developers can control the size and the tools display on the external window.

[KyleCrawford2]

Lefteris would it be possible for you to go into more detail on how you accomplished this workflow? Thanks!

[LefterisKoumis]

Capture the coords at the point you click. The function will pass the coords to a google app to open the streetview in a popup window.

this.map.on("click", lang.hitch(this, this.getstreetview))‍

getstreetview:function(evt){
var url1= "http://maps.google.com/maps?q=&layer=c&cbll="
       var theX = evt.mapPoint.x.toFixed(5)
       var theY = evt.mapPoint.y.toFixed(5)
       var thelonglat = webMercatorUtils.xyToLngLat(theX, theY, true);
       var thelong= thelonglat[0].toFixed(5);
       var thelat= thelonglat[1].toFixed(5);
        var comma=",";
          var width = 800;
          var height = 600;
          console.log(screen.availWidth);
          var left = parseInt((screen.availWidth/2) - (width/2));
          var top = parseInt((screen.availHeight/2) - (height/2));
          console.log("left: " + left + " top: " + top);
           var curentzoom = this.map.getZoom();
    if (curentzoom <16 ){
      alert("Please zoom in until the scale is at least 600ft or less.")
    } else {
          var windowFeatures = "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top;
        window.open(url1.concat(thelat,comma,thelong),"Google StreetView", windowFeatures);
       }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RyanBoudreaux]

I'd like to attempt to do this same thing, but I'm not versed in javascript enough to get get this working.  Can any of you lend a hand?  I can get the code portions from the "Create a feature action in your widget" into the correct locations, but where/how do I get the coordinates into the hyperlink?

[AyeletGreenberg]

Hi Dan,

Have you created a Streetview widget for Web AppBuilder? If so, will you be willing to share it?

Thanks

[DanNorman]

Hi Ayelet, I used/modified a widget created by Stan McShinsky Street View in Popup Widget 1.1.0.1 

I had to run a geographic transformation to get my utm coords into dms, and i disabled some of the extras like bing and aerial.