topic Re: Videos in popups via Google Chrome for the Public Information Template causes locked panning anomaly in ArcGIS JavaScript Maps SDK Questions

Videos in popups via Google Chrome for the Public Information Template causes locked panning anomaly

JohnBocan — Mon, 22 Sep 2014 19:20:12 GMT

The problem:

A colleague of mine had asked me to help out on a map he designed. We have an augmented ESRI map template that provides live traffic video feeds via an iframe embedded popup. When viewed in Internet Explorer (version 10) and Firefox (version 31) the map and popups work as desired. However in Google Chrome (version 37), after clicking on and closing two, maybe three, of the camera locations and getting the popups, the map locks in the pan mode. The only way to get out of the locked pan is to refresh the browser window.

The map:

Our map is found here: http://geodata.md.gov/ospreypublic/

And it is an augmented form of the ESRI Public Information Map:

http://solutions.arcgis.com/emergency-management/help/public-information/

Esri/public-information-map-template-js · GitHub

What’s involved:

The mapping application utilizes this webmap: http://www.arcgis.com/home/item.html?id=af0bd454bd524202bfc6963665060f49

The popup for the live traffic video feeds utilizes this REST service: http://geodata.md.gov/appdata/rest/services/OspreyPublic/TrafficCameras/MapServer/0

using the “iframe” field.

Here is a sample value from the “iframe” field:

"iframe": "\u003ciframe width=\"481\" height=\"361\" src=\"http://www.chart.state.md.us/video/videoshare.asp?feed=c1ff9c0c00a100ab0050fa36c4235c0a\" frameborder=\"0\" allowfullscreen\u003e\u003c/iframe\u003e"

It is being called into play via webmap.js in “mediaInfos” under “popupInfo” as

"description": "{iframe}"

for the TrafficCameras map service.

The video stream:

The video stream uses JW Player 6.6 and the streams originate from here:

http://www.chart.state.md.us/TravInfo/trafficcams.php

Some source code for the map:

http://geodata.md.gov/ospreypublic/webmap.js

http://geodata.md.gov/ospreypublic/js/main.js

http://geodata.md.gov/ospreypublic/css/popup.css

What I’ve done:

I’ve searched the web for some solutions. Most notably, after a while I came across this link:

https://community.esri.com/thread/101650

and this one:
https://community.esri.com/message/64744#64744

Both links mention very similar issues that I’ve encountered and both have commentary that point to a possible bug in Google Chrome.

I’ve have tried some workarounds.

Changing the iframe in the field value description to <object> or <embed> or even doing a <div><iframe>, the latter being a matter of desperation.
Making adjustments to sizing, padding, margins, left, top, height, width for the iframe in the popup.css file. (Sometimes sizing of enveloping elements in CSS can throw things off.)

Some ideas:

I’ve seen some sites saying there are issues with embedded iframes but I did try having an iframe without the video and I have no issue of locked panning in Chrome. I believe the issue lies in the video feed per se.

I’m wondering about some means to forcibly stop panning somehow while the popup is live or to destroy everything about the popup (and re-establish something else?) once the popup is closed. I’m not sure if I can try to do this or if it actually has already been done as a workaround.

My supervisor tried dealing with hiding and showing events:

on(this.map.infoWindow, "hide", lang.hitch(this, function (evt) {
on(this.map.infoWindow, "show", lang.hitch(this, function (evt) {

Along with enabling and disabling map navigation. (These would either turn on pan or would disable pan from working completely. Anything for allowing pan but not having it turned on, perhaps?)

this.map.disableMapNavigation();
this.map.enableMapNavigation();

as well as doing similarly for panning:

this.map.enablePan();
this.map.disablePan();

Triggering mouse-up events did not work either:

on(this.map, "mouse-up", lang.hitch(this, function (evt) {

Any direction on the locked panning issue is appreciated. Please try our map in Google Chrome, click on the camera icons a few times and you should experience the locked panning issue. By the third time, panning should get locked. Please, any ideas?

Re: Videos in popups via Google Chrome for the Public Information Template causes locked panning anomaly

JohnBocan — Tue, 23 Sep 2014 15:55:36 GMT

This issue is now resolved thanks to Matt Driscoll (driskull) on the GitHub site for the Public Information Map template:

Videos in popups via Google Chrome for the Public Information Template causes locked panning anomaly · Issue #25 · Esri/…

Basically, the iframe needs to be killed when the infoWindow goes to "hide".

The following code needs to be added in main.js:

// on info window hide

on(this.map.infoWindow, 'hide', function() {

// lets look for any and all iframes within info window node. Using dojo/query

// if the iframe had an ID this would be better/faster. could use dom.byId('iframeID');

var iframes = query('iframe', this.map.infoWindow.domNode);

// for each one found

for(var i = 0; i < iframes.length; i++){

// kill them! using domConstruct

                            domConstruct.destroy(iframes);
                        }
                    });

It would be within the

.then(lang.hitch(this, function (response) {

portion around line 911 and after the if-then-else involving "this.map.loaded".

Also and importantly, "dojo/query" needs to be added in the definitions at the top along with adding "query" as function.

Re: Videos in popups via Google Chrome for the Public Information Template causes locked panning anomaly

RexHansen — Wed, 24 Sep 2014 22:55:29 GMT

Hi John,

If you have a moment, I have a question regarding an ArcGIS Server site which appears to be owned by the Maryland Department of Transportation: http://170.93.143.161/arcgis/rest/services

There are a couple feature layers in a map service that have an extent where min\max x\y are NaN and spatial reference is set to 26985. Example: http://170.93.143.161/arcgis/rest/services/CHARTMap/CHART_Public_PC/MapServer/1

I've been unable to reproduce this behavior where min\max x\y are NaN. Do you know how this data was prepared to exhibit these properties?

Thanks

-Rex

Re: Videos in popups via Google Chrome for the Public Information Template causes locked panning anomaly

JohnBocan — Thu, 25 Sep 2014 12:46:27 GMT

Rex,

Thank you for your question. I've passed it on to a fellow who handles our

AGS services who would have the best knowledge to answer your question.

Regards,

John Bocan

John M. Bocan

Software Applications Specialist II | MD iMAP

Maryland Department of Information Technology

45 Calvert Street | Annapolis, MD | 21401

John.Bocan@Maryland.Gov | http://imap.maryland.gov/

Maryland Environmental Service

259 Najoles Road | Millersville, MD | 21108

jboca@menv.com | www.menv.com

Cell Phone: 240-278-9036