HERE map is blank in outsystems

Question

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:

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.

Can you try with `requestAnimationFrame( () => map.getViewPort().resize() );` at the end ? — Michel, Oct 05 '18 at 19:33
Thanks a lot Michael! After adding your sugestion everything seems working fine — Jonathan Danilo, Oct 08 '18 at 16:05
Glad I could help! I added it as an answer, so it can be more visible in case someone looks for the same issue — Michel, Oct 08 '18 at 16:24
One thing I noticed, this solution doesn't work in a map that is stactic (not having behaviior/ui), on a interactive map, it works , but outsystems seems to break the css and the meta used on HERE , so it's kinda strange (the + and - buttons are huge on the background of the map, and zooming out cause it to appear and will not be influenciated by it's css — Jonathan Danilo, Oct 08 '18 at 17:39
Hard to tell without being able to reproduce, but regarding the huge buttons, it sounds like the stylesheet `mapsjs-ui.css` has not been loaded. — Michel, Oct 08 '18 at 20:54
yeah , I played with it a bit and it was causing the to go blank or stay on those huge buttons, as it said on the css the position coud be relative I change it to relative and the buttons are ok now, but the map is only 119px and it doesn't matter the size of the div it's inside, I will continue to work around it if I find anything I will come back and add to this topic — Jonathan Danilo, Oct 08 '18 at 21:17
Regarding the map size, you may want to investigate how is created the map container. It could be that it didn't reach its final size when the map itself is created. Theoretically, if you trigger a map resize (`map.getViewPort().resize()`) when the container has the size you need, the map should occupy the whole container space — Michel, Oct 09 '18 at 22:28
I was using v3.1 and facing the same issue. I was loading the HTML in Webview in Android since I had to include custom URL markers, and it shows the markers but the map is just white background and it's a static map that doesn't include any behavior or UI. Any idea why this is happening? Any workaround or solution to make the map visible? The below-recommended solution didn't work as mentioned above since I'm using the static map. — Melwin, Feb 23 '21 at 06:34

score 1 · Accepted Answer · answered Oct 08 '18 at 16:22

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() );

HERE map is blank in outsystems

1 Answers1