ThinkGeo.com    |     Documentation    |     Premium Support

Issue with reverse Geocoding on marker popup

#1

Hello,



I have issue with marker popup as I have implement reverse geocoding on map right click event. but issue is like that when I search some location it will return location and show marker and popup to locate that location on map. Now I right click on map nearest to that marker but it did not fire map right click event. 



Issue is like that in cloud popup Thinkgeo use Cloud popup image to generate div for popup and also it set z-index of that div to max so that it comes over all other layer of the map. so that it did not allow me to fire right click event of map. So is there any way so that I can register or fire map right click event even if popup of marker is open.



I am attaching image to show exact issue.



Thank you.

Eric.

#2

Hello, 
  
 Does any one have idea about my issue for reverse geocoding nearest to marker popup. How can I assign event on Cloud popup as cloud popup is creating using image and create a div for that and add z-index to max so that it shows to above all other layers. 
  
 Thank you. 
 Eric. 
  


#3

Hi Eric, 
  
 I am afraid it is hard to do this. I will let our development team have another test and I don’t have too much confidence on this.  
  
 BTW, we are using Openlayers as the client map render engine in case you can have any insights on this. 
 Thanks, 
 Troy 


#4

Hello Troy, 
  
 Is there any other way to do reverse geocoding or any chance that we can achieve this or your developer can make some change for that. If than please let me know. 
  
 Thank you. 
 Eric.

#5

Hi Eric,



I try to use InMemoryMarkerOverlay as the marker overlay and then I can use the below codes to trigger the right click, would you please have a try?


<script type=<code style=“color: blue;”>“text/javascript”<code style=“color: #000000;”>>
    function OnMapCreating(map) {
        document.getElementById(‘map’).oncontextmenu = function (e) {
            e = e ? e : window.event;
            if (e.preventDefault) e.preventDefault(); // For non-IE browsers.
            else return false; // For IE browsers.
        };
 
        OpenLayers.Control.MyClick = OpenLayers.Class(OpenLayers.Control, {
            defaultHandlerOptions: {
                ‘single’: true,
                ‘double’: true,
                ‘pixelTolerance’: 0,
                ‘stopSingle’: false,
                ‘stopDouble’: false
            },
            handleRightClicks: true,
            initialize: function (options) {
                this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
                OpenLayers.Control.prototype.initialize.apply(this, arguments);
                this.handler = new OpenLayers.Handler.Click(this, this.eventMethods, this.handlerOptions);
            }
        });
    }
 
    function OnMapCreated(map) {
        var oClick = new OpenLayers.Control.MyClick({
            eventMethods: {
                ‘rightclick’: function (e) {
                    alert('rightclick at ’ + e.xy.x + ‘,’ + e.xy.y);
                },
                ‘click’: function(e) {
                alert(‘click at ‘+e.xy.x+’,’+e.xy.y);
                },
                ‘dblclick’: function(e) {
                alert(‘dblclick at ‘+e.xy.x+’,’+e.xy.y);
                },
                ‘dblrightclick’: function(e) {
                alert(‘dblrightclick at ‘+e.xy.x+’,’+e.xy.y);
                }
            }
        });
        map.addControl(oClick);
        oClick.activate();
    }
</script>

Please let us know if the issue persists.


Thanks,

Troy

#6



Hello Troy,



Thank you for your reply. I have already implement right click event by using that code.

But
my issue is different. Issue is like I have done reverse geocoding on
right click its working perfectly now when I do reverse geocoding it
return me one location and open Cloudpopup on the map till here its
prefect. Now when I right click near to CloudPopup which opens on
reverse geocoding than it does not trigger function for reverse
geocoding.



I have attached image for that.



When you open image you can see that I have marked some area with Black
border in image so now when I right click on that area than it does not
trigger map’s right click event which I have register. So is there any
way to achieve that.



Please check image and let me know.



Thank you.

Eric.








#7

Hi Eric,



Thanks for your image, it’s very clear for us. 

In order to go though the Clouldpopup div click events, a workaround is we can set pointerEvents to ‘none’ for the popup container. Please try the below codes:


function ConfiguratePopupClickEvent() {
        var popupDivs = document.getElementsByClassName(‘olPopup’);
        if (popupDivs) {
            for (var i = 0; i < popupDivs.length; i++) {
                popupDivs<i>.style.pointerEvents = ‘none’;
 
                for (var j = 0; j < popupDivs<i>.firstChild.childNodes.length; j++) {
                    var childElement = popupDivs<i>.firstChild.childNodes[j];
 
                    if (childElement.id.indexOf(‘FrameDecorationDiv_4’) < 0) {
                        childElement.style.pointerEvents = ‘auto’;
                    }
                }
            }
        }
}

From the above codes, we add more codes to avoid the mouse events will go though all the popup divs rather than the highlight div where you pointed out.



Please let us know if it works.

Thanks,

Troy

#8

Hello Troy,



Thank you for your reply. Yes the code is worked for me. But issue is like that its working on at right side of the Marker popup (as per image of black bordered portion) rest of the place it does nothing. And how can I achieve click event on that popup. Please let me know how can I go through all popup divs.?



Thank you.

Eric.

#9

Sorry Troy, 
  
 Its working only in IE10 and that also working without the function that you provided. And where I have to call this function actually I am calling this function at call back event when I add marker in SimpleMarkerOverlay at javascript. 
 And I got error like “Unable to set property ‘pointerEvents’ of undefined or null reference”. so did I miss placed the function. Let me know your review about this and let me know if you need code for this. 
  
 Thank you. 
 Eric.

#10

Hi Eric,



I figure out a better solution without any java script codes by using CSS, in this way, we can drop the complex java script provided before:



<style type=<code style=“color: blue;”>“text/css”<code style=“color: #000000;”>>
    .olPopup {
        pointer-events: none;
    }
 
    .olFramedCloudPopupContent {
        pointer-events: all;
    }
</style>

I tested it in Chrome and Firforx, IE. Chrome and FireForx works fine.

In IE browser, no matter this solution or the previous one, the event still can’t go though one corner with point-events and I believe this is related with IE events strategy. The wrong corner is like the below green rectangle.





 Please let me know if any questions.

Thanks,

Troy

#11

Hello Troy, 
  
 Thank you for your reply. Its working.  
 Thank you for your help. 
  
 Eric.

#12

You are welcome, Eric. 
  
 Any other questions, please feel free to let us know. 
 Thanks, 
 Troy