Interact with real-time Flight & Meteo Data on the Live Map
One of the best things about Aviation Flights is that with this Map API you can easily interact with many of the layers on the interactive map, or even add your own. All you need to do is to understand the Google Maps Javascript API. Everything else will pretty much just work!
You need to be a Patreon subscriber to access the Map API!
The main container holding all the map contents is: <div id="map-container"></div>. You can use that div to inject your custom HTML into it. To inject something into the right click menu append your custom HTML into: <div id="rightclick-menu"></div>.
On our interactive map you get to choose to overlay a lot of different meteorological layers. With many of them (after enabling them on the map itself) you can interact with them by just looping through the markers or polygon array's on the map and getting its custom property.
For best practices you should always check if the marker or polygon array's are not empty. Example below with the METAR markers:
if(metar_markers.length > 0) {
//your code here to loop through the array
}
To loop through the METAR markers, use:
for( i = 0; i < metar_markers.length; i++ ) {
console.log(metar_markers[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the TAF markers, use:
for( i = 0; i < taf_markers.length; i++ ) {
console.log(taf_markers[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the PIREP markers, use:
for( i = 0; i < pirep_markers.length; i++ ) {
console.log(pirep_markers[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the SIGMET polygons, use:
for( i = 0; i < sigmet_polygons.length; i++ ) {
console.log(sigmet_polygons[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the Lightning markers, use:
for( i = 0; i < lightning_markers.length; i++ ) {
console.log(lightning_markers[i].custom_property);
}
There are no custom properties for this layer.
To loop through the SPC polygons, use:
for( i = 0; i < spc_outlook_polygons.length; i++ ) {
console.log(spc_outlook_polygons[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the plane markers, use:
for( i = 0; i < plane_markers.length; i++ ) {
console.log(plane_markers[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the Telemetry object, use:
for( i = 0; i < telemetry_flight_data.length; i++ ) {
console.log(telemetry_flight_data[flight_id][i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the Airport markers, use:
for( i = 0; i < flight_airport_markers.length; i++ ) {
console.log(flight_airport_markers[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the FIR polygons, use:
for( i = 0; i < fir_regions.length; i++ ) {
console.log(fir_regions[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the Active EuroControl Regulations polygons/markers, use:
for( i = 0; i < eurocontrol_active_polygons.length; i++ ) {
console.log(eurocontrol_active_polygons[i].custom_property);
}
To loop through the Forecasted EuroControl Regulations polygons/markers, use:
for( i = 0; i < eurocontrol_forecast_polygons.length; i++ ) {
console.log(eurocontrol_forecast_polygons[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the Oceanic Track waypoints, use:
for( i = 0; i < track_markers.length; i++ ) {
console.log(track_markers[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the Oceanic Track route lines, use:
for( i = 0; i < track_line.length; i++ ) {
console.log(track_line[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the Flight Tracker markers, use:
for( i = 0; i < flighttracker_planes.length; i++ ) {
console.log(flighttracker_planes[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the Airport markers, use:
for( i = 0; i < airports.length; i++ ) {
console.log(airports[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the Waypoint markers, use:
for( i = 0; i < waypoints.length; i++ ) {
console.log(waypoints[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the Runway markers, use:
for( i = 0; i < runways.length; i++ ) {
console.log(runways[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
Only you can access your own location. To loop through your current user location markers, use:
for( i = 0; i < user_marker.length; i++ ) {
console.log(user_marker[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
When right clicking (or tapping on mobile) it will show the red "picker". To loop through the current active User click marker, use:
for( i = 0; i < click_icon.length; i++ ) {
console.log(click_icon[i].custom_property);
}
There are no custom properties for this layer.
You can only access your own custom locations. To loop through your Custom Location markers, use:
for( i = 0; i < user_map_locations.length; i++ ) {
console.log(user_map_locations[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the virtual flights markers, use:
for( i = 0; i < virtual_plane_markers.length; i++ ) {
console.log(virtual_plane_markers[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
To loop through the Virtual ATC polygon, use:
for( i = 0; i < virtual_atc_polygons.length; i++ ) {
console.log(virtual_atc_polygons[i].custom_property);
}
The table below shows the "custom properties" available for this layer:
You can easily add your own map layers to the map. The main map variable is: map
You can add your own markers, polylines, polygons, map tiles etc. Almost anything the Google Maps Javascript API can overlay, you can as well. So if you have better sources of meteorological or air traffic data, you can easily just add that yourself to Aviation Flights.
The API Code editor is a tool developed in which you can write your own code, in Javascript, to be injected into the Interactive Map. You can do pretty much anything you want in there. You can interact with the Google Maps Javascript API to add your own layers or interact with existing layers of the map. You can do your own calculations, add your own custom UI and much more. And since Aviation Flights uses Jquery, you can do anything it can as well.
Only you can see and execute your own code and it will work both on desktop and mobile. Because the code loads by default on page load, it is always recommended writing Javascript functions and calling them after the page has loaded. This reduces the potential for errors, such as the map object not being found, which means it hasn't loaded yet.
Map Presets are custom JSON files that stores configurations about the map. By default it will save a preset your user account and uses that to sync your map settings between devices (which can be disabled in your account settings). You can also export a current map preset and import a JSON file map preset.
You can add your own configurations to the map preset JSON file that help you store settings with your custom API code. The interactive map uses a feature in which it gets all form inputs in the sidebar (viewable or hidden) and turns it into a JSON object. To have your custom settings be included in the default map preset behaviour add your hidden text input html into: <div id="custom-map-presets"></div>