2

I seem to have a problem with loading a geojson-file as source for a layer in IE11 using openlayers 3.5.0. IE11 throws an error without any description. The problem seems to occur when the geojson is set as a vector-source for an imagevector layer.

Both Chrome and Firefox do not have this problem and renders my map as desired.

A little piece of my code:

var groupedData = groupByData(data, level, json.visualConfig.measure);
var minValue = getMinValue(groupedData, 'total');
var maxValue = getMaxValue(groupedData, 'total');
var scaleStepSize = 0;
var scaleSize = json.visualConfig.scaleSize;
var newColors = [];
if(maxValue < scaleSize) {
    scaleSize = maxValue;
    for (var i = colors.length - scaleSize; i < colors.length; i++) {
        newColors.push(colors[i]);
    }
} else {
    newColors = colors;
}
var scaleStepSize = Math.ceil((maxValue - minValue) / scaleSize);

// Reset Extent
featuresExtent = ol.extent.createEmpty();

// Layer
var layer = new ol.layer.Image({
    source: new ol.source.ImageVector({
        source: new ol.source.Vector({
            url: file,
            format: new ol.format.GeoJSON({defaultDataProjection :'EPSG:4326', projection: 'EPSG:3857'})
        }),
        style: (function () {
                return function (feature, resolution) {
                    formatScale(minValue, scaleStepSize, newColors, json.visualConfig.measure + ' per ' + name);
                    var color = '#ffffff';
                    groupedData.forEach(function(vData){ 
                            if(vData.dimensionValue == feature.get(reference) && vData.dimensionValue != null) {
                                    for(var i = 0; i < newColors.length; i++) {
                                        var startValue = minValue + (i * scaleStepSize);
                                        var endValue = minValue + ((i + 1) * scaleStepSize);
                                        if(vData.total >= startValue && vData.total <= endValue) { 
                                            color = newColors[i];
                                        }
                                    }
                                    feature.set('measure', measure);
                                    feature.set('measureValue', vData.total);
                                    ol.extent.extend(featuresExtent, feature.getGeometry().getExtent());
                            }
                    });
                    var newStyle = [new ol.style.Style({
                        fill : new ol.style.Fill({
                            color : color
                        }),
                        stroke : new ol.style.Stroke({
                            color : '#C3C3C3',
                            width : 1
                        })
                    })];
                    return newStyle;
                }
            })()
    }),
    minResolution: minZoom,
    maxResolution: ((layers.length == 1) ? 20000 : maxZoom), // eerste laag mag altijd naar maxResolutie = 20000
    opacity: 0.8,
    level: level,
    reference: reference,
    name: name
});
  • Sometimes IE throws errors when there's a comma at the last object's position; Post your entire object code. – Jonatas Walker Jun 1 '15 at 14:31
  • force the Legacy mode (compatibility mode) in IE11 msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx – Mapperz Jun 1 '15 at 15:31
  • Legacy mode did not do the trick. I have updated my question with some more code. Btw IE I have loaded the ol.debug.js file and IE throws the following error: "File: ol-debug.js, Line: 65460, Column: 7". When I load ol.js it throws "Invalid character. File ol.js, line 493, column 286'. – Vircos Jun 2 '15 at 6:45
  • Looks like IE11 has issues with the JSON object. When I modify the ol-debug.js script at the position as descrebid in my comment above a litte so it does not throw an error but it does log to console with output. I get an invalid json string with part of my json object. – Vircos Jun 3 '15 at 9:44
  • *************** – Vircos Jun 4 '15 at 14:26
1

Found the problem. Somehow IE has problems with GeoJSON file containing characters like à or â etc.... Replacing those characters in the GeoJSON with normal characters (like a) does the trick.

Chrome and FF seems to have no issues at all with these kind of characters.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.