Jump to content
Justairbus

an idea for acarsmap.js?

Recommended Posts

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! :)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...