Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm actually having a big issue that I cannot solve so far. Here is my problem. I actually have a map on which I'm displaying markers (WMSGetFeatureInfo) depending on some categories that I want to show or hide.

But here is the thing, I actually get those markers as a *.map file which is actually a PNG file containing all the markers.

When I'm clicking on a marker, I'm getting the position of the click and then add a popup. But the more layers I have display on the map, the more the popup is pointing far away from the related marker.

Here some code :

    var layer = new OpenLayers.Layer.WMS(
        category.label,
        "/mapserv?Map=" + category.url,
        {
            layers  : category.layer,
            format  : 'image/png',
            version : '1.3.0',
            srs     : 'ESPG:3163'
        },
        {
            isBaseLayer : false,
            singleTile  : true,
            visibility  : visibility,
        }
    );

    var info = new OpenLayers.Control.WMSGetFeatureInfo({
        title          : 'get details by clicking',
        layers         : [ layer ],
        infoFormat     : "text/plain",
        queryVisible   : true,
        eventListeners : {
            getfeatureinfo : function( event ){
                document.body.style.cursor = 'auto';

                var getId = function( text ) {
                    result = context.settings.pattern.exec( text );
                    if( result == null ) return;
                    return result[1];
                }

                var id = getId( event.text );

                request = jQuery.ajax({
                    url     : "/cartoweb/FicheTheme",
                    type    : "get",
                    data    : "idGeoEad="+id,
                    success : function(response, textStatus, jqXHR){
                        if (response == null || response['data'] == null) {
                            return;
                        }
                        context.generateAndShowPopup( event.xy, response['data']['metaData'] );
                    }
                });
            },
            beforegetfeatureinfo : function( event ){
                document.body.style.cursor = 'wait';
            },
            nogetfeatureinfo : function( event ){
                document.body.style.cursor = 'auto';
            }
        }
    });

    this.map.addControl( info );
    info.activate();


generateAndShowPopup : function( latlong, text ) {
    var lonlatfrompx = this.map.getLonLatFromViewPortPx( latlong );
    var anchor       = {
        'size'      : new OpenLayers.Size(0,0), 
        'offset'    : new OpenLayers.Pixel(-36, 6), 
        'keepInMap' : true
    };

    // Hide by default popup actually open
    if(this.popup !== undefined) {
        this.popup.hide();
    }

    // Create a new popup
    this.popup = new OpenLayers.Popup.Anchored(
        "chicken",
        lonlatfrompx,
        new OpenLayers.Size( 2000, 2000 ),
        '<div class="popupTail"></div><div class="popupContent">' + text + '</div>',
        anchor,
        false, 
        function(){}
    );

    // Popup settings
    this.popup.setBackgroundColor( 'transparent' );
    this.popup.panMapIfOutOfView         = true;
    this.popup.calculateRelativePosition = function () { return 'tr'; }

    // Add it on the map
    this.map.addPopup( this.popup );

    var that = this;
    setTimeout(function(){
        that.popup.updateSize();
    }, 50);

    this.map.setCenter( lonlatfrompx );
}

Not sure if I'm doing something wrong, but if someone already faced the same issue, that will be really helpful to know where I did something wrong.

Thanks a lot

EDIT
Ok so I've tried to reproject the latlong on the layer but it still not working. However, I'm making progress :

// Layer is the layer associated to each WMSGetFeatureInfo
// this.layer is the base layer used to display the map
lonlatfrompx.transform( layer.projection, this.layer.projection );
this.map.setCenter( lonlatfrompx );

EDIT 1
Ok so I'm making progress. I think I know where the problem comes from but I still don't see/know how I'm gonna solve it (yet).

When intanciating the info variable, I'm making an ajax call inside which will show a popup when click. The thing is that the more I add layer, the more this ajax request is trying to get information.

Let's say, I show on the map 5 differents layers (IT, design, startup, computer and desktop). Then when I'm clicking on a markers (WMSGetFeatureInfo), it actually try to make an ajax request * [number of layers visible] and then change at some point (sometimes), the position value.

In order to solve this, I will need to avoid this ajax request to be executed more than one time. Any ideas?

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.