Search code examples
javascriptreactjsleafletinternet-explorer-11

leaflet.js IE11: Tile imgs are not visible but they are still in the DOM

I am working with leaflet to render construction plans for our software. The plans are jpg tiles.

It worked since about 9 months in the browsers IE11, firefox, chrome, safari. But since yesterday I cannot see the tiles in IE11 but it loads the tiles and the tiles are also in the DOM. I thought it is maybe a CSS issue, but I am not able to fix it.

Does someone know which issues this could be?

  • leaflet version: 1.2.0
  • leaflet.markercluster: 1.2.0

It is a react application with react 16

Map view in IE11

Map view in chrome

Solution

  • Thank you for your help.

    I checked the network connections and paste the tile links in a new tab, everything worked. Then I found out that there was a visibility: hidden css attribute active. I set it to visible but then there were just small icons with in a x in it, so that the image wasn't loaded.

    Next we analyzed what we have changed in the last time and we found out that we changed the URL of the tiles because of security issues.

    And then we compared the old and the new image responses and found out that there was no Content Type set in the response.

    So this was the issue.

    Leaflettiles in IE11 need the right content-type in the response of the image (in our example it is image/jpeg)