Livemap and Inair

[massilia68]

Hello, I would like to know how you do to integrate a button that opens page with Full LiveMap.

Is it possible to put a different InAir for each airline on LiveMap?

Thank you!

[Strider]

no, it is not, as the live map is taken from the same source, you would have to create a few different js files, maybe even modules. Also you would need to create 360 images of the aircraft icons to represent the points of the compass so the plane faces the correct direction

[massilia68]

Yes that's exactly it, I already view what will a full LiveMap, it does not bother me ccréer icons, but I rather struggle with the js.

How I could do to put a different InAir the for each airline is LiveMap you know?

[Strider]

you would have to create modules for the maps and a new js for it.

[skylineVirtual]

You can simply create the 360 images with an easy php script:

<?php
$count = 0;
while ($count < 360){
$filename = 'orig.png';
$rotang = -$count; // Rotation angle
$source = imagecreatefrompng($filename) or die('Error opening file '.$filename);
imagealphablending($source, false);
imagesavealpha($source, true);
$rotation = imagerotate($source, $rotang, imageColorAllocateAlpha($source, 0, 0, 0, 127));
imagealphablending($rotation, false);
imagesavealpha($rotation, true);
header('Content-type: image/png');
imagepng($rotation, "rotate/{$count}.png");
imagedestroy($source);
imagedestroy($rotation);
$count = $count + 1;

}
?>

Put this php file into a directory and add a folder called rotate and name your original image orig.png and make sure it is oriented this way:

(PLEASE! Don't just use our inair icon Be creative and create one of your own. It isn't that hard)

Upload it to the directory you have saved the folder the php file is in and run the script. If everything worked out as it should you will have 360 images in your rotate folder, already named according to the phpvms way . You only have to put these into the innair folder.

This is how everything worked out for me.

[massilia68]

Hello, thank you for your help to make the 360 pictures that I can do. What I can not do is create a script that put a InAir airline for each entry (for exemple : Airfrance InAIR Blue, Transavia InAir green ...).

Thank you

[skylineVirtual]

Go into your acarsmap.js file around line 100 you should find this:

 var pos = new google.maps.LatLng(lat, lng);
 flightMarkers[flightMarkers.length] = new google.maps.Marker({
  position: pos,
  map: map,
  icon: url+"/lib/images/inair/"+data[i].heading+".png",
  flightdetails: data[i],
  infowindow_content: detailed_bubble
 });

Now you can modify this a bit. If you have two airlines with the defined airline codes SLN and SLK for example then your code you would have to exchange with the part I mentioned above would look like this:

 if (data[i].code == "SLN"){
 var pos = new google.maps.LatLng(lat, lng);
 flightMarkers[flightMarkers.length] = new google.maps.Marker({
  position: pos,
  map: map,
  icon: url+"/lib/images/inair/"+data[i].heading+".png",
  flightdetails: data[i],
  infowindow_content: detailed_bubble
 });
 }
else if (data[i].code == "SLK"){
 var pos = new google.maps.LatLng(lat, lng);
 flightMarkers[flightMarkers.length] = new google.maps.Marker({
  position: pos,
  map: map,
  icon: url+"/lib/images/inair2/"+data[i].heading+".png",
  flightdetails: data[i],
  infowindow_content: detailed_bubble
 });
 }

Notice that you will have to change the line containing this

(data[i].code == "SLK")

and add customize the airline code.

Then you have to change this line:

icon: url+"/lib/images/inair2/"+data[i].heading+".png",

so that the right icon get's selected.

This code would use the images from the folder "inair" for the airline SLN and the images from folder "inair2" for the airline SLK.

Hope this helps and don't forget to backup the file before you change something so if something get's messed up you will be able to recover the original status.

[mseiwald]

an easier solution is just making it like this :

var pos = new google.maps.LatLng(lat, lng);
flightMarkers[flightMarkers.length] = new google.maps.Marker({
position: pos,
map: map,
icon: url+"/lib/images/inair/"+data[i].code+"/"+data[i].heading+".png",
flightdetails: data[i],
infowindow_content: detailed_bubble
});

and then inside the inair folder just make seperate folders named for each 3 letter code

so if you have the inair folder create folders inside like "SLK", "SLN", with the inair images for each airline in it

[mseiwald]

oh and btw what is a Full LiveMap?

[skylineVirtual]

