ThinkGeo.com    |     Documentation    |     Premium Support

How to show CustomPopup when Marker is clicked?

#1

Hello,



I am using Web Edition.  My code creates a SimpleMarkerOverlay, creates several Markers, each with a CustomPopup to show some html content.  This is working correctly when the user hovers the mouse over the marker.  However, for users on touch screen devices, they can not hover.  How can I also show the popup when the marker is clicked via mouse or touchscreen? 



Thanks,

Randy Brown

#2

Hi Randy, 
  
 Please try below code and see if it works.  
  
 Client side.  
  <script type=“text/javascript”>

        var OnMapCreated = function (map) {

            var parser = Map1.GetMapParser();
            var markerOverlay = parser.map.getLayer(‘MarkerOverlay’);
            for (var i = 0; i < markerOverlay.markers.length; i++) {
                var marker = markerOverlay.markers[i];
                marker.events.register(‘click’, marker, function (evt) {
                    clearInterval(this.showTimer);
                    //We need to save the popupDelay temporarily cause we need to show popup immedility.
                    var tempDelay = this.popupDelay;
                    this.popupDelay = 0;
                    this.showPopup();
                    //Set the popupDelay value back.
                    this.popupDelay = tempDelay;
                });
            }
        }
</script>
 
  
 BTW, we need set the marker close button enable on the server side, please see the following line 
 addingMarker.Popup.HasCloseButton = true;  
  
 Hope it helps and any question please feel free to let us know. 
  
 Thanks, 


#3

I tried this with some success but it still doesn’t work quite right in my tests.  The click event did not work for touch, so I tried changing it to touchstart and touchend.  That basically works for showing the popup, but I could not consistently get the popup to close.  For one, the close button is way to small and hard to hit with a finger.  Secondly, when I hit the close button it seems very random as to whether it closes.  Sometimes it seems to close and immediately re-open (to the user it basically just flickers but remains open).  I’m not sure if the touch sensitivity is causing the marker event to fire again because of the proximity to the marker, or perhaps the timer logic is getting out of sync… 
  
 Which event should I be using to handle touch screen input to show the popup?  touchstart, touchend, or something else? 
  
 Is there any way to adjust the size/location of the close button to make it more touch-friendly?  Or any other options, such as using my own button to close the popup? (how would I do that from a button click?) 
  
 Thanks! 


#4

Hi Randy,



Here is the code that you can try overwrite the code of the “close DIV”:


<script language=<code style=“color: blue;”>“javascript” <code style=“color: #000000;”>type=<code style=“color: blue;”>“text/javascript”<code style=“color: #000000;”>>
    var OnMapCreating = function (map) {
        OpenLayers.Popup.prototype.addCloseBox = function (callback) {
            this.closeDiv = OpenLayers.Util.createDiv(this.id + “_close”, null, { w: 17, h: 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);
            };
            OpenLayers.Event.observe(this.closeDiv, “touchend”, OpenLayers.Function.bindAsEventListener(closePopup, this));
            OpenLayers.Event.observe(this.closeDiv, “click”, OpenLayers.Function.bindAsEventListener(closePopup, this));
        }
    }
</script>

Just as you can see that the “touchend” is used here to close the popup. I guess you can change the code as following to change the size of popup:



this.closeDiv = OpenLayers.Util.createDiv(this.id + “_close”, null, { w: 17, h: 17 });



Thanks,

Johnny

#5

Thanks for the code samples.  I still had trouble with the close logic.  So to simplify I set the PopupDelay=0 in the serverside code, and removed the javascript code which was dealing with popup delays, and that seems to have fixed the flickering problem.



I would suggest adding native support within the map suite to wire up the ‘touchend’ event so touchscreen users can get popups by clicking (or some other guesture).

#6

Hi Randy,  
  
 It’s glad to hear that it works for you now, just as you mentioned, it should be an important improvement,I have entered it into our internal issue tracking system. We will try making a fix in next release. 
  
 Thanks, 
 Johnny