Why does my OpenLayers 3 map not show in Internet Explorer 11?

M

3

12

I am trying to serve up a map in Internet Explorer that works fine in Firefox or Chrome. While debugging I noticed that something was missing when I tried to bring up the map in IE. This is the html that is in Firefox with the working map: enter image description here

This is the html that is missing essential elements for the map:

enter image description here

This occurs after I draw a bounding box and submit a search, the search is supposed to find and results that are in the bounding box. Then draw the whole area that each result covers. When the results are supposed to be displayed is when the map does not appear in Internet Explorer 11. A blank map-panel is still displayed but it is missing the map tiles. When you "zoom in" to the map I get this error: Unable to get property 'style' of undefined or null reference.

Can anyone help me figure out why IE leaves these elements out?

Marikomaril answered 29/4, 2015 at 20:52 Comment(9)

Does the map of this simple example display correctly in your IE 11? – Simonetta 30/4, 2015 at 7:22

yes it does, actually the above problem occurs the second time I open the map. – Marikomaril 30/4, 2015 at 12:44

I was playing around in IE and I got this error: Unable to get property 'style' of undefined or null reference – Marikomaril 4/5, 2015 at 15:30

I am trying to understand: When you open your page, the map is shown? Then you select the bbox, do the search and then what? You create a new map? The old map disappears? Maybe a JSFiddle showing your problem would help. – Simonetta 7/5, 2015 at 6:54

After the search the old map disappears. Then if you click on the map icon again the map container shows up but does not load the map or anything on the inside of it. You made me start thinking...should a completely new map be initialized every time it is brought up? – Marikomaril 7/5, 2015 at 12:32

What it does now is initialize once then when ever I need it a map.render(); is called. – Marikomaril 7/5, 2015 at 13:7

You hide the element that contains the map and then show it again? Try to call map.updateSize() after it is shown again. – Simonetta 7/5, 2015 at 13:36

Thanks for the support! map.updateSize() does not seem to have an effect. I was able to get the map to show back up again if I initialize a new map everytime it is opened but now the search results are not in the right place. If it helps it seems that it is directly south of where it should be. – Marikomaril 7/5, 2015 at 18:15

As @Simonetta suggested, you could put a quick end to this by posting a JSFiddle that demonstrates the problem. Here's a simple JSFiddle example to get you started. – Logistic 8/5, 2015 at 12:11

M

1

After much trial and error (and hours on google) I managed to figure out that IE seems to forget how to render your map if you remove it from the page then try to draw vectors/extents on it and bring it back. The solution that ended up working was that I had to reinitialize the map every time I wanted it displayed.

Marikomaril answered 13/5, 2015 at 19:46 Comment(1)

Can anyone shine a little more light into this issue. I seem to be having the exact same problem noted in this post. I have: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> The map renders correctly the first time, but if I remove the map and try to re-render, the viewport is empty. There's no <canvas> in my <div>. This only happens on IE11. I would prefer not to have to re-initialize the map every time I want to show it. – Lyre 26/2, 2018 at 19:55

H

1

After loading Openlayers use this code

var _class = OpenLayers.Format.XML;

var originalWriteFunction = _class.prototype.write;

var patchedWriteFunction = function()
{
   var child = originalWriteFunction.apply( this, arguments );

   // NOTE: Remove the rogue namespaces as one block of text.
   //       The second fragment "NS1:" is too small on its own and could cause valid text (in, say, ogc:Literal elements) to be erroneously removed.
   child = child.replace(new RegExp('xmlns:NS\\d+="" NS\\d+:', 'g'), '');

   return child;
}

_class.prototype.write = patchedWriteFunction;

Harve answered 12/5, 2015 at 12:12 Comment(0)

M

1

After much trial and error (and hours on google) I managed to figure out that IE seems to forget how to render your map if you remove it from the page then try to draw vectors/extents on it and bring it back. The solution that ended up working was that I had to reinitialize the map every time I wanted it displayed.

Marikomaril answered 13/5, 2015 at 19:46 Comment(1)

Can anyone shine a little more light into this issue. I seem to be having the exact same problem noted in this post. I have: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> The map renders correctly the first time, but if I remove the map and try to re-render, the viewport is empty. There's no <canvas> in my <div>. This only happens on IE11. I would prefer not to have to re-initialize the map every time I want to show it. – Lyre 26/2, 2018 at 19:55

B

0

Looks like you're not using HTML5 mode for your web page in IE11, and hence get no Canvas support.

Make sure that your doctype (i.e. the first line of your HTML file) is

<!DOCTYPE html>

Also make sure you don't use any meta tags that tell IE11 to use a compatibility mode.

Beowulf answered 30/4, 2015 at 14:30 Comment(4)

Thanks for responding! I do have the <!DOCTYPE html> tag in there. I have a meta tag that is <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">. – Marikomaril 4/5, 2015 at 13:25

I have tried with and without the meta tag and I still have the same issue – Marikomaril 4/5, 2015 at 13:29

Also make sure your server does not set any X-UA-Compatible response headers. – Beowulf 5/5, 2015 at 13:41

how would I check on the response headers, and please review the question I may have added info that can help you, help me lol – Marikomaril 6/5, 2015 at 12:45

Recommended topics

Hot tags