HERE Maps API for JavaScript won't work with IE11

user_13990541 0
Viewed 342

I am trying to figure out why HERE Maps API for JavaScript is being rendered on Google Chrome but not on IE11. I am using the example at: https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/get-started.html.

Looking at previous threads about this, I tried to add the legacy api's

<script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js "
        type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"
        type="text/javascript" charset="utf-8"></script>

and also this as a map option:

engineType: H.map.render.RenderEngine.EngineType.P2D

but with no luck (the later caused Google Chrome also not to display map). I tried also to downgrade IE security setting but it did not change anything.

Any ideas...?

here-api internet-explorer-11 javascript
1 Answers

Here is simple page which works fine in my IE11:

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-core-legacy.js"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-service-legacy.js"></script>
  <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
  <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <style>
      html, body { margin: 0; padding: 0; height: 100%;}
      #mapContainer {height:100%;}
    </style>
  </head>
  <body>

    <div id="mapContainer"></div>

    <script>
      var apikey = 'YOUR_API_KEY',
          platform = new H.service.Platform({
            apikey: apikey
          }),
          pixelRatio = window.devicePixelRatio || 1,
      ppi,
          defaultLayers,
          mapElement = document.getElementById('mapContainer'),
          tileSize,
          map,
      behavior,
      ui;

      if (pixelRatio > 1) {
        ppi = 250;
      }

      defaultLayers = platform.createDefaultLayers({
        ppi: ppi
      });

      map = new H.Map(mapElement, defaultLayers.raster.normal.map, {
        zoom: 8,
        center: {lat: 53, lng: 13},
        renderBaseBackground: {lower: 2, higher: 2},
        pixelRatio : pixelRatio,
        engineType: H.map.render.RenderEngine.EngineType.P2D
      });

      window.addEventListener('resize', function() {
        map.getViewPort().resize();
      });

      behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
      ui = H.ui.UI.createDefault(map, defaultLayers);
    </script>
  </body>
</html>
user_29322330
Related