Google Street View URL

[KevinThompson]

Hello All,

I have been working on setting up a google street view hyperlink within my web app and have gotten the example to work within the web map. Unfortunately the Web App does not respond to the HTML correctly is there a way to pass this as a function to fix the issue perhaps?

This works just like what was created here by kreiger1104

https://www.arcgis.com/home/item.html?id=fd048892966240d882f0e8a2b7abe809

It takes the coordinates from the geometry and passes that into the url using the following Arcade expression based off of the great post by Xander Bakker located here.

// Converts Longitude from metres to decimal degrees
var originShift = 2.0 * PI * 6378137.0 / 2.0;
var lon = (Geometry($feature).x / originShift) * 180.0;

// Converts Latitude from metres to decimal degrees
var originShift = 2.0 * PI * 6378137.0 / 2.0;
var lat = (Geometry($feature).y / originShift) * 180.0;
lat = 180.0 / PI * (2.0 * Atan( Exp( lat * PI / 180.0)) - PI / 2.0);

// Combines the features coordinates to the Google Street View URL
var url = Concatenate("http://maps.google.com/?cbll=" ,lat, "," ,lon, "&cbp=12,90,0,0,5&layer=c");
url

To launch this url within a new window the pop up is configured with the following HTML code:

<a href="#" onclick="MyWindow=window.open('{expression/expr4}','MyWindow','toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=no,resizable=no,width=400,height=400,left=450,top=525');
return false;"> Click here </a>

This works great within the web map but fails within the web app as it only seems to pulls the href="#" and duplicates the apps web page.

There are concerns around using google street view within other mapping applications and I still need to confirm that the launching of a new window complies with the terms of service. He is a sample post discussing this from the old open source widgets on Github here

Kind Regards,

Kevin

[KevinThompson]

Hello Michael,

The example works well and code is way more eloquent than mine! The challenge for myself is in trying to have it within the small window for ease of use. I have managed to get around it programmatically wiping out my HTML code by embedding my changes within the Arcade expression and passing it to the URL

// Converts Longitude from metres to decimal degrees
var originShift = 2.0 * PI * 6378137.0 / 2.0;
var lon = (Geometry($feature).x / originShift) * 180.0;

// Converts Latitude from metres to decimal degrees
var originShift = 2.0 * PI * 6378137.0 / 2.0;
var lat = (Geometry($feature).y / originShift) * 180.0;
lat = 180.0 / PI * (2.0 * Atan( Exp( lat * PI / 180.0)) - PI / 2.0);

// Combines the features coordinates to the Google Street View URL
var url = Concatenate("https://maps.google.com/?cbll=" ,lat, "," ,lon, "&cbp=12,90,0,0,5&layer=c");

//var url = "https://www.google.com/maps/search/?api=1&query=47.5951518,-122.3316393"

// Creates the parameters to open in a small window and passes the url with coordinates
var Parameters = Concatenate("javascript:mywindow=window.open(","'", url,"'",",","'","mywindow","'",",'", "height=400,width=400,left=450,top=525","'",");");
Parameters

Though the code does break through the Pop-up Hyperlink method within a Web App for some reason. I have noticed that if you pass this through the Pop-up Media instead it works and opens it within a window from the app. (I have read the Hyperlink and Pop-up pass urls differently for example the Pop-up Media can accept spaces within the url) The only issue is that it is not taking the coordinates some how. Finding out why that is will be harder since I don't think I can see

what the Web App is changing within the URL.

Kind Regards

[KevinThompson]

I have solved the issue and determined that you cannot pass the full URL from arcade into the Pop-up media URL.

Create an Attribute Expression with the following code:

// Converts Longitude from metres to decimal degrees
var originShift = 2.0 * PI * 6378137.0 / 2.0;
var lon = (Geometry($feature).x / originShift) * 180.0;

// Converts Latitude from metres to decimal degrees
var originShift = 2.0 * PI * 6378137.0 / 2.0;
var lat = (Geometry($feature).y / originShift) * 180.0;
lat = 180.0 / PI * (2.0 * Atan( Exp( lat * PI / 180.0)) - PI / 2.0);

// Combines the coordinates and passes them to the Pop-up Media URL
var Coordinates = Concatenate(lat,",", lon);
Coordinates

Then in the Pop-up media for the image use the following URL:

javascript:mywindow=window.open('https://maps.google.com/?cbll={expression/expr1}&cbp=12,90,0,0,5&layer=c','mywindow','height=400,width=400,left=450,top=525');

Make sure the URL references the correct expression so it passes the coordinates into the URL

Now you can open a windowed tab for Google Street View at the location of the geometry.

[LeeButler]

Hi Kevin Thompson,

Thanks for sharing this code.  This is exactly what I am trying to do within my Web App.  I have used the code above and can get a new windowed tab to open shwoing the Goolgle Street View location of my features.  However, as well as the windowed tab opening with Street View, a second full page tab is also opening that is completely blank when I use this bit of code in the popup media image URL:

javascript:mywindow=window.open('https://maps.google.com/?cbll={expression/expr0}&cbp=12,90,0,0,5&layer=c','mywindow','height=400,width=400,left=450,top=525');

Have you run into this issue or do you know why it maybe happening?

Thanks

Lee

[KevinThompson]

Good Afternoon Lee,

I am also now experiencing problems. Recently Google Chrome is now blocking the pop-up. As of yet I haven't found a way to fix this issue. It still seems to work as expected in Microsoft Edge, but I have not been able to allow AGOL as a trusted site to prevent it from blocking the pop-ups in Chrome.

Kevin

[LukeAllen2]

Hi Michael, I got the arcade expression you provide a link for to work great in my web app - thank you!

I just wanted to ask how one might go around editing the hyperlink field to something other than the current 'more info' hyperlink.

Thanks again!

[MichaelKelly3]

Hi Luke - by default more info is displayed in the popup for text beginning with https://.

In order to change the display text, you would need to use a custom attribute display for the popup which will allow you to alter any of the html including the display text.

[carlosDominguez]

Hello

Sorry for my English, use this application in a portal of a State or company, can generate some cost from Google?

best regards

Hola

Usar este aplicativo ,  en un portal de un Gobierno o empresa, puede generar algún costo por parte de Google?

saludos cordiales