[HERE-API] showing a blank map in outsystems but working on a HTML file

[HERE-API] showing a blank map in outsystems but working on a HTML file

  

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 automaticaly create the id of the elements)

On the 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 . 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 know a way to work around these problems I would love to hear about. Thanks for the atention.


Not sure if it will work, but I atached the oml aswell.

Hi Jhonathan. I'm working on a component for the Here Maps API right now. In a couple hours I'll be publishing the component and you can test it, ok?

João Melo wrote:

Hi Jhonathan. I'm working on a component for the Here Maps API right now. In a couple hours I'll be publishing the component and you can test it, ok?


Hi João, sorry for the late response, I tested your component and I am having the following error on console : 

Failed to load resource: the server responded with a status of 404 (Not Found)  mapsjs-ui.js:1
Failed to load resource: the server responded with a status of 404 (Not Found) mapsjs-mapevents.js:1

Uncaught ReferenceError: H is not defined  Home.aspx?_ts=636745996863020022:139
    at Home.aspx?_ts=636745996863020022:139
    at HTMLDocument.<anonymous> (_osjs.js?10_0_816_0:32)
    at l (_osjs.js?10_0_816_0:18)
    at Object.fireWith [as resolveWith] (_osjs.js?10_0_816_0:18)
    at Function.ready (_osjs.js?10_0_816_0:18)
    at HTMLDocument.mb (_osjs.js?10_0_816_0:18)


(this being on your test link at forge aswell as on my module with my credentials , both on chrome and edge)

Hi Jonathan, sorry about that.

The component is now fixed and the version 1.1.0 is available.

Thank you for letting me know, and enjoy it!

Hey João, thanks for the reply, I tested the links on your webpage and there is working 100%. But I have tried the component on my personal space and the map is blank with no errors in the console. ( I just drag and drop the map and the libs from utils on a webscreen and changed the site properties to my credentials)


Do you have any idea of what could be happening ?

Can you share your espace?

Here is the oml I am testing the API.


https://jonathan-souza.outsystemscloud.com/HereWeGOTest/Home.aspx?_ts=636748591049502571 the link to the webscreen if it can be usefull

Hi Jonathan, have you registered your App on Here Map's website?

After you generate your App ID and App Code, you need to set them on HereMapsJavascripAPI module's Site Properties.

Yes, I am registered and using my id and code on the Espace. I tried on making my own module  and it's working there.


the keys are working both on this module and on the html tests I did

I'm so sorry for the delay, Jonathan.

So, if I got it right, it's working now, isn't it?

Ps.: I can not access the link you put, it needs authentication.

Kinda.

I mean ,I wasn't able to make your module work unfortunately (even with the app-id and code), but I made my own module using those same keys and was able to make it work so my problem is kinda solved.


The only thing I did was to set the keys on the Module Management and set it on the site properties and drag and drop the map and the load api web block to the screen. The map still blank and no errors are returned on the console of chrome.

The oml is basicaly the one that I sent before

Solution

It is really weird to hear, Jonathan. I just installed the module an another PE, and it worked just fine.

Well, good you've solved it on your end.

I just created a new component, which is actually the demo app, if you'd rather to continue from here:

https://www.outsystems.com/forge/component/4590/here-maps-sample-app/?Unfollow=False

Solution

Jonathan, I just got it working. The issue was on a CSS rule, that was defined only in the Sample App.

I'll fix it in the component and publish a new version.

Thanks for your help.

Hey João, I just tested the new component and it's working 100%. 


Thanks for it working as fast as possible on the fixes, and thanks for developing it aswell.