ThinkGeo.com    |     Documentation    |     Premium Support

Popups and iPad

#1

Hi,


In my web application, the user clicks on a feature and a popup appears. The popup has a close button on it.


On desktop browsers (IE, firefox, etc.), the user can use the mouse to click the popup close button and it closes.


On the iPad, however, the popup appears, but using the touchscreen, we cannot get the popup to close. Everything else works fine - the zoom in/out buttons, the overlayswitcher, and even touching on a feature to get the popup to show. We just cannot touch the close button to make the popup close. It just seems to refresh the map.


Do you have any insight or suggestions to overcome this?


Thanks!


Treasa



#2

Hi Treasa, 


Thanks you for reporting this issue.
 
It is proved to be a bug that we have fixed. However, recently, our daily building package maybe hold on for the release Map Suite 7.0. So, before the latest version’s free, here is a work around to handle it:
 
 <script type="text/javascript">
        var OnMapCreating = function (map) {
            OpenLayers.Popup.prototype.addCloseBox = function (callback) {
                this.closeDiv = OpenLayers.Util.createDiv(
                    this.id + "_close", null, new OpenLayers.Size(17, 17)
                );
                this.closeDiv.className = "olPopupCloseBox";
 
                // use the content div's css padding to determine if we should
                //  padd the close div
                var contentDivPadding = this.getContentDivPadding();
 
                this.closeDiv.style.right = contentDivPadding.right + "px";
                this.closeDiv.style.top = contentDivPadding.top + "px";
                this.groupDiv.appendChild(this.closeDiv);
 
                var closePopup = callback || function (e) {
                    this.hide();
                    OpenLayers.Event.stop(e);
                };
                                                                alert("a");
                OpenLayers.Event.observe(this.closeDiv, "touchend",
                          OpenLayers.Function.bindAsEventListener(closePopup, this));
                OpenLayers.Event.observe(this.closeDiv, "click",
                OpenLayers.Function.bindAsEventListener(closePopup, this));
            }
        }
</script>
 
 
 
Best regards.
 

Johnny



#3

Hi Johnny,



We updated our software to version 7.0; however, we are still seeing the same behavior on the iPad. When a popup is displayed, the user cannot close out the popup. What should I do?



Thanks,

Treasa 

#4

Hi Treasa, 
  
 I the new 7.0 release update, I guess we did fix this problem on client side code, would you please clear all your browser’s cache and then rebuild the application to try it again? I was just wondering that it maybe something caused by the browser cache stuff. 
  
 Thanks, 
 Johnny

#5

Hi Johnny, 



I cleared my browser’s cache on several devices. Here are the results

1. Desktop (IE) - works as expected. 

2. Mac Laptop (Safari) - works as expected.

3. iPad (Safari)- now the pop-up does not display at all…when i click on a feature, it appears to refresh the feature layer (the features disappear for a second, and then reappear). No pop-ups are displayed. 

4. iPhone (Safari) - works the same as the iPad 

5. Droid - Pop-ups show up, but I can not close them. 


#6

Hi Treasa, 



Sorry for the inconvenience, we used the latest version dlls 7.0.3.0 and the attached sample to test, but the problem didn’t show up on our end. Would you please get 7.0.3.0 dlls and try our sample to see if the problem is still there?



Waiting for your further information



Summer

Post11215.zip (1.75 MB)

#7

Hi Summer, 
  
 In my client-side javascript code, I have the following code (provided by ThinkGEO) to capture the event of a closed pop-up: 
  
  
var Map;
function OnMapCreated(map) {
  Map = map;
  if (map.popups.length > 0) {
    OpenLayers.Event.stopObservingElement(map.popups[0].closeDiv, "click", OpenLayers.Function.bindAsEventListener(function () { this.hide(); }, map.popups[0]));
    OpenLayers.Event.observe(map.popups[0].closeDiv, "click", OpenLayers.Function.bindAsEventListener(closeCallBack, map.popups[0]));
}
               
function closeCallBack() {                
  // actions to perform when pop up closed
} 
 
  
 If I remove this code, the pop-ups close as expected on iPads. Just FYI, i also emptied out the closeCallBack() function, but the same behavior exists.  
  
 So, now my question is - is there an updated way to capture the pop-up closed event so that I can also close the pop-up on an iPad? 
  
 Thank you for your help, 
 Treasa

#8

Hi Treasa, 
  
 Would you please try the following code: 
  
         var Map; 
         function OnMapCreated(map) { 
             Map = map; 
             if (map.popups.length > 0) { 
                 OpenLayers.Event.stopObservingElement(map.popups[0].closeDiv, "click", OpenLayers.Function.bindAsEventListener(function () { this.hide(); }, map.popups[0])); 
                 OpenLayers.Event.observe(map.popups[0].closeDiv, "click", OpenLayers.Function.bindAsEventListener(closeCallBack, map.popups[0])); 
                 OpenLayers.Event.observe(map.popups[0].closeDiv, "touchend", OpenLayers.Function.bindAsEventListener(closeCallBack, map.popups[0])); 
             } 
         } 
  
         function closeCallBack() { 
              //actions to perform 
             this.hide(); 
         } 
  
 If you have any more questions, please feel free to let us know. 
  
 Hope it helps 
  
 Summer

#9

Hi Summer, 
  
 That resolved the issue! Thank you very much for your input. 
  
 Treasa

#10

Hi Treasa, 
  
 You are always welcome, if you have any more question , please feel free to let us know. 
  
 Best Regards 
  
 Summer