Flightradar24 Card

Springvar · June 13, 2024, 9:45am

I’ve created a customizable card to view flight data from the Flightradar24 Integration.

Features:

Filter list based on complex custom criteria
Calculates distances and directions to observer based on tracker or fixed location
Calculates closest passing point and eta for approaching flights
Customizable units
Configurable toggles to dynamically control filter
Optional radar view to visualize flights in relation to observer
Zoomable radar view
Select flights in radar view (if excluded by filter)
Add local features (cities, runways, geographic outlines) to radar view

Require sensor data from Flightradar24 Integration (or compatible) to work.

poudenes · June 13, 2024, 10:59am

Installed it via HACS. Reload. Clear cache. no card to use…
The resource line is added in dashboard. Did restart HA… no result

Springvar · June 13, 2024, 11:10am

It will not show up as a selectable card, so you must add is as a manual card with

type: custom:flightradar24-card

If it still doesn’t show anything, do you have access to the console log in your browser? Do you see any logged errors?

vincen · June 13, 2024, 4:35pm

Very nice, thanks for the share do you plan to add an option to be able to add in background a map like OSM ?

Springvar · July 6, 2024, 6:20pm

v0.0.8 Released

Custom sorting
Filter radar view

somansch · July 18, 2024, 2:56pm

Great and powerful card!

Thanks for adding the template documentation and samples. I was able to customize a bit and found a restriction.

I want to translate/change “Alt:”, “Spd:”, “Hdg:” and “Dist:”, but this content is part of your fields “alt_info”, “spd_info”, “hdg_info” and “dist_info”.

Is it possible to exclude it from there?

Springvar · July 21, 2024, 8:48am

Try this beta release and see if it has what you need.

somansch · July 24, 2024, 4:56pm

I did some tests, but could not get it to work. I want to replace “Dist:” with “Distanz:”. I reloaded 0.0.8 Beta in first test and then downloaded the latest flightradar24-card.js manually.

This is my config:

templates:
  aircraft_info: >-
    ${[flight.aircraft_model, flight.aircraft_registration].filter((el) =>
    el).join(" ---- ")}
  origin_info: >-
    ${[flight.airport_origin_city, tpl.departure_info,
    flight.origin_flag].filter((el) => el).join("")}
  destination_info: >-
    ${[flight.airport_destination_city, tpl.arrival_info,
    flight.destination_flag].filter((el) => el).join(" ")}
  flight_status: >-
    <div>${[flight.alt_info, flight.spd_info, flight.hdg_info].filter((el) =>
    el).join(" - ")}</div>
  dist_info: >-
    ${flight.dist_in_unit ? "Distanz: " + flight.dist_in_unit +
    flight.approach_indicator : undefined}
  position_status: >-
    <div>${[tpl.dist_info, flight.direction_info].filter((el) => el).join(" -
    ")}</div>
  proximity_info: >-
    <div style="font-weight: bold; font-style: italic;">${flight.is_approaching
    && flight.ground_speed > 70 && flight.closest_passing_distance < 15 ?
    `Ankunft in ${Math.round(flight.eta_to_closest_distance)} Minute(n)` :
    ""}</div>

…and the result:

jchh · September 8, 2024, 11:16am

This is awesome!

Is there any way to adjust the radii of the rings? I am quite interested in a 10km view, so would love to have the rings at 2km intervals.

Springvar · September 18, 2024, 4:03pm

Sorry, I’ve been a bit busy lately, and are currently in the process of selling my house. Will get back to this as soon as I can.

jchh · October 26, 2024, 6:44am

Added in v0.0.9 - thanks, @Springvar

ronschaeffer · December 4, 2024, 2:30pm

Thanks for the great card, @Springvar

Is there a way to show only the first flight in the list from the Flightradar24 sensor so that only one flight at a time is ever showing?

Thanks

the_armed_programmer · December 17, 2024, 3:18pm

Is there a way to adjust the size of the radar and hide the info? I’d like to split it into two side-by-side cards to make better use of screen space.

jchh · December 17, 2024, 6:28pm

Yes! …to the hiding part anyway

I asked the same question a while back and someone was very helpful.
This is what I ended up with.

radar without the flights:

    - type: custom:flightradar24-card
      no_flights_message: ""
      filter: # filters flight list (not the radar)
        - field: altitude
          comparator: gte
          value: 999999
      radar:
        range: 5.1
        ring_distance: 1

flights without the radar:

    - type: custom:flightradar24-card
      no_flights_message: Nothing in range.
      sort:
        - field: distance
          order: desc
      templates:
        tail_image: >-
          <img style="float: left; margin-right: 5px;"
          src="https://content.airhex.com/content/logos/airlines_${flight.airline_icao}_90_90_f.png?proportions=keep"
          />
        header: ${tpl.tail_image}${tpl.flight_info_element}
      radar:
        hide: true

Fumble · March 18, 2025, 3:03pm

It doesn’t work for me:

Not dealt with custom cards before, so could be user error…
Ideas?

jchh · March 18, 2025, 4:31pm

Have you added the card via HACS?

cuttyhunk · May 9, 2025, 12:20am

This card is awesome! I’m trying to figure out if there’s a way to filter and sort the list of aircraft in the area into two groups. I would love to take this style of card

and then split the aircraft into arrivals and departures. I live near an airport and it would be cool to quickly look and see what flight is about to land/take off. This fucntionality might already be in card, I have read over the documentation, but I think I’m missing something.

Thanks!

jchh · May 9, 2025, 11:30am

I think you can filter by direction (coming, going) but only from your location.

cuttyhunk · May 9, 2025, 5:10pm

I (ChatGPT) ended up getting it working more or less the way I want it using filters as @jchh mentioned. Thank you!

Here is the yaml I’m using if anyone else wants to leverage this:

type: custom:vertical-stack-in-card
cards:
  - type: iframe
    url: >-
      https://www.flightradar24.com/simple?lat=32.73&lon=-117.18&z=13&labe11=reg&size=small
    aspect_ratio: 100%
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - type: markdown
            content: "### 🛬 Arrivals"
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                  padding: 4px 16px;
                }
          - type: custom:flightradar24-card
            title: ""
            entity: sensor.flightradar24_current_in_area
            filter:
              - type: AND
                conditions:
                  - field: airport_destination_code_iata
                    comparator: eq
                    value: SAN
                  - field: altitude
                    comparator: gte
                    value: 0
            templates:
              tail_image: >-
                <img style="float: left; margin-right: 6px; height: 40px;"
                src="https://content.airhex.com/content/logos/airlines_${flight.airline_icao}_90_90_f.png?proportions=keep"/>
              header: >-
                ${tpl.tail_image}<b>${flight.airline_short}
                ${flight.flight_number}</b> from ${flight.airport_origin_city}
            radar:
              hide: true
      - type: vertical-stack
        cards:
          - type: markdown
            content: "### 🛫 Departures"
            card_mod:
              style: |
                ha-card {
                  background: none;
                  box-shadow: none;
                  padding: 4px 16px;
                }
          - type: custom:flightradar24-card
            title: ""
            entity: sensor.flightradar24_current_in_area
            filter:
              - type: AND
                conditions:
                  - field: airport_origin_code_iata
                    comparator: eq
                    value: SAN
                  - field: altitude
                    comparator: gte
                    value: 0
            templates:
              tail_image: >-
                <img style="float: left; margin-right: 6px; height: 40px;"
                src="https://content.airhex.com/content/logos/airlines_${flight.airline_icao}_90_90_f.png?proportions=keep"/>
              header: >-
                ${tpl.tail_image}<b>${flight.airline_short}
                ${flight.flight_number}</b> to
                ${flight.airport_destination_city}
            radar:
              hide: true