Street View in Popup Widget 1.1.0.1

[#1]

Latest update:

     3/18/2015 - BUG #1 Printing with StreetView widget open

     2/26/2015 - uploaded files

This widget adds in Google Street View, Google maps, and Bing Birdseye imagery into a single popup.

When this widget is loaded into web app builder there are a few variables that you can control to customize it.

• Geometry service
• Width - Width of the maps inside the widget panel
• Height - Height of the maps inside the widget panel
• Google Map Type
• Marker Image
• Symbol Style
• Symbol Color
• Symbol Size

Additional configuration options available through the config.json file

also please see the help document in the link in the demo

This widget is built off of the work of Frank Roberts‌ and the Inovate Team.

The maps are coming from dualmaps.com‌ with more information there.

I did pull some of the files off of dual maps to be hosted through the widget because on a small screen the full page link was hard to get to. I moved it to the top left for easier access.

BUG:

1. I found that when the Street View widget is turned on then my printing widget fails to generate a print job. Just turn off the widget and it works again.

-Stan

[EdHarrell1]

Great work!  Thank you for sharing.

[JoeFlannery]

Stan:

Fantastic widget! 

Can this widget be used in the ArcGIS Online version of WAB?  I'm guessing not.

Thank you,

Joe

[StanMcShinsky]

Joe,

Right now custom widgets can not be added to the AGOL version of web app builder. I imagine this coming soon though.

[JoeFlannery]

Thank you Stan.  I look forward to that day.  Thank you for sharing your work with the community.

Joe

[FinbarGillen]

Hi,

this widget doesn't work properly for me. I think it is because I am using a basemap with Irish National Grid coordinates. Does anyone know where in the code I should edit and if possible what I should put in?

Regards

Finbar

[RoyceSimpson]

I'm having the same issue but with a different non-decimal-degrees basemap.  I'd think the only reasonable solution is to make sure the basemap is in dec/degrees, which makes perfect sense.  If that can't be helped then we are SOL... aside from doing a lot of pushups for a workaround.

[RoyceSimpson]

Looks like this widget doesn't play nice with the "launchpad" theme.  If you place the widget in the "actionbar" controller, it opens ok but then doesn't close properly and the yellow diamond is left on the screen.  Any way to fix this so it can work properly with this theme?

[FinbarGillen]

I am also using the launch pad theme for it and the diamond does not lave the age after I close it either.

[ChadTinsley]

Excellent work! Thanks for sharing. I will definitely be putting this to good use.

[ChrisBradberry]

Royce,

This is a bug that esri knows about.  I added the widget outside of the anchor bar container, and it works correctly.  They are supposed to fix this in November.  Not sure when the new version is actually coming out.

Chris

[RobertScheitlin__GISP]

AGOL version is already out but the Dev version will be out in December

[CCWeedcontrol]

How do you install this widget? I have added the StreetViewPopup folder to client/stemapp/widgets. When i add it to the app an click on the map nothing happens. I am missing something?

[MikeJones7]

I'm trying to find this out too.  I don't even have a webmap loaded into the templete.  I went into the config.json file and it doesn't show much besides window sizing and colors.  Is there a setting somewhere else?

[CCWeedcontrol]

I really like how it shows different views. This is VERY helpful.

[MikeJones7]

It looks like it's being blocked behind https and everything needs to be changed from http to https.  Is there a way to change all of these to https?

[MeganWirth]

Awesome! good work

[MeganWirth]

Doesn't seem to work with state plane like the other street view widget. Is this something i can configure?

[StanMcShinsky]

This widget uses the dualmaps api to put the lat/long in the url of the map searches and just add it like an iframe into the widget. So if you have anything other then lat/long then you would have to catch the coordinates from the click and calculate from state plane to lat/long and pass that to the api.

[Anonymous User]

Stan McShinsky Hm I'd just come across DualMaps after reading Robert's Streetview thread regarding Google's Terms of Service issue.

 Dual Maps: Google Maps, Street View and Bing Maps in an embeddable control - www.mapchannels.com apparently is itself compliant since the location originates on the Google platform. But how about your widget?  It passes location from the Esri API to DualMaps which passes to Google.. ??  So.. we can use your widget perhaps?  Mine sent lat/long directly to Google and so that was the issue apparently.

[LeoLadefian5]

Great Work on this widget!  I was wondering if there was a way to make the initial window box larger when you click on the widget?  So the user doesn't have to resize the box.

[StanMcShinsky]

kmsagis‌, I have not understood completely the TOS for dual maps and Google maps. I know this widget works for my needs. It looks like Dual maps is compliant with Google maps. So it does work the way you described above by passing the click lat/long of the esri api to dual maps and then dual maps grabs the streetview.

[Anish_Adhikari]

The widget no longer seems to be working. It shows an error message saying 

" Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details."

[LeoLadefian5]

I recently encountered this error, the console states Google maps API must use https connection.

[LeoLadefian5]

[Anish_Adhikari]

For the https related error, you can go into the code and change any url that points to google servers from http to https. I was also getting this error but was able to fix it and it was working fine. The new error seems to be related to the API key.

[LeoLadefian5]

I wasn't able to find the API key in the desktop config, is it in the JSON somewhere?

[Anish_Adhikari]

The API key in in a html file. This is the path to the file widgets\StreetViewPopup\dualmaps. The filename is called streetmap.html. I got my own api key and changed the default value and it seems to be working now.

[LeoLadefian5]

Thanks, where did you changed the https locations?

[Anish_Adhikari]

If I remember correctly, the files are dualmaps.js file and streetmap.html. They are located at widgets\StreetViewPopup\dualmaps. 

[FinbarGillen]

Hi all,

Just to set this straight, in order to get the Street View Widget to work you need to:

1. Change any URL that points to google servers from http to https

2. Change the API key located in widgets\StreetViewPopup\dualmaps\streetmap.html. 

I have done this and changed the API to a key that was made for us a couple of years back and it still doesn't work. Any ideas?

Finbar

[LeoLadefian5]

Try to create a new api key and enable Google Maps Javascript API for the API.

[RyanNosek]

Stan - this has been such a helpful widget, thanks so much for putting it out there. A few questions for you - do you have plans to update your widget to use the latest version from Dual Maps (v6)? Among some of the updates from Dual Maps v5 to v6 is the discontinued use by Dual Maps of Bing's API. In sum, DualChannels state they are now solely using the Google Maps API since it also now provides the 45 deg angle imagery and due to the changing TOS with Bing Maps API. 

Also curious if you know where the API Key comes from that is provided in the widget download (streetmap.html)? Wasn't sure if it is yours or if it came directly from DualChannels?

[GiacomoFavaron1]

Hi, I am trying to use the widget but I got nothing back. The problem seems that the content must be served as a https. Do you know how I can rectify this problem?

[RyanNosek]

Hi Giacomo, 

It looks like when you initially set up your WAB Dev version, it was with HTTPS. Your seeing mixed content errors with this widget because it is set up to over HTTP. 

Probably the best way to remedy is to a) change your WAB to use HTTP and b) to be safe, create your own API Key with Google to use in the widget.

