Css Map Rendering Help Please

Css Map Rendering Help Please

  

Community:

I could really use some help with getting a map to render properly

Please see pertinent information below

Lisbon Theme oml file attached (not working)

Personal environment will only allow one attached file

(can share working Web App Theme oml if needed for comparison)


Enviroment Information:

Personal Enviroment (Cloud)

Studio Version: 10.0.702.0


Application Requirements:

MapApi: HereMaps (mandatory)

Responsive Web (mandatory)

Outsystems Template: Lisbon (highly desired)

Large responsive web app has already been developed with Lisbon Theme

Adding the map pages to the application is now mandatory

Re-building the existing app with another template would be a major challenge


Problem:

Map canvas IS NOT rendering properly using "Lisbon" Responsive Website Template

(oml attached)

Map canvas renders properly using Basic "Web App" Responsive Website Template

(can provide working oml)


Research:

Have spent many days researching Outsystems Forums, StackOverflow, Google, Etc

        example: https://stackoverflow.com/questions/37380816/unable-to-render-here-map-if-container-uses-percentage-in-width-height/37398806#37398806

Replicated from (Forge) Google_Maps class and inline style css with no success

Have dug as deep as I can into difference in the css heirachy between Lisbon and WebApp

Have tried as many combinations of class and inline style overides as I can think of on the map container <div>

HereMaps support is not able to help, as the outsystems platform is unfamiliar to them



Using Basic "Web App" template

Left "Base Theme" LondonFixed

No changes to any defaults


<div id="RichWidgets_wt13_block_wtMainContent" class="MainContent">

 <div id="RichWidgets_wt13_block_wtMainContent_wtmapContainer" style="height: 500px; background: gray">

      "Note: HereApi builds map from here down"

  <div style="position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;">

   <div style="z-index: 0; width: 100%; height: 100%; position: absolute; touch-action: none;">

    <div style="position: absolute; height: 100%; width: 100%; z-index: 0;">

       "Note: canvas renders properly"

     <canvas width="940" height="500" style="position: absolute; left: 0px; top: 0px; width: 940px; height: 500px; z-index: 0;"></canvas>



Using "Lisbon" template

Left "Base Theme" LisbonTheme

No changes to any defaults


<div id="LisbonTheme_wt16_block_wtMainContent" class="MainContent">

 <div id="LisbonTheme_wt16_block_wtMainContent_wtmapContainer" style="height: 500px; background: gray">

      "Note: HereApi builds map from here down"

  <div style="position: relative; width: 100%; height: 100%; overflow: hidden; -webkit-tap-highlight-color: transparent;">

   <div style="z-index: 0; width: 100%; height: 100%; position: absolute; touch-action: none;">

    <div style="position: absolute; height: 100%; width: 100%; z-index: 0;">

       "Note: HERE IS THE PROBLEM, canvas is not rendering properly"

     <canvas width="0" height="1" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 0px; z-index: 0;"></canvas>

Hi Jeff,

At first sight I see that the canvas, when giving error, has attributes like width=0 and height=1...

Is this the problem ? The dimension of the canvas?

Did you see if theses properties were being overridden by some css class?

Solution

Hello Jeff. Thanks for providing a working example, that helped a lot to diagnose the problem. However, I will advise you to change your API secrets now that you've exposed them on a public forum.


Back to your problem. Silk layouts start loading the page with everything hidden by default. The layout web block renders a top-level <div> with classes Page and startHidden. This is somehow affecting the HereMaps javascript, which (my guess) is thinking that the map is hidden, and shouldn't be rendered.


The startHidden class is removed as soon as the document finishes loading. If you do your map initialization on that moment, then the HereMaps javascript won't be confused anymore and will render properly. So, add your initialization code after the ready event of the document. The easiest way to do this is to wrap your javascript code around a jQuery callback:

$(function($) {
    // your code here
};
Solution

Joao...

Thank you for the quick response.

From the research i've done (best that I can understand)...

The canvas is built by the map api...I have no control over that...

From what I have found in research is that when the api is building the map

if the DOM has not built the div already, then the map doesn't get rendered because it

doesn't know the size of the div it is going into.

When I use the basic Web App responsive template with all of the default css that comes

with it, the map builds fine. Apparently it already knows what it needs

i.e height: fixed or fill parent or number of pixels, relative, absolute, etc

same with width, also whether is absolute, relative, etc.

But when I use the Lisbon Template, there is obviously something different.

I have tried to dig into the difference in the css between the two but have not

been able to track down what needs to be changed or overridden.

My guess is it is something pretty simple that needs to be set as a class on the div

or an inline style. I am just at a loss as to what needs to be set as css

on the div so that the map api knows the size of the div so it can build and render.

I have attached the oml of the working app using the basic Web App template for comparison


Jeff, please try Leonardo's approach!

leonardo.fernandes wrote:

Hello Jeff. Thanks for providing a working example, that helped a lot to diagnose the problem. However, I will advise you to change your API secrets now that you've exposed them on a public forum.


Back to your problem. Silk layouts start loading the page with everything hidden by default. The layout web block renders a top-level <div> with classes Page and startHidden. This is somehow affecting the HereMaps javascript, which (my guess) is thinking that the map is hidden, and shouldn't be rendered.


The startHidden class is removed as soon as the document finishes loading. If you do your map initialization on that moment, then the HereMaps javascript won't be confused anymore and will render properly. So, add your initialization code after the ready event of the document. The easiest way to do this is to wrap your javascript code around a jQuery callback:

$(function($) {
    // your code here
};

Leonardo...

Thank you SOOO much for the fast response and suggestion .

Solved the issue!

You guys are awesome


Jeff, 

as part of the MVP moderation team I unmarked your previous post as the solution and, instead, marked Leonardo's one as the solution to your problem.


Keep on low-code programming with OutSystems :)