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.
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) {
this.map.disableMapNavigation();
this.map.enableMapNavigation();
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?
This issue is now resolved thanks to Matt Driscoll (driskull) on the GitHub site for the Public Information Map template:
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.
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
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