Search code examples
here-apiheremapsoutsystems

HERE map is blank in outsystems

I am trying to implement a Web Application using HERE Maps on the tool OutSystems.

On The application I have a web block that contains a Container (where the map will be drawn), an expression (with Escape Content as 'no', and the scripts below as value so it may be inserted on the html of the page) and a button that try to run the same script again (just for test measures and see if it was a problem of the script executing before the div was ready).

<script src="http://js.api.here.com/v3/3.0/mapsjs-core.js"type="text/javascript" charset="utf-8"></script>
<script src="http://js.api.here.com/v3/3.0/mapsjs-service.js"
  type="text/javascript" charset="utf-8"></script>
<script type ="text/javascript">
    // Initialize the platform object:
    var platform = new H.service.Platform({
        'app_id': '{APP_KEY}',
        'app_code': '{APP_CODE}'
    });

    // Obtain the default map types from the platform object
    var maptypes = platform.createDefaultLayers();

    // Instantiate (and display) a map object:
    var map = new H.Map(
        document.getElementById('" + MapContainer.Id + "'),
        maptypes.normal.map,
    );

    map.setBaseLayer(maptypes.satellite.traffic);
</script>

(MapContainer.Id returns the id of the container as in the HTML, since the tool automatically creates the id of the elements)

On the following image:

image

you can see the structure I am using on the web block:

The problem is: this code I am using isn't working on the OutSystems, leaving a blank screen webpage:

blank screen webpage

But the same code on a HTML file works fine. No errors are listed on the browser console and upon inspecting the code with development tools (Chrome) I noticed that the canvas was being created but has height = 0 (editing this value changes nothing).

If someone knows a way to work around these problems I would love to hear about. Thanks for your attention.

Solution

  • It seems like the styles of the map container have not been computed and rendered, when the map is instantiated. Therefore, the map is there but has a height of zero pixels. This is probably related to how the view is created by Outsystems.

    Requesting the browser to resize the map at the next animation frame should help:

    requestAnimationFrame( () => map.getViewPort().resize() );