For Developers

Interact with the data on meteoAV

Get Started

One of the best things about meteoAV is that with this 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!

Map Elements

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="right-click"></div>. Lastly, at the top right corner you can inject custom short alert messages, particularly useful on mobile, on: <div id="extra-info"></div>.

Start the API Code Editor »

Interacting with Existing Layers

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
}

Weather Layers

METARs

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:

Field
Description
metar_icao_code
the icao code of the weather station
metar_flight_category
the reported flight category
metar_weather
the reported weather
metar_temperature
the reported temperature
metar_dewpoint
the reported dewpoint
metar_altimeter
the reported altimeter
metar_celing
the reported cloud ceiling
metar_sea_level_pressure
the reported sea level pressure
metar_wind_direction
the reported wind direction
metar_wind_speed
the reported wind speed
metar_wind_gust
the reported wind gust
metar_visibility
the reported visibility
TAF

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:

Field
Description
taf_icao_code
the airport icao code
taf_issue_time
the TAF issue date & time
taf_valid_time_from
the date & time the TAF is valid from
taf_valid_time_to
the date & time the TAF is valid to
taf_forecast_type
the forecast type
taf_wind_speed
the forecasted wind speed
taf_wind_direction
the forecasted wind direction
taf_visibility
the forecasted visibility
taf_ceiling
the forecasted cloud ceiling
taf_cover
the forecasted cloud cover
taf_flight_category
the forecasted flight category

PIREPs

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:

Field
Description
pirep_airep_type
the pirep airep type
pirep_aircraft_type
the aircraft type
pirep_flight_level
the flight level
pirep_flight_level_type
the flight level type
pirep_turbulence_type
the reported turbulence type
pirep_icing_type
the reported icing type
pirep_temperature
the reported temperature
pirep_wind_direction
the reported wind direction
pirep_wind_speed
the reported wind speed
pirep_cloud_cover
the reported cloud cover
pirep_cloud_base
the reported cloud base
pirep_cloud_top
the reported cloud top
pirep_raw
the raw pirep report
SIGMETs

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:

Field
Description
sigmet_qualifier
defines how widespread the event is
sigmet_type
the type of the sigmet
sigmet_color
the hex color code of the sigmet
sigmet_description
description of the sigmet
sigmet_body
the full raw sigmet information

Lightning

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.

U.S. Storm Prediction Center

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:

Field
Description
spc_type
the weather type
spc_valid_from
the date & time the outlook is valid from
spc_valid_to
the date & time the outlook is valid to

U.S. Radar sites

To loop through the U.S. radar site markers, use:

for( i = 0; i < us_radar_sites.length; i++ ) {
  console.log(us_radar_sites[i].custom_property);
}

The table below shows the "custom properties" available for this layer:

Field
Description
radar_id
the radar id
radar_type
the radar type

Air Traffic Layers

Flight Information Region (FIR)

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:

Field
Description
fir_name
the FIR name
fir_prefix
the FIR prefix
fir_icao
the FIR ICAO code
EuroControl Regulations

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:

Field
Description
eurocontrol_delay
delay information
eurocontrol_start_time
the start time
eurocontrol_reason
the reason for delay
eurocontrol_average_delay
the average delay
eurocontrol_number_of_impacted_flights
the number of impacted flights
eurocontrol_duration
the duration

Oceanic Tracks Waypoints

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:

Field
Description
track_ident
the track ident
track_flight_levels
track flight levels
track_valid_from
the date & time the track is valid for
track_valid_to
the date & time the track is valid to
track_waypoint
the waypoint name
Oceanic Tracks Route

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:

Field
Description
track_ident
the track ident
track_flight_levels
track flight levels
track_valid_from
the date & time the track is valid for
track_valid_to
the date & time the track is valid to

Flight Tracker

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:

Field
Description
plane_callsign
the callsign of the flight
plane_hex
the hex of the aircraft
plane_altitude
the altitude of the aircraft
plane_speed
the speed of the aircraft
plane_vertical_speed
the vertical speed of the aircraft
plane_heading
the heading of the aircraft
plane_squawk
the squawk of the aircraft
plane_aircraft_type
the aircraft type
plane_registration
the aircraft registration
plane_departure_airport
the flight's departure airport
plane_arrival_airport
the flight's arrival airport

Community Feature Layers

Custom User Location

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:

Field
Description
user_location_name
the name of the location
User Photos

To loop through the User Photo markers, use:

for( i = 0; i < user_photos.length; i++ ) {
  console.log(user_photos[i].custom_property);
}

The table below shows the "custom properties" available for this layer:

Field
Description
user_photo_url
the URL of the photo
user_photo_weather
the reported weather condition
user_photo_runway_condition
the reported runway condition
user_pohoto_message
additional reported text regarding the submission

Location Layers

Current User Location

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:

Field
Description
user_speed
the speed of the user
user_heading
the heading of the user (if enabled)
user_altitude
the altitude of the user
User Click

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.


Airports

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:

Field
Description
airport_name
the name of the airport
airport_icao_code
the ICAO code of the airport
airport_iata_code
the IATA code of the airport
Waypoints

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:

Field
Description
waypoint_ident
the waypoint name

Runways

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:

Field
Description
runway_number
the number of the runway
Approach/Departure Waypoints

To loop through the Approach/Departure markers, use:

for( i = 0; i < sid_star_route_markers.length; i++ ) {
  console.log(sid_star_route_markers[i].custom_property);
  }

The table below shows the "custom properties" available for this layer:

Field
Description
waypoint_approach_type
the approach tpye name
waypoint_name
the name of the waypoint
waypoint_max_altitude
the max altitude for that waypoint as published
waypoint_min_altitude
the min altitude for that waypoint as published
waypoint_speed_limit
the speed limit for that waypoint as published

Approach/Departure Flight Route

To loop through the Approach/Departure Flight Route polyline, use:

for( i = 0; i < sid_star_route_line.length; i++ ) {
  console.log(sid_star_route_line[i].custom_property);
}

There are no custom properties for this layer.


Your Flight Layers For Patreon subscribers only

The layers below allow you to interact with your plotted flight route, available on the flights page.

SID Flight Route only

To loop through the SID flight route polyline, use:

for( i = 0; i < flight_route_line_sid.length; i++ ) {
  console.log(flight_route_line_sid[i].custom_property);
}

There are no custom properties for this layer.

STAR Flight Route only

To loop through the STAR flight route polyline, use:

for( i = 0; i < flight_route_line_star.length; i++ ) {
  console.log(flight_route_line_star[i].custom_property);
}

There are no custom properties for this layer.


Full Flight Route

To loop through the full flight route polyline, use:

for( i = 0; i < flight_route_line.length; i++ ) {
  console.log(flight_route_line[i].custom_property);
}

There are no custom properties for this layer.

Flight Waypoints

To loop through the flight route waypoint markers, use:

for( i = 0; i < flight_route_line_markers.length; i++ ) {
console.log(flight_route_line_markers[i].custom_property);
}

The table below shows the "custom properties" available for this layer:

Field
Description
waypoint_type
the type of the waypoint
(departure_airport, sid, waypoint, star, arrival_airport)
waypoint_name
the name of the waypoint
waypoint_max_altitude
the max altitude for that waypoint as published
waypoint_min_altitude
the min altitude for that waypoint as published
waypoint_speed_limit
the speed limit for that waypoint as published
waypoint_time
the UTC time when the waypoint is expected to be reached (based on live flight data or current location data)

Add your own Map Layers

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 meteoAV.


API Code Editor

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 meteoAV 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.

Start the API Code Editor »


Map Presets

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>