Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

IndexSizeError on IE11 when rendering SVG icons as map points

See original GitHub issue

Describe the bug Trying to render icons as points on the map based on an SVG URI (base64 encoded). Works fine on Chrome, Safari, Firefox but not IE11. An IndexSizeError is thrown:

after digging into this a bit more it looks like x and/or y params are negative values in the points generated, and IE11 seems to be the only browser that has an issue with this

I’ve looked through all the other issues related to this and have tried suggested fixes, however these have not worked. Hopefully I am missing something but happy to contribute towards a bug fix if required

To Reproduce Minimal Repo to reproduce https://github.com/ben-cloud9/openlayers-ie-11

clone this repo
install dependancies npm install
run npm start and go to localhost:1234 in IE11
an IndexSizeError will be thrown on map render
no issues opening in any other browser

Expected behavior Icons to render on map points as in other browsers

Thanks in advanced and let me know if you need any further info 😃

Issue Analytics

State:
Created 4 years ago
Comments:19 (6 by maintainers)

Top GitHub Comments

1reaction

icholycommented, Jun 20, 2019

@ben-cloud9 you need to set the imgSize: [width, height] property for ol.style.Icon. This fixed SVG icons for me in IE11.

0reactions

stale[bot]commented, Feb 28, 2020

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Top Results From Across the Web

Custom SVG markers won't display in IE 11 - Stack Overflow

I'm trying to display some bus routes using Google Data Layer, and then add some custom icon markers. Works great in Chrome and...

Passing SVG to google.maps.Icon for markerImage in IE11 ...

When the marker is added to the map an IndexSizeError is generated when the marker is drawn on the map. In the compiled...

SVG Icon not rendering in IE11 from Lightning component in ...

I am looking at both MS Edge, Chrome, and IE11. The issue is only apparent in IE11. This app was built with lightning...

HTML Standard

... 13 The HTML syntax; 14 The XML syntax; 15 Rendering; 16 Obsolete features ... because no such term is used for the...

Markers with SVG and Font | Maps JavaScript API

import { faBus } from "@fortawesome/free-solid-svg-icons"; function initMap(): void { const center = { lat: 36.6163, lng: -100.605 }; const map = new ......