[GiacomoFavaron1]

Hi Ryan,

Unfortunately I am not allowed to change WAB to HTTP as per internal policy within my company. Is there another way around the problem in your opinion?

[RyanNosek]

Yes, you'll have to create an API Key with Google. When setting up your Google API Key, you'll enter the accepted to domains associated with your API Key, which will include HTTPS, and will have to change the API Key included in the widget. 

[Anish_Adhikari]

Hi Glacomo,

My WAB and the widget is working with only https. I have changed all the url in the code that point to google servers from http to https and also gotten my own api key from google as Ryan mentioned. However, I have not been able to make the Bing maps in the widget work using this approach but currently we do not have a need for that.

[GiacomoFavaron1]

I did exactly this, I changed all the url in the code to https but didn't make any difference, I guess the I need an API key from google at this point.

I read all the comments above and it seem this widget is in compliance with the Google TOS, however on this resource list (/blogs/myAlaskaGIS/2016/03/09/web-appbuilder-developer-edition-customization-resource-list) they say it is not. Do you know which of the two is the correct one?

Thanks again for helping out.

[RyanNosek]

Giacomo, 

Regarding your second comment, I think you might be mistaken about which widget that post is referring to - which was a different Streetview widget created by Robert Scheitlin, GISP 

However, if there is an entry in blog about this widget (created by smcshinsky ) not being in line with Google's TOS, please let me know, as I may have overlooked it.  I think Stan's widget is compliant - but would definitely like to hear from others who think otherwise.  

