an idea for acarsmap.js?

[Justairbus]

Hi there!

As Air Anatolia VA , we're new on phpvms system and currently we are still stylizing. I was planning to change aircraft icons, there was 360 images files for each heading.Rotating,saving...rotating saving...just boring! And i noticed that ystem works like that in acarsmap.js ;

var pos = new google.maps.LatLng(lat, lng);

var flightpos = new google.maps.MarkerImage("/lib/images/inair/"+data.heading+".png",

null,

new google.maps.Point(0,0),

new google.maps.Point(17, 17)

);

It gets the heading data , and takes the image! I have an idea to simply that but i dont know anything about javascript :/ here is my idea;

What if there is just one image file for aircraft icon , and javascript turns it by codes as the heading? Is it possible? If its possible and easy , can anyone help me?

Thanks a lot!

[skylineVirtual]

Or you can use this script here:

http://forum.phpvms.net/topic/19785-livemap-and-inair/#entry105167

to make the 360 different images

[Ademar Andrade]

Hey Justairbus,

How are you doing?

How did you put the points of the route in your acarsmap?

Reggards,

[GavinZac]

Hey, if anyone wants to give this a try, please let me know if it's working.

Basically as a webdev I was a little twitchy about watching the browser load 360 different icons, so I also wanted to 'fix' this. I've replaced the icons with an SVG image of a plane, that will rotate in accordance with the heading. Because it's drawn by SVG it can be rotated by javascript (Google maps doesn't let you rotate icons based on images, hence the need for the 360 icons in the first place) and so it doesn't cost anything in page load. Personally I like the style of the icon a little better also as it goes with my layout.

You need to backup your acarsmap.js before making this change.

Then you need to comment the follow section, as shown (this will let you revert easily if something goes wrong)

/*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
 });*/

Ok, so if we tried to load now, there would be no icons. That'd be bad. Now we use the flight data to generate an icon and rotate it:

var planeSVG = {
path: "M19.671,8.11l-2.777,2.777l-3.837-0.861c0.362-0.505,0.916-1.683,0.464-2.135c-0.518-0.517-1.979,0.278-2.305,0.604l-0.913,0.913L7.614,8.804l-2.021,2.021l2.232,1.061l-0.082,0.082l1.701,1.701l0.688-0.687l3.164,1.504L9.571,18.21H6.413l-1.137,1.138l3.6,0.948l1.83,1.83l0.947,3.598l1.137-1.137V21.43l3.725-3.725l1.504,3.164l-0.687,0.687l1.702,1.701l0.081-0.081l1.062,2.231l2.02-2.02l-0.604-2.689l0.912-0.912c0.326-0.326,1.121-1.789,0.604-2.306c-0.452-0.452-1.63,0.101-2.135,0.464l-0.861-3.838l2.777-2.777c0.947-0.947,3.599-4.862,2.62-5.839C24.533,4.512,20.618,7.163,19.671,8.11z",
rotation:data[i].heading-45,
fillColor: '#FFFFFF',
fillOpacity: 1,
anchor: new google.maps.Point(0,0),
strokeWeight: 1,
scale: 1
}


var pos = new google.maps.LatLng(lat, lng);
flightMarkers[flightMarkers.length] = new google.maps.Marker({
position: pos,
map: map,
icon: planeSVG,
flightdetails: data[i],
infowindow_content: detailed_bubble
});

Yes that big messy string "path:" does eventually look like an aeroplane. It should still behave the same way: clicking will give the flight info.

Bonus! You can change the colour of the icon easily by putting the right hexcode in fillColor. If you're especially clever, you could even generate a random colour for each icon.

[FSX30HD]

Good addition GavinZac so have you an idea where I can find SVG for A31x-A32x Boeing 737-x 747-x etc...

To change SVG plane to match with airplane in use

Thanks

Regards Fred