Hyperlink to Streetview - Widget or Popup

14780
27
Jump to solution
05-16-2017 03:41 PM
DanNorman
Occasional Contributor

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)

27 Replies
LefterisKoumis
Occasional Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

That should work with their TOS.

0 Kudos
LefterisKoumis
Occasional Contributor III

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.

0 Kudos
KyleCrawford2
New Contributor III

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

0 Kudos
LefterisKoumis
Occasional Contributor III

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);
       }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
}
0 Kudos
RyanBoudreaux
New Contributor II

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?

0 Kudos
AyeletGreenberg
Occasional Contributor

Hi Dan,

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

Thanks

0 Kudos
DanNorman
Occasional Contributor

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.

0 Kudos