Internet Explorer 9 + Leaflet

[filipp]

Hi all.
Recently we had an issue with Internet Explorer 9 + webclient Leaflet and I would like to share a solution how we solved it.

We have a feature that displays a calculated route on the map which uses a Leaflet add-on that accesses PTV xMap.
There is a constant issue that we are experiencing with Internet Explorer 9, which is one of the browsers that our software should support.
When displaying a route on the map, map is not fully loaded. This means that there are some parts of the map which are visible and some are displayed as grey areas. Please see the screenshot.

When taking a look at the Network tab in the browser developer tools, some requests where failing (Aborted).

The problem had to do with IE timing out the request even though data was being transmitted.
It is a known issue( http://cypressnorth.com/programming/int ... sts-fixed/ ) and there is a solution and a workaround.
Sending a code snippet how we solved it in xmap-client.js. Modifications are on the lines 11,12 and 31,32,33.

Code: Select all

function sendXDomainRequest(path, request, callbackHandler, timeout) {
        if (typeof callbackHandler !== "function") {
            throw new Error("This browser does not support CORS with synchroneous requests.");
        }
        if (activeRequestCount >= activeRequestLimit) {
            requestQueue.push({ path: path, request: request, callbackHandler: callbackHandler, timeout: timeout });
            return null;
        }
        var xhr = new window.XDomainRequest();
        xhr.open("POST", requestURL + path);
        xhr.onprogress = function(){ };
        xhr.ontimeout = function () { };
        xhr.onload = function() {
            var responseObject = xhr.responseText && JSON.parse(xhr.responseText);
            callbackHandler(responseObject, null, xhr);
            responseArrived();
        };
        xhr.onerror = function() {
            var responseObject = xhr.responseText && JSON.parse(xhr.responseText);
            callbackHandler(null, responseObject, xhr);
            responseArrived();
        };
        if (timeout) {
            xhr.timeout = timeout;
            xhr.ontimeout = function() {
                callbackHandler(null, null, xhr);
                responseArrived();
            };
        }

        setTimeout(function(){
            xhr.send(JSON.stringify(request));
        }, 0);

        activeRequestCount++;
        return xhr;
 }

Best regards,
Filipp

[Joost]

Hello Filipp,

I just made a customer happy with your post. Thnx for sharing your experiences.

Joost