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?
