Mapbox GL JS Access Denied In IE 11

Mapbox gives you the ability to load custom icons for different points in your maps. When I tried to load a custom icon to a Mapbox map I got the error “SCRIPT5: Access is denied.” in IE 11 – Firefox and Chrome loaded the icon fine.  My code was loading an imported image as an object inside a React component like this:

import centerImage from "./images/centerImage.png";

map.on('load', () => {
    map.loadImage(centerImage, (error, image) => {
        if (error) {
            return;
        }
        map.addImage('centerIcon', image);
    });
    ...
});

Updating the image URL parameter to a string URL fixed the problem. I didn’t dig too much into the issue to figure out why this was happening, but passing a valid image string URL was enough to get passed this issue.

map.on('load', () => {
    map.loadImage('/hospital.png', (error, image) => {
        if (error) {
            return;
        }
        map.addImage('centerIcon', image);
    });
    ...
});

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>