I think he meant a full screen livemap

[massilia68]

Hello thank you all everything works perfectly! One last thing and I do bothers you more, really would be nice if you could tell me how to put a button to enlarge LiveMap?

Thank you very much

[skylineVirtual]

I'm not very experienced with javascript and there are probably better ways to solve this problem (maybe with jquery or stuff like that) but I got it to work like this:

Just add these lines of code to the end of your acarsmap.tpl file:

<script type="text/javascript">
function makebig(){
var button = document.getElementById("button");
var buttoncontent = button.value;
if (buttoncontent == "Make big"){
var elem = document.getElementById("acarsmap");
elem.style.width = "800px";
elem.style.height = "800px";
button.value = "Make small";
}
else {
var elem = document.getElementById("acarsmap");
elem.style.width = "<?php echo  Config::Get('MAP_WIDTH');?>";
elem.style.height = "<?php echo Config::Get('MAP_HEIGHT')?>";
button.value = "Make big";
}
};
</script>
<input type="button" id="button" onclick="makebig()" value="Make big">

Then change these lines according to your needs:

elem.style.width = "800px";
elem.style.height = "800px";

If you want to change the values then you have to really be careful to change every value that comes up in those lines.

For example if you want to change "Make big" to "Big" you will have to change it

if (buttoncontent == "Make big"){

here and

button.value = "Make big";

here and

<input type="button" id="button" onclick="makebig()" value="Make big">

here

If anyone has some suggestion on how to improve the code then I'd be happy to know.

-Lauritz

[massilia68]

Thank you Skyline all that helped me a lot! Is it possible to open the map in full on another page ?

[skylineVirtual]

Ok, then I didn't quite understand what you wanted at first.

It's possible of course. I'm going to look at that tomorrow.

[massilia68]

There are no worries thank you, your help makes me enormously !

[skylineVirtual]

Ok, I've coded the full screen module for you

Put this in your ACARS.php Module:

public function viewmapbig()
{
 $this->set('acarsdata', ACARSData::GetACARSData());
 $this->render('acarsmapbig.tpl');

}

Then you have to create a new template file in your "phpvms/lib/skins/YOURSKINFOLDER/" folder named acarsmapbig.tpl which contains the following stuff:

<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
</head>
<?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)
*/
?>
<script type="text/javascript"
 src="https://maps.googleapis.com/maps/api/js?libraries=weather&sensor=false">
</script>
<script type="text/javascript">
var acars_map_defaults = {
autozoom: false,
zoom: 4,
   center: new google.maps.LatLng("<?php echo Config::Get('MAP_CENTER_LAT')?>", "<?php echo Config::Get('MAP_CENTER_LNG')?>"),
   mapTypeId: google.maps.MapTypeId.SATELLITE,
   refreshTime: 10000
};
</script>
<div id="acarsmap" style="margin: 0; width: 100%; height: 100%; position: absolute;"></div>
</div>
<script type="text/javascript" src="<?php echo fileurl('/lib/js/acarsmap.js');?>"></script>
<?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.realid%>
 <%=flight.percomplete%>
 <%=flight.onlineimage%>

You can also use logic in the templating, if you so choose:
http://ejohn.org/blog/javascript-micro-templating/
*/

?>
<script type="text/html" id="acars_map_row">
<tr height="10px" class="<%=flight.trclass%>">
</tr>
</script>
<?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.
*/
?>
<script type="text/html" id="acars_map_bubble">
<span style="font-size: 10px; text-align:left; width: 100%" align="left">
<b><%=flight.pilotid%> - <%=flight.pilotname%></b><br />
<strong>Flight <%=flight.flightnum%></strong> (<%=flight.depicao%> to <%=flight.arricao%>)<br />
<strong>Aircraft: </strong><%=flight.aircraftname%><br />
<strong>Status: </strong><%=flight.phasedetail%><br />
<strong>Dist/Time Remain: </strong><%=flight.distremaining%> <?php echo Config::Get('UNITS');?> / <%=flight.timeremaining%><br />
</span>
</script>

The map should be accessible with a link looking like this:

http://www.YOURLINK/YOURPHPVMSFOLDER/index.php/acars/viewmapbig

or if you have installed phpvms into your root folder

http://www.YOURLINK/index.php/acars/viewmapbig

You will only have to put a normal button or link to your default livemap linking to the fullscreen one.

