mapbox-gl-draw: IE 11 is not parsing valid GEOJSON when loading

draw v19 mapboxgl v38

This only happens in IE 11, but on Windows 8 and Windows 10 alike.

Test case:

Use the following geojson

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-82.6123, 39.6891],
                    [-82.6174, 39.6597],
                    [-82.5669, 39.6584],
                    [-82.5551, 39.6794],
                    [-82.5779, 39.6765],
                    [-82.6123, 39.6891]
                ]
            ]
        },
        "properties": {
            "id": "1497701069ffef972907dfea7b2f6aaf",
            "color": "#444444",
            "lineWidth": 2,
            "type": "boundary"
        }
    }]
}

It will throw the following error in IE 11:

This site in Chrome, FIrefox and Edge it works fine.

The reason for reporting this is that when loading a saved map that had used the polygon draw tool, this same thing happens, although I can verify that the GEOJSON is valid and correct that is being loaded into the drawing tool. It only fails in IE 11, but works perfect in Chrome and Firefox.

Have you seen this before?

I have tried various suggestions such as adding header declarations to force IE Edge rendering despite the DOCTYPE with no avail.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 18 (7 by maintainers)

Most upvoted comments

I think I’ve found a solution and cause for this. When calling add() mapbox-gl-draw uses mapbox geojsonhint to validate GeoJSON. When validating the feature properties geojsonhint uses constructor.name property to check whether or not it’s “Object” link

By “forcing” the feature properties constructor name to be “Object” I was able to pass GeoJSON features to draw. drawnShapeData.features[0].properties.constructor.name = "Object" draw.add(drawnShapeData);

Maybe geojsonhint could use some other way to validate feature’s properties in order to avoid this error since constructor.name property is non-standard and clearly causing issues.

juhanivl on Oct 13, 2017

I have created a PR to fix this issue. https://github.com/mapbox/geojsonhint/pull/70

stutrek on Apr 12, 2018

OK. I’ve confirmed that this is coming from this line but I’m not sure why geojsonhint has this error as part of Draw but not as part of its own website.

Also, stepping though the debugger, I can confirm that the the geojson has these properties.

Next steps here are to work with the geojsonhint project to figure out why this bug is happening and than update Draw when geojsonhint releases a fix.

mcwhittemore on Jul 20, 2017

Sadly I don’t currently have access to an IE browser so I can’t be much help here.

One thing I’ve seen before is the use of polyfills creating problems by changing how Object works.

mcwhittemore on Jul 10, 2017