[nicogis]

in bing you use https and parameter s=1

https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&s=1

[Anish_Adhikari]

Thanks Domenico,

That change seems to be working.

[RobLawrenson]

When I click a location for a split second it seems to work fine but then Google Maps / Streetview quickly changes to 'Oops! Something went wrong'. The Bing Maps part works fine.

I changed the HTTP to HTTPS in dualmaps.js, I changed the API Key (unrestricted) in streetmap.

Any ideas?

[Anish_Adhikari]

Hi Rob,

If you look at the browser console messages using developer tools built into the browser while you use the widget, it would help to pinpoint the issue. I also got similar error this morning and when I looked at the console messages, it turned out to be related to api key. I got a new api key,  and it seems to be working now. I am not sure why that happened with the older api key though because I had gotten that not too long ago.

Thank You

[ShitalDhakal__GISP]

Thanks for your tips anishbro1, they have been really helpful.

1) I changed all of the http to https in my [installation file]\client\stemapp\widgets\StreetViewPopup\dualmaps.js

2) I also changed my streetmap.html with my own API as this - 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&sensor=false&librarie..."></script>

where x is my own 38 digit API.

But yet, I am getting the same error. Am I doing something wrong?

Thanks,

[Anish_Adhikari]

Hello Shital,

Open your browser console and click on the widget and click on any point and see if you see any error messages related to the widget.

Thank You

[ShitalDhakal__GISP]

Thanks anishbro1‌. My problem has been resolved with a new API. 

[ChristopherBeddow2]

Reposting this comment, as it seems Google is cracking down on use of the street view widgets outside of a Google Maps environment:

Mapillary is a great option, and there are multiple ways to integrate it. Currently the Mapillary viewer is available in GeoCortex, in the Mapillary for ArcGIS Online app (ArcGIS Marketplace), Esri JS API (use MapillaryJS to implement), and WebApp Builder (post here). A new version of the WebApp Builder widget is being pondered, please do let us know if you have any special feature requests!

Chris
Solutions Engineer, Mapillary

[Brian_Beyeler]

Hi Anish,

Pretty new and I am having trouble with this issue as well. The bing birds eye view comes up, but the google maps OOPs. Like Rob I changed the HTTP to HTTPS in dualmaps.js, I changed the API Key in streetmap.html. Am I doing the following example wrong?

1. For example in the dualmap.js I am to change http://maps.google.com/mapfiles/ms/micons/  to https://maps.google.com/mapfiles/ms/micons/. 

2. In the .html I am to get another Google maps javascript api key, and replace it in http://maps.google.com/maps/api/js?key=NEW_API_HERE&sensor=false&libraries=geometry,adsense 

Any help would be appreciated! Thanks!

[Anish_Adhikari]

Hi Brian,

Can you open your application, open console tab in developer tools, clear console, open the widget and click on a location and see if you get any error messages in console? This may help pinpoint the issue.

As far as your bullet points, For point 1.  Yes, you change any url that has google in it from http to https. I think there are few urls that need to be changed.

For point 2. You also need to change the http to https and also paste the api key.

I think those two changes are the only changes I made in order for Google maps to work in my application.

[Brian_Beyeler]

Nice! got it to work! Thanks so much!