topic Re: Google Street View URL in Web AppBuilder Custom Widgets Questions

Google Street View URL

KevinThompson — Fri, 10 May 2019 15:51:35 GMT

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

Re: Google Street View URL

RobertScheitlin__GISP — Fri, 10 May 2019 16:04:19 GMT

I still need to confirm that the launching of a new window complies with the terms of service.

It does not.

Re: Google Street View URL

KevinThompson — Fri, 10 May 2019 16:22:18 GMT

Hey Robert,

Thank for getting back to me so quickly on this post..

I guess they have added heavy provisions to their TOS and the below is no longer the case.

Kind Regards,

Kevin

Re: Google Street View URL

RobertScheitlin__GISP — Fri, 10 May 2019 16:26:13 GMT

Kevin,

Yes that replys workflow does conform to Google TOS. You have a link that open a Google Map at a certain location and then the user is forced to then click a link that opens a Streetview. But just opening a StreetView in a new window directly from an esri map is a violation.

Re: Google Street View URL

KevinThompson — Fri, 10 May 2019 16:43:56 GMT

Thanks Robert!

Link to a google maps location it is then!

Kind Regards,

Kevin

Re: Google Street View URL

KevinThompson — Fri, 10 May 2019 16:54:10 GMT

Further to this:

Google Maps Platform Terms of Service Link

It looks like even embedding a link would violate section e.

Re: Google Street View URL

RobertScheitlin__GISP — Fri, 10 May 2019 16:57:57 GMT

Kevin,

I don't believe that a link would constitute a violation of section e.

Re: Google Street View URL

LukeAllen2 — Sat, 11 May 2019 01:36:05 GMT

Hi Kevin Thompson does this require the developer addition of the web app builder to do?

Re: Google Street View URL

MichaelKelly3 — Sat, 11 May 2019 02:30:34 GMT

I would suggest you test out this Arcade script. That being said it looks like it basically does the same. Your script will work, but not with the html you have added. As documented here only href, target and style attributes are supported for anchor tags. So I suspect your onclick event is being wiped out programmatically - I'm surprised it even works within the web map! You don't actually need to add any html - provided the link begins with https:// the popup will display a hyperlink. Although it won't open in a new window as with your onclick event - it will open in a new tab.

Re: Google Street View URL

KevinThompson — Sat, 11 May 2019 14:27:36 GMT

Hey Luke,

Currently this method only works within a web map. The first block of Arcade is placed in a custom expression and the second block of HTML is placed within the pop up windows html. Unfortunately this method breaks if you save and reopen the web map. I have since changed the code to also store the HTML code within Arcade and pass it into the Popup Url. I will update this page shortly.

Kind Regards

Re: Google Street View URL

KevinThompson — Sat, 11 May 2019 14:49:05 GMT

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

// 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

Re: Google Street View URL

LukeAllen2 — Tue, 14 May 2019 10:53:50 GMT

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!

Re: Google Street View URL

MichaelKelly3 — Tue, 14 May 2019 16:30:30 GMT

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.

Re: Google Street View URL

KevinThompson — Fri, 21 Jun 2019 17:44:40 GMT

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.

Re: Google Street View URL

carlosDominguez — Tue, 24 Sep 2019 15:50:25 GMT

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

Re: Google Street View URL

LeeButler1984 — Sun, 03 Nov 2019 13:46:29 GMT

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

Re: Google Street View URL

KevinThompson — Mon, 18 Nov 2019 17:48:39 GMT

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