I’m on the finishing touches for my website now, and one thing I wanted to alter was the infobox on the live flights google map. I’ve managed to pull off a decent enough style for it, but it isn’t how I originally wanted it. I learned that you have to apply width and height to the container in-line, I tried doing it with CSS first and the styling gets ignored. I think this is because the browser renders the script container first, and then the containers content. Once you have a decent sized container, you can style the contents up as normal in the CSS stylesheet. The file that needs amending is the acarsmap.tpl file, found in the core/templates folder. Here’s my markup:
<script type="text/html" id="acars_map_bubble">
The div below is the container which has the size styling applied in-line.
<div style="width:280px;height:165px;" class="bubble">
I chose to use a table for the content, but you can use divs, lists etc too. If you are going to be sizing the inner content container, you need to do this in-line too.
<table style="width:100%;" class="bubbletable">
<tr>
<td id="bubblelogo" colspan="2"><img src="http://execair.org/frontimages/bubblelogo.png" alt="ExecAir Flight Info"/><span>Flight N°:</span> <%=flight.flightnum%></td>
</tr>
<tr>
<td style="width:32%" class="bubbleheader">Pilot:</td>
<td><a href="<?php echo url('/profile/view');?>/<%=flight.pilotid%>"><%=flight.pilotid%></a> - <%=flight.pilotname%></td>
</tr>
<tr>
<td class="bubbleheader">Schedule:</td>
<td><%=flight.depicao%> to <%=flight.arricao%></td>
</tr>
<tr>
<td class="bubbleheader">Status:</td>
<td><%=flight.phasedetail%></td>
</tr>
<tr>
<td class="bubbleheader">Dist Remain:</td>
<td><%=flight.distremaining%> <?php echo Config::Get('UNITS');?></td>
</tr>
<tr>
<td class="bubbleheader">Time Remain:</td>
<td><%=flight.timeremaining%></td>
</tr>
</table>
</div>
</script>
If any of you guys try this, Nabeel has kindly left some advice in the file, which helped. Here’s what the infobox looks like with the CSS applied:
Not too shabby, but not how I wanted it. I did want to utilise the tabbed infobox, but couldn’t figure out how to implement it in the phpVMS acarsmap.js.
Cheers,
Stu