Acars map stiling (with code)

Ademar Andrade · July 14, 2013

Hi guys,

These days our team changed our acars map using some codes below.

acarsmap.tpl

<head>
<script language="javascript" type="text/javascript">
// function to calculate local time
// in a different city
// given the city's UTC offset
function calcTime() {
var index = document.getElementById('DropDownTimezone').selectedIndex;
var offset = document.getElementById('DropDownTimezone').value;
var timeZone = document.getElementById('DropDownTimezone').options[index].text;
// create Date object for current location
d = new Date();

// convert to msec
// add local time zone offset
// get UTC time in msec
utc = d.getTime() + (d.getTimezoneOffset() * 60000);

// create new Date object for different city
// using supplied offset
nd = new Date(utc + (3600000*offset));

// return time as a string
return "" + timeZone + " - " + nd.toLocaleString();
}
</script>
<style type="text/css">
@font-face {
font-family: digital;
src: url("http://truewings.com.br/DS-DIGI.eot") /* EOT file for IE */
}
@font-face {
font-family: digital;
src: url("http://truewings.com.br/DS-DIGI.TTF") /* TTF file for CSS3 browsers */
}
div.progress-container {
border: 1px solid #ffffff;
width: 100px;
margin: 1px 1px 1px 1px;
padding: 1px;
float: middle;
background: #333;
}
div.progress-container > div {
position: relative;
font-family: verdana;
font-size: 12px;
color: #000;
background-color: #FC0;
height: 20px;
vertical-align:right;
}
</style>
<style type="text/css">
<!--
body {
background-color: #f7f9f8;
}
.dcreui b {
color: #FFF;
font-size: 18px;
text-align: left;
}
.zz {
color: #FFF;
}
.dcreui {
font-size: 24px;
color: #FFF;
}
.ASAS {
text-align: left;
color: #F00;
}
.ASAS b b {
font-size: 18px;
font-weight: bold;
color: #FFF;
}
.ULALALA {
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
font-style: italic;
font-size: 16px;
}
.dcreui b b {
text-align: left;
}
.ASAS b {
color: #FFF;
font-size: 18px;
}
-->
</style>
</head>
<h3>VÃ´os ativos neste momento</h3>
<table width="970" border="10" align="center" cellpadding="0" cellspacing="0" bordercolor="#333">
<tr>
<td><table width="970" border = "0" bordercolor = "#333" align="center" cellpadding="0" cellspacing="0" >
<thead>
 <tr>
	 <td height="19" colspan="6" align="right" bgcolor="#333333" style="font-size: 14px"><span class="AHOPU" style="text-align: center; color: #FC0; font-weight: bold; font-style: italic;"><font face="digital" size="5">TWS ACARS MAP VER. 1.5 </font></td>
 </tr>
 <tr>
	 <td height="19" colspan="6" align="right" bgcolor="#000000"><?php
/**
* These are some options for the ACARS map, you can change here
*
* By default, the zoom level and center are ignored, and the map
* will try to fit the all the flights in. If you want to manually set
* the zoom level and center, set "autozoom" to false.
*
* You can use these MapTypeId's:
* http://code.google.com/apis/maps/documentation/v3/reference.html#MapTypeId
*
* Change the "TERRAIN" to the "Constant" listed there - they are case-sensitive
*
* Also, how to style the acars pilot list table. You can use these style selectors:
*
* table.acarsmap { }
* table.acarsmap thead { }
* table.acarsmap tbody { }
* table.acarsmap tbody tr.even { }
* table.acarsmap tbody tr.odd { }
*/
?>
	 <script type="text/javascript">
<?php
/* These are the settings for the Google map. You can see the
 Google API reference if you want to add more options.

 There's two options I've added:

 autozoom: This will automatically center in on/zoom
	 so all your current flights are visible. If false,
	 then the zoom and center you specify will be used instead

 refreshTime: Time, in seconds * 1000 to refresh the map.
	 The default is 10000 (10 seconds)
*/
?>
var acars_map_defaults = {
 autozoom: false,
 zoom: 3,
center: new google.maps.LatLng("<?php echo Config::Get('MAP_CENTER_LAT'); ?>", "<?php echo Config::Get('MAP_CENTER_LNG'); ?>"),
mapTypeId: google.maps.MapTypeId.HYBRID,
refreshTime: 10000
};
	 </script>
	 <style type="text/css">
