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
<div id="LisbonTheme_wt16_block_wtMainContent" class="MainContent">
<div id="LisbonTheme_wt16_block_wtMainContent_wtmapContainer" style="height: 500px; background: gray">
"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>
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.fernandes wrote:
Leonardo...
Thank you SOOO much for the fast response and suggestion .
Solved the issue!
You guys are awesome
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?
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!
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 :)