I have a live demo here if you want to check it out:

http://skyline-va.de/phpvms/index.php/acars/viewmapbig

Hope this helps

[Gantcho]

Can you help me to fix this please!

http://www.bgairva.com/index.php/acars/viewmapbig

thanks!

[skylineVirtual]

I can't even access your website.

But by the way:

There is one thing missing in these instructions. After you have followed the steps I mentioned above you have to use this else command for the one in line 74 of the index.php (phpvms root folder):

else
{
# It's a template sammich!
 if (strpos($page_content,'html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }') !== false) {
$BaseTemplate->ShowTemplate('header2.tpl');
echo $page_content;

}
 else {
$BaseTemplate->ShowTemplate('header.tpl');
echo $page_content;
$BaseTemplate->ShowTemplate('footer.tpl');

}
}

Then you should get a fullscreen live map.

Happy Christmas!

[simpilot]

I found it easier to use the action.php method which goes skinless and just set the map to 100% like I did here -> http://www.virtualac.../map/fullscreen <- this uses the Leaf map instead of the Google map but you can use the same concept, plus you do not have to hack a core file subject to update.

[FSX30HD]

I found it easier to use the action.php method which goes skinless and just set the map to 100% like I did here -> http://www.virtualac.../map/fullscreen <- this uses the Leaf map instead of the Google map but you can use the same concept, plus you do not have to hack a core file subject to update.

Hello, David How you can work with action.php ?

Howto to do this with action.php?

Thanks Fred

[Txmmy83]

discovered one thing now with

var pos = new google.maps.LatLng(lat, lng);
flightMarkers[flightMarkers.length] = new google.maps.Marker({
position: pos,
map: map,
icon: url+"/lib/images/inair/"+data[i].code+"/"+data[i].heading+".png",
flightdetails: data[i],
infowindow_content: detailed_bubble
});

which works great

but one problem if you have 2 Airlines VLI and FEV (in my case) and Pilot assigned to FEV fly a VLI flight it show the FEV inair image instead of VLI

so is there a possibility to go over the flightnumber if flightcode starts with VLI* force use of VLI inair image?

best regards,

Thomas

[skylineVirtual]

Do you have your inair pictures sorted the way this piece of code needs to have it?

In your case you would need two folders in your lib/images/inair folder. One would be VLI and the other FEV. Your icons need to go in there.

[mseiwald]

Ah looks like the code variable is assigned to the pilot id code instead of the flight code. I cant check it right now since i'm only in my phone.

[Txmmy83]

Right so I think the Trick would be to go by the flightnumber since the First three characters are the Airline Code

But did not know exactly how to get the first 3 characters and how the conditions need to look like

[skylineVirtual]

Try to use data.flightnum.substring(0,3);

instead of

data.code

I couldn't check it if it works as I'm on the phone at the moment but using substring should work

[skylineVirtual]

Try to use data.flightnum.substring(0,3);

instead of

data.code

[Txmmy83]

works great thankyou

[biokemisten]

Where do i actually put rotate.php?

Got it working.

[skylineVirtual]

Glad to hear you got it working

But please do us a favor if you plan on creating a custom inair icon don't use the one we created. I came across this once or twice now. If you have created your own image then just ignore this

[Kishshey]

You can simply create the 360 images with an easy php script:

<?php
$count = 0;
while ($count < 360){
$filename = 'orig.png';
$rotang = -$count; // Rotation angle
$source = imagecreatefrompng($filename) or die('Error opening file '.$filename);
imagealphablending($source, false);
imagesavealpha($source, true);
$rotation = imagerotate($source, $rotang, imageColorAllocateAlpha($source, 0, 0, 0, 127));
imagealphablending($rotation, false);
imagesavealpha($rotation, true);
header('Content-type: image/png');
imagepng($rotation, "rotate/{$count}.png");
imagedestroy($source);
imagedestroy($rotation);
$count = $count + 1;

}
?>

Put this php file into a directory and add a folder called rotate and name your original image orig.png and make sure it is oriented this way:

(PLEASE! Don't just use our inair icon Be creative and create one of your own. It isn't that hard)

Upload it to the directory you have saved the folder the php file is in and run the script. If everything worked out as it should you will have 360 images in your rotate folder, already named according to the phpvms way . You only have to put these into the innair folder.

This is how everything worked out for me.

Gives me a 500 Internal Server Error