<!--
aszxc {
color: #FFF;
}
.acarsmap {
color: #333;
font-size: 12px;
}
gdfgk {
text-align: center;
}
.AHOPU {
color: #333;
}
.acarsmap thead tr td b {
text-align: right;
color: #0D64B4;
}
.dcreui {
text-align: right;
}
.asdf { text-align: left;
}
.asdf { text-align: left;
color: #FFF;
}
.asdf { color: #890101;
text-align: left;
}
-->
	 </style>
	 <div class="mapcenter" align="center">
		 <div id="acarsmap" style="width:<?php echo Config::Get('MAP_WIDTH');?>; height: <?php echo Config::Get('MAP_HEIGHT')?>"></div>
	 </div>
	 <?php
/* See below for details and columns you can use in this table */
?></td>
 </tr>
 <tr>
	 <td height="19" colspan="6" align="right" bgcolor="#000000"><p align="right"><script type="text/javascript">
data = new Date();
dia = data.getDate();
mes = data.getMonth();
ano = data.getFullYear();
meses = new Array(12);
meses[0] = "Janeiro";
meses[1] = "Fevereiro";
meses[2] = "MarÃ§o";
meses[3] = "Abril";
meses[4] = "Maio";
meses[5] = "Junho";
meses[6] = "Julho";
meses[7] = "Agosto";
meses[8] = "Setembro";
meses[9] = "Outubro";
meses[10] = "Novembro";
meses[11] = "Dezembro";
document.write ("<font color='#FFF' size='5' face='digital'>" + dia + " de " + meses[mes] + " de " + ano + " </font> ");
</script><form id="form1" runat="server">
<select name="DropDownTimezone" id="DropDownTimezone" onchange="alert(calcTime());">
<option value="-12.0">(GMT -12:00) Eniwetok, Kwajalein</option>
<option value="-11.0">(GMT -11:00) Midway Island, Samoa</option>
<option value="-10.0">(GMT -10:00) Hawaii</option>
<option value="-9.0">(GMT -9:00) Alaska</option>
<option value="-8.0">(GMT -8:00) Pacific Time (US & Canada)</option>
<option value="-7.0">(GMT -7:00) Mountain Time (US & Canada)</option>
<option value="-6.0">(GMT -6:00) Central Time (US & Canada), Mexico City</option>
<option value="-5.0">(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima</option>
<option value="-4.0">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
<option value="-3.5">(GMT -3:30) Newfoundland</option>
<option value="-3.0">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
<option value="-2.0">(GMT -2:00) Mid-Atlantic</option>
<option value="-1.0">(GMT -1:00 hour) Azores, Cape Verde Islands</option>
<option value="0.0">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
<option value="1.0">(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
<option value="2.0">(GMT +2:00) Kaliningrad, South Africa</option>
<option value="3.0">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
<option value="3.5">(GMT +3:30) Tehran</option>
<option value="4.0">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
<option value="4.5">(GMT +4:30) Kabul</option>
<option value="5.0">(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
<option value="5.5">(GMT +5:30) Bombay, Calcutta, Madras, New Delhi</option>
<option value="5.75">(GMT +5:45) Kathmandu</option>
<option value="6.0">(GMT +6:00) Almaty, Dhaka, Colombo</option>
<option value="7.0">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
<option value="8.0">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
<option value="9.0">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
<option value="9.5">(GMT +9:30) Adelaide, Darwin</option>
<option value="10.0">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
<option value="11.0">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
<option value="12.0">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
</select>
</form></p></td>
 </tr>
 <tr>
	 <td width="15%" height="19" align="left" bgcolor="#333333" class="ASAS"> </td>
	 <td align="left" bgcolor="#333333"> </td>
	 <td align="left" bgcolor="#333333"> </td>
	 <td align="left" bgcolor="#333333"> </td>
	 <td align="left" bgcolor="#333333"> </td>
	 <td align="left" bgcolor="#333333"> </td>
 </tr>
 <tr>
		 <td height="19" bgcolor="#333333" class="ASAS">  <b><b>N.</b></b></td>
	 <td width="20%" align="left" bgcolor="#333333" class="ASAS"><b><b>PILOTO</b></b></td>
	 <td width="19%" align="left" bgcolor="#333333" class="ASAS"><b>EQUIPAMENTO</b></td>
<td width="12%" align="left" bgcolor="#333333"><span class="ASAS"><b>DEP / ARR</b></span><span class="dcreui"></span></td>
	 <td width="20%" align="left" bgcolor="#333333" class="ASAS"><b>STATUS</b></td>
	 <td width="14%" align="left" bgcolor="#333333" class="ASAS"><b>ANDAMENTO</b></td>
</tr>
 <tr>
	 <td height="19" colspan="6" align="left" bgcolor="#333333" class="ASAS"> </td>
 </tr>
</thead>
<tbody id="pilotlist"></tbody>
</table></td>
</tr>
</table>
<p><span class="ULALALA">
<?php
/* This is the template which is used in the table above, for each row.
 Be careful modifying it. You can simply add/remove columns, combine
 columns too. Keep each "section" (<%=...%>) intact

 Variables you can use (what they are is pretty obvious)

 Variable:													 Notes:
 <%=flight.pilotid%>
 <%=flight.firstname%>
 <%=flight.lastname%>
 <%=flight.pilotname%>						 First and last combined
 <%=flight.flightnum%>
 <%=flight.depapt%>									 Gives the airport name
 <%=flight.depicao%>
 <%=flight.arrapt%>									 Gives the airport name
 <%=flight.arricao%>
 <%=flight.phasedetail%>
 <%=flight.heading%>
 <%=flight.alt%>
 <%=flight.gs%>
 <%=flight.disremaining%>
 <%=flight.timeremaning%>
 <%=flight.aircraft%>						 Gives the registration
 <%=flight.aircraftname%>					 Gives the full name
 <%=flight.client%>									 FSACARS/Xacars/FSFK, etc
 <%=flight.trclass%>									 "even" or "odd"
<%=flight.percomplete%>

 You can also use logic in the templating, if you so choose:
 http://ejohn.org/blog/javascript-micro-templating/
*/
?>
<?php
/*	 This is the template for the little map bubble which pops up when you click on a flight
 Same principle as above, keep the <%=...%> tags intact. The same variables are available
 to use here as are available above.
*/
?>
<?php
/*	 This is a small template for information about a navpoint popup

 Variables available:

 <%=nav.title%>
 <%=nav.name%>
 <%=nav.freq%>
 <%=nav.lat%>
 <%=nav.lng%>
 <%=nav.type%> 2=NDB 3=VOR 4=DME 5=FIX 6=TRACK
*/
?>
</span></p>
<p class="AHOPU">
<script type="text/javascript" src="<?php echo fileurl('/lib/js/acarsmap.js');?>"></script>
<script type="text/html" id="acars_map_row">
<tr border="0">
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><b class="zz" style="color: #000">.</b><font face="digital"><%=flight.flightnum%></td>
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><font face="digital"><span class="asdf" style="color: #FFFFFF; font-size: 24px;"><%=flight.pilotname%></font></span></td>
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><font face="digital"><span class="asdf" style="color: #FFFFFF; font-size: 24px;"><%=flight.aircraftname%> / <%=flight.aircraft%></span></td>
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><font face="digital"><span class="asdf" style="color: #FFFFFF; font-size: 24px;"><%=flight.depicao%>/<%=flight.arricao%></span></td>
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><font face="digital"><span class="asdf" style="color: #0C0; font-size: 24px;"><%=flight.phasedetail%></span></td>
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><font face="digital"><span class="asdf" style="color: #FFFFF; font-size: 24px;"><div class="progress-container">
<div style="width: <%=flight.percomplete%>%"><%=flight.percomplete%>%</span></div>
</div>
</td>
</tr>
</script>
<script type="text/html" id="acars_map_bubble">
<div style="width:280px;height:250px;" class="bubble">
<table style="width:100%;" class="bubbletable">
<tr>
<td id="bubblelogo" colspan="2"><img src="http://ivao.aero/data/images/online_logo/V/TWS.jpg" alt="ExecAir Flight Info"/><br><br><span><b>N° VÃ´o:</b></span> <%=flight.flightnum%></td>
</tr>
<tr>
<td style="width:32%" class="bubbleheader"><b>Piloto:</b></td>
<td><a href="<?php echo url('/profile/view');?>/<%=flight.pilotid%>"><%=flight.pilotid%></a> - <%=flight.pilotname%></td>
	 <td><img src="<?php echo $pilot->rankimage?>" alt="<?php echo $pilot->rank;?>" /></td>
</tr>
<tr>
<td class="bubbleheader"><b>Rota:</b></td>
<td><%=flight.depicao%> to <%=flight.arricao%></td>
</tr>
<tr>
<td class="bubbleheader"><b>Status:</b></td>
<td><%=flight.phasedetail%></td>
</tr>
<tr>
<td class="bubbleheader"><b>Dist.Restante:</b></td>
<td><%=flight.distremaining%> (<?php echo Config::Get('UNITS');?>)</td>
</tr>
<tr>
<td class="bubbleheader"><b>Temp.Restante:</b></td>
<td><%=flight.timeremaining%> (h)</td>

</tr>
	 <tr>
<td class="bubbleheader"><b>Acars:</b></td>
<td><%=flight.client%></td>

</tr>
	 </tr>
	 <tr>
<td class="bubbleheader"><b>Aeronave:</b></td>
<td><%=flight.aircraftname%>( Reg. <%=flight.aircraft%> )</td>

</tr>
	 <tr>
<td class="bubbleheader"><b>Progresso:</b></td>
<td><div class="progress-container">
<div style="width: <%=flight.percomplete%>%"><font color="#fff600"><%=flight.percomplete%>%</div></font>
</div></td>

</tr>
</table>
</div>
</script>
<script type="text/html" id="navpoint_bubble">
<span style="font-size: 10px; text-align:left; width: 100%" align="left">
<strong>Name: </strong><%=nav.title%> (<%=nav.name%>)<br />
<strong>Type: </strong>
<?php /* Show the type of point */ ?>
<% if(nav.type == 2) { %> NDB <% } %>
<% if(nav.type == 3) { %> VOR <% } %>
<% if(nav.type == 4) { %> DME <% } %>
<% if(nav.type == 5) { %> FIX <% } %>
<% if(nav.type == 6) { %> TRACK <% } %>
<br />
<?php /* Only show frequency if it's not a 0*/ ?>
<% if(nav.freq != 0) { %>
<strong>Frequency: </strong><%=nav.freq%>
<% } %>
</span> </script>
</p>
<p class="AHOPU">  </p>

Now we are trying to put it in full page.

Any one have any idea how to do it?

Reggards...

Strider · July 14, 2013

What do you mean full page?

Parkho · July 14, 2013

If you mean you want it to have its own page then you have 2 ways.

1. would be adding a page in admin area and clicking the "Source" button and adding your entire codes there.

2. would be creating a module and adding the codes to a template and then showing the template in a page.

If your team know how to create a module in phpVMS then I would suggest you go with #2.

Ademar Andrade · July 14, 2013

If you mean you want it to have its own page then you have 2 ways.

1. would be adding a page in admin area and clicking the "Source" button and adding your entire codes there.

2. would be creating a module and adding the codes to a template and then showing the template in a page.

If your team know how to create a module in phpVMS then I would suggest you go with #2.

Tks Parkho...

Always helping us with your knowledge...

Full page like this:

http://aviancavirtual.net/br/tracking

Cor · July 15, 2013

Looking very good. Are you going to release this?

Regards,

Cor

Ademar Andrade · July 15, 2013

Looking very good. Are you going to release this?

Regards,

Cor

Hi Cor,,

Tks!

You can use the code as you wish. Im trying to put the googe map ina full size page.

Waiting anybody help!

Txmmy83 · July 15, 2013

Hi Cor,,

Tks!

You can use the code as you wish. Im trying to put the googe map ina full size page.

Waiting anybody help!

Cor,

I wanted to ask the Same question

Ademar,

how did you get the Nice weather Layer?

Ademar Andrade · July 16, 2013

Cor,

I wanted to ask the Same question

Ademar,

how did you get the Nice weather Layer?

this link explane how to do it

http://forum.phpvms.net/topic/8559-acars-map-weather-and-clouds/

Cor · July 16, 2013

I love the tracking page

Regards,

Cor

simonecatalano · August 14, 2013

why not view clouds? http://qs.lc/cxos

and the pilot remains when you disconnect 48h of ACARS map

simonecatalano · August 16, 2013

Please Help me !! :/( I copy this is

<head>
<script language="javascript" type="text/javascript">
// function to calculate local time
// in a different city
// given the city's UTC offset
function calcTime() {
var index = document.getElementById('DropDownTimezone').selectedIndex;
var offset = document.getElementById('DropDownTimezone').value;
var timeZone = document.getElementById('DropDownTimezone').options[index].text;
// create Date object for current location
d = new Date();
// convert to msec
// add local time zone offset
// get UTC time in msec
utc = d.getTime() + (d.getTimezoneOffset() * 60000);
// create new Date object for different city
// using supplied offset
nd = new Date(utc + (3600000*offset));
// return time as a string
return "" + timeZone + " - " + nd.toLocaleString();
}
</script>
<style type="text/css">
@font-face {
font-family: digital;
src: url("http://truewings.com.br/DS-DIGI.eot") /* EOT file for IE */
}
@font-face {
font-family: digital;
src: url("http://truewings.com.br/DS-DIGI.TTF") /* TTF file for CSS3 browsers */
}
div.progress-container {
border: 1px solid #ffffff;
width: 100px;
margin: 1px 1px 1px 1px;
padding: 1px;
float: middle;
background: #333;
}
div.progress-container > div {
position: relative;
font-family: verdana;
font-size: 12px;
color: #000;
background-color: #FC0;
height: 20px;
vertical-align:right;
}
</style>
<style type="text/css">
<!--
body {
background-color: #f7f9f8;
}
.dcreui b {
color: #FFF;
font-size: 18px;
text-align: left;
}
.zz {
color: #FFF;
}
.dcreui {
font-size: 24px;
color: #FFF;
}
.ASAS {
text-align: left;
color: #F00;
}
.ASAS b b {
font-size: 18px;
font-weight: bold;
color: #FFF;
}
.ULALALA {
text-align: center;
font-family: Tahoma, Geneva, sans-serif;
font-style: italic;
font-size: 16px;
}
.dcreui b b {
text-align: left;
}
.ASAS b {
color: #FFF;
font-size: 18px;
}
-->
</style>
</head>
<h3>VÃ´os ativos neste momento</h3>
<table width="970" border="10" align="center" cellpadding="0" cellspacing="0" bordercolor="#333">
<tr>
<td><table width="970" border = "0" bordercolor = "#333" align="center" cellpadding="0" cellspacing="0" >
<thead>
	 <tr>
			 <td height="19" colspan="6" align="right" bgcolor="#333333" style="font-size: 14px"><span class="AHOPU" style="text-align: center; color: #FC0; font-weight: bold; font-style: italic;"><font face="digital" size="5">TWS ACARS MAP VER. 1.5 </font></td>
	 </tr>
	 <tr>
			 <td height="19" colspan="6" align="right" bgcolor="#000000"><?php
/**
* These are some options for the ACARS map, you can change here
*
* By default, the zoom level and center are ignored, and the map
* will try to fit the all the flights in. If you want to manually set
* the zoom level and center, set "autozoom" to false.
*
* You can use these MapTypeId's:
* http://code.google.com/apis/maps/documentation/v3/reference.html#MapTypeId
*
* Change the "TERRAIN" to the "Constant" listed there - they are case-sensitive
*
* Also, how to style the acars pilot list table. You can use these style selectors:
*
* table.acarsmap { }
* table.acarsmap thead { }
* table.acarsmap tbody { }
* table.acarsmap tbody tr.even { }
* table.acarsmap tbody tr.odd { }
*/
?>
			 <script type="text/javascript">
<?php
/* These are the settings for the Google map. You can see the
	 Google API reference if you want to add more options.

	 There's two options I've added:

	 autozoom: This will automatically center in on/zoom
			 so all your current flights are visible. If false,
			 then the zoom and center you specify will be used instead

	 refreshTime: Time, in seconds * 1000 to refresh the map.
			 The default is 10000 (10 seconds)
*/
?>
var acars_map_defaults = {
	 autozoom: false,
	 zoom: 3,
center: new google.maps.LatLng("<?php echo Config::Get('MAP_CENTER_LAT'); ?>", "<?php echo Config::Get('MAP_CENTER_LNG'); ?>"),
mapTypeId: google.maps.MapTypeId.HYBRID,
refreshTime: 10000
};
			 </script>
			 <style type="text/css">
<!--
aszxc {
color: #FFF;
}
.acarsmap {
color: #333;
font-size: 12px;
}
gdfgk {
text-align: center;
}
.AHOPU {
color: #333;
}
.acarsmap thead tr td b {
text-align: right;
color: #0D64B4;
}
.dcreui {
text-align: right;
}
.asdf { text-align: left;
}
.asdf { text-align: left;
color: #FFF;
}
.asdf { color: #890101;
text-align: left;
}
-->
			 </style>
			 <div class="mapcenter" align="center">
					 <div id="acarsmap" style="width:<?php echo Config::Get('MAP_WIDTH');?>; height: <?php echo Config::Get('MAP_HEIGHT')?>"></div>
			 </div>
			 <?php
/* See below for details and columns you can use in this table */
?></td>
	 </tr>
	 <tr>
			 <td height="19" colspan="6" align="right" bgcolor="#000000"><p align="right"><script type="text/javascript">
data = new Date();
dia = data.getDate();
mes = data.getMonth();
ano = data.getFullYear();
meses = new Array(12);
meses[0] = "Janeiro";
meses[1] = "Fevereiro";
meses[2] = "MarÃ§o";
meses[3] = "Abril";
meses[4] = "Maio";
meses[5] = "Junho";
meses[6] = "Julho";
meses[7] = "Agosto";
meses[8] = "Setembro";
meses[9] = "Outubro";
meses[10] = "Novembro";
meses[11] = "Dezembro";
document.write ("<font color='#FFF' size='5' face='digital'>" + dia + " de " + meses[mes] + " de " + ano + " </font> ");
</script><form id="form1" runat="server">
<select name="DropDownTimezone" id="DropDownTimezone" onchange="alert(calcTime());">
<option value="-12.0">(GMT -12:00) Eniwetok, Kwajalein</option>
<option value="-11.0">(GMT -11:00) Midway Island, Samoa</option>
<option value="-10.0">(GMT -10:00) Hawaii</option>
<option value="-9.0">(GMT -9:00) Alaska</option>
<option value="-8.0">(GMT -8:00) Pacific Time (US & Canada)</option>
<option value="-7.0">(GMT -7:00) Mountain Time (US & Canada)</option>
<option value="-6.0">(GMT -6:00) Central Time (US & Canada), Mexico City</option>
<option value="-5.0">(GMT -5:00) Eastern Time (US & Canada), Bogota, Lima</option>
<option value="-4.0">(GMT -4:00) Atlantic Time (Canada), Caracas, La Paz</option>
<option value="-3.5">(GMT -3:30) Newfoundland</option>
<option value="-3.0">(GMT -3:00) Brazil, Buenos Aires, Georgetown</option>
<option value="-2.0">(GMT -2:00) Mid-Atlantic</option>
<option value="-1.0">(GMT -1:00 hour) Azores, Cape Verde Islands</option>
<option value="0.0">(GMT) Western Europe Time, London, Lisbon, Casablanca</option>
<option value="1.0">(GMT +1:00 hour) Brussels, Copenhagen, Madrid, Paris</option>
<option value="2.0">(GMT +2:00) Kaliningrad, South Africa</option>
<option value="3.0">(GMT +3:00) Baghdad, Riyadh, Moscow, St. Petersburg</option>
<option value="3.5">(GMT +3:30) Tehran</option>
<option value="4.0">(GMT +4:00) Abu Dhabi, Muscat, Baku, Tbilisi</option>
<option value="4.5">(GMT +4:30) Kabul</option>
<option value="5.0">(GMT +5:00) Ekaterinburg, Islamabad, Karachi, Tashkent</option>
<option value="5.5">(GMT +5:30) Bombay, Calcutta, Madras, New Delhi</option>
<option value="5.75">(GMT +5:45) Kathmandu</option>
<option value="6.0">(GMT +6:00) Almaty, Dhaka, Colombo</option>
<option value="7.0">(GMT +7:00) Bangkok, Hanoi, Jakarta</option>
<option value="8.0">(GMT +8:00) Beijing, Perth, Singapore, Hong Kong</option>
<option value="9.0">(GMT +9:00) Tokyo, Seoul, Osaka, Sapporo, Yakutsk</option>
<option value="9.5">(GMT +9:30) Adelaide, Darwin</option>
<option value="10.0">(GMT +10:00) Eastern Australia, Guam, Vladivostok</option>
<option value="11.0">(GMT +11:00) Magadan, Solomon Islands, New Caledonia</option>
<option value="12.0">(GMT +12:00) Auckland, Wellington, Fiji, Kamchatka</option>
</select>
</form></p></td>
	 </tr>
	 <tr>
			 <td width="15%" height="19" align="left" bgcolor="#333333" class="ASAS"> </td>
			 <td align="left" bgcolor="#333333"> </td>
			 <td align="left" bgcolor="#333333"> </td>
			 <td align="left" bgcolor="#333333"> </td>
			 <td align="left" bgcolor="#333333"> </td>
			 <td align="left" bgcolor="#333333"> </td>
	 </tr>
	 <tr>
					 <td height="19" bgcolor="#333333" class="ASAS">  <b><b>N.</b></b></td>
			 <td width="20%" align="left" bgcolor="#333333" class="ASAS"><b><b>PILOTO</b></b></td>
			 <td width="19%" align="left" bgcolor="#333333" class="ASAS"><b>EQUIPAMENTO</b></td>
<td width="12%" align="left" bgcolor="#333333"><span class="ASAS"><b>DEP / ARR</b></span><span class="dcreui"></span></td>
			 <td width="20%" align="left" bgcolor="#333333" class="ASAS"><b>STATUS</b></td>
			 <td width="14%" align="left" bgcolor="#333333" class="ASAS"><b>ANDAMENTO</b></td>
</tr>
	 <tr>
			 <td height="19" colspan="6" align="left" bgcolor="#333333" class="ASAS"> </td>
	 </tr>
</thead>
<tbody id="pilotlist"></tbody>
</table></td>
</tr>
</table>
<p><span class="ULALALA">
<?php
/* This is the template which is used in the table above, for each row.
	 Be careful modifying it. You can simply add/remove columns, combine
	 columns too. Keep each "section" (<%=...%>) intact

	 Variables you can use (what they are is pretty obvious)

	 Variable:																									   Notes:
	 <%=flight.pilotid%>
	 <%=flight.firstname%>
	 <%=flight.lastname%>
	 <%=flight.pilotname%>										   First and last combined
	 <%=flight.flightnum%>
	 <%=flight.depapt%>																	  Gives the airport name
	 <%=flight.depicao%>
	 <%=flight.arrapt%>																	  Gives the airport name
	 <%=flight.arricao%>
	 <%=flight.phasedetail%>
	 <%=flight.heading%>
	 <%=flight.alt%>
	 <%=flight.gs%>
	 <%=flight.disremaining%>
	 <%=flight.timeremaning%>
	 <%=flight.aircraft%>										    Gives the registration
	 <%=flight.aircraftname%>									    Gives the full name
	 <%=flight.client%>																	  FSACARS/Xacars/FSFK, etc
	 <%=flight.trclass%>																	 "even" or "odd"
<%=flight.percomplete%>

	 You can also use logic in the templating, if you so choose:
	 http://ejohn.org/blog/javascript-micro-templating/
*/
?>
<?php
/*	   This is the template for the little map bubble which pops up when you click on a flight
	 Same principle as above, keep the <%=...%> tags intact. The same variables are available
	 to use here as are available above.
*/
?>
<?php
/*	   This is a small template for information about a navpoint popup

	 Variables available:

	 <%=nav.title%>
	 <%=nav.name%>
	 <%=nav.freq%>
	 <%=nav.lat%>
	 <%=nav.lng%>
	 <%=nav.type%> 2=NDB 3=VOR 4=DME 5=FIX 6=TRACK
*/
?>
</span></p>
<p class="AHOPU">
<script type="text/javascript" src="<?php echo fileurl('/lib/js/acarsmap.js');?>"></script>
<script type="text/html" id="acars_map_row">
<tr border="0">
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><b class="zz" style="color: #000">.</b><font face="digital"><%=flight.flightnum%></td>
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><font face="digital"><span class="asdf" style="color: #FFFFFF; font-size: 24px;"><%=flight.pilotname%></font></span></td>
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><font face="digital"><span class="asdf" style="color: #FFFFFF; font-size: 24px;"><%=flight.aircraftname%> / <%=flight.aircraft%></span></td>
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><font face="digital"><span class="asdf" style="color: #FFFFFF; font-size: 24px;"><%=flight.depicao%>/<%=flight.arricao%></span></td>
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><font face="digital"><span class="asdf" style="color: #0C0; font-size: 24px;"><%=flight.phasedetail%></span></td>
<td border="0" width="11%" height="38" align="left" bgcolor="#000000" style="color: #FC0; font-weight: normal; font-size: 24px;" ><font face="digital"><span class="asdf" style="color: #FFFFF; font-size: 24px;"><div class="progress-container">
<div style="width: <%=flight.percomplete%>%"><%=flight.percomplete%>%</span></div>
</div>
</td>
</tr>
</script>
<script type="text/html" id="acars_map_bubble">
<div style="width:280px;height:250px;" class="bubble">
<table style="width:100%;" class="bubbletable">
<tr>
<td id="bubblelogo" colspan="2"><img src="http://ivao.aero/data/images/online_logo/V/TWS.jpg" alt="ExecAir Flight Info"/><br><br><span><b>N° VÃ´o:</b></span> <%=flight.flightnum%></td>
</tr>
<tr>
<td style="width:32%" class="bubbleheader"><b>Piloto:</b></td>
<td><a href="<?php echo url('/profile/view');?>/<%=flight.pilotid%>"><%=flight.pilotid%></a> - <%=flight.pilotname%></td>
			 <td><img src="<?php echo $pilot->rankimage?>" alt="<?php echo $pilot->rank;?>" /></td>
</tr>
<tr>
<td class="bubbleheader"><b>Rota:</b></td>
<td><%=flight.depicao%> to <%=flight.arricao%></td>
</tr>
<tr>
<td class="bubbleheader"><b>Status:</b></td>
<td><%=flight.phasedetail%></td>
</tr>
<tr>
<td class="bubbleheader"><b>Dist.Restante:</b></td>
<td><%=flight.distremaining%> (<?php echo Config::Get('UNITS');?>)</td>
</tr>
<tr>
<td class="bubbleheader"><b>Temp.Restante:</b></td>
<td><%=flight.timeremaining%> (h)</td>

</tr>
			 <tr>
<td class="bubbleheader"><b>Acars:</b></td>
<td><%=flight.client%></td>

</tr>
			 </tr>
			 <tr>
<td class="bubbleheader"><b>Aeronave:</b></td>
<td><%=flight.aircraftname%>( Reg. <%=flight.aircraft%> )</td>

</tr>
			 <tr>
<td class="bubbleheader"><b>Progresso:</b></td>
<td><div class="progress-container">
<div style="width: <%=flight.percomplete%>%"><font color="#fff600"><%=flight.percomplete%>%</div></font>
</div></td>

</tr>
</table>
</div>
</script>
<script type="text/html" id="navpoint_bubble">
<span style="font-size: 10px; text-align:left; width: 100%" align="left">
<strong>Name: </strong><%=nav.title%> (<%=nav.name%>)<br />
<strong>Type: </strong>
<?php /* Show the type of point */ ?>
<% if(nav.type == 2) { %> NDB <% } %>
<% if(nav.type == 3) { %> VOR <% } %>
<% if(nav.type == 4) { %> DME <% } %>
<% if(nav.type == 5) { %> FIX <% } %>
<% if(nav.type == 6) { %> TRACK <% } %>
<br />
<?php /* Only show frequency if it's not a 0*/ ?>
<% if(nav.freq != 0) { %>
<strong>Frequency: </strong><%=nav.freq%>
<% } %>
</span> </script>
</p>
<p class="AHOPU">  </p>

but not work

Ademar Andrade · August 17, 2013

CLOUDS

http://forum.phpvms.net/topic/8559-acars-map-weather-and-clouds/

% FLIGHT COMPLET

http://forum.phpvms.net/topic/5394-complete-flight/

That is it.

Reggards,

massilia68 · August 19, 2013

Hello,

How to resize the map because goes out of the template ?

Thank you

Ademar Andrade · August 20, 2013

Hello,

How to resize the map because goes out of the template ?

Thank you

localconfig.tpl

# Google Map Options
Config::Set('MAP_WIDTH', '700px');
Config::Set('MAP_HEIGHT', '600px');

mitcheinfo · March 9, 2015

Ademar, copiei o seu codigo e tenho uma pergunta:

Como voce ajustou o Status dos voos, o meu so sai cruise ou Arrived, nada mais. Queria colocar taxi e outras coisas mais. Pode me dar um help.

Obrigado

Ademar Andrade · March 9, 2015

Ademar, copiei o seu codigo e tenho uma pergunta:

Como voce ajustou o Status dos voos, o meu so sai cruise ou Arrived, nada mais. Queria colocar taxi e outras coisas mais. Pode me dar um help.

Obrigado

These options come from your acars program.

Witch do your company use?

mitcheinfo · March 10, 2015

We use the FSFK

LH154 · January 14, 2017

Hi we fly with smartCars is this a Problem?

Acars map stiling (with code)

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation