Cleaning up a small project - 4 Questions about Tooltips

[boltyboi]

Hi, I'm trying to do a fun personal project using Folium (for the first time) where I scrape flight radar data and plot it on a map (example screenshot shown below). So far all seems good, but a glaring issue which you can see on the map attached is the tooltips for each marker will often overlap each other or cover other important elements.
I have 4 questions:
Firstly, is there any way to enable some kind of overlap-avoidance feature (if this even exists!) to clean up this mess - Ideally if 2 tooltips would otherwise overlap ontop of each other it would push one left and one right (or something to that effect) so they don't overlap anymore.
Secondly (and mostly unrelated) is there any way I could remove the tooltip's white bubble entirely? I was thinking it might look nicer if I simply had white text over a black background with no bubble behind it, but I couldn't find any information on how I could remove the tooltip bubble.
Thirdly, is there any way I can force the tooltip to never overlap with the tail I'm generating? The point of the tail here is to visually show you the heading of the aircraft so if it's covered by the tooltip it's whole purpose is defeated.
Lastly, is there any way to manually push a tooltip further away from its marker? This would be done to prevent the tooltip from overlapping with the triangular element (which is supposed to be the aircraft)

Here's a copy of all the code used in this mini-project (you may need to install this unofficial FlightRadar24 API i found online if you want to recreate this on your machine).:

import folium as f
from FlightRadar24 import FlightRadar24API
from math import sin, cos, radians

""" FlightRadar24 WebScraper Main """
lat = 35.0858056
long = 33.2295
rad = 200000  # I think this is in feet???

fr = FlightRadar24API()
area = fr.get_bounds_by_point(lat, long, rad)
flights = fr.get_flights(bounds=area)

''' Old Code I don't want to get rid of just in case I might need it
flati = [p.latitude for p in flights]  # flight latitude (unitless)
flong = [p.longitude for p in flights]  # flight longitude (unitless)
fnumb = [p.number for p in flights]  # flight no. (dunno what this is for?)
fgvel = [p.get_ground_speed() for p in flights]  # horizontal speed/ kts
fvvel = [p.get_vertical_speed() for p in flights]  # vertical speed/ kts
fidno = [p.id for p in flights]  # aircraft ID number (dunno what used for)
fcall = [p.callsign for p in flights]  # aircraft callsign
fhead = [p.heading for p in flights]  # aircraft heading
falti = [p.get_altitude() for p in flights]  # aircraft altitude
ficao = [p.airline_icao for p in flights]  # redundant, callsign includes icao
fcode = [p.aircraft_code for p in flights]  # this is the aircraft make
'''

flightdata = []
for p in flights:
    aircraft_info = {
        'Latitude': p.latitude,
        'Longitude': p.longitude,
        'Flight Number': p.number,
        'Ground Speed': p.get_ground_speed(),
        'Vertical Speed': p.get_vertical_speed(),
        'ID Number': p.id,
        'Callsign': p.callsign,
        'Heading': p.heading,
        'Altitude': p.get_altitude(),
        'ICAO Airline Designator': p.airline_icao,
        'Aircraft Model': p.aircraft_code
    }
    flightdata.append(aircraft_info)

''' The functions get_...() outputs result WITH UNITS.
The functions that don't have () just give the BARE NUMBERS.
Keep this in mind if you dont wanna bother with units.
FOR SOME REASON SOME FUNCTIONS LIKE airline_name DON'T EVEN WORK :( '''


def flightlist():
    if flights == []:
        print("No flights are nearby.")
    else:
        return flights


print(flightlist())

""" Folium Map Tools Main """

defcolour = '#FFA500'
zoom = 8
tailmult = 0.3
flightmap = f.Map(location=[lat, long], zoom_start=zoom,
                  tiles="Cartodbdark_matternolabels", width="100%", weight="100%")
for part in flightdata:

    coords = (part['Latitude'], part['Longitude'])
    geninfo = (
        f"<b>{part['Callsign']}</b><br>"
        f"Model: {part['Aircraft Model']}<br>"
        f"Ground Speed: {part['Ground Speed']}<br>"
        f"Vertical Speed: {part['Vertical Speed']}<br>"
        f"Altitude: {part['Altitude']}<br>"
        f"Heading: {part['Heading']}°"

    )

    angle = part['Heading'] - 90

    f.features.RegularPolygonMarker(
        coords,
        number_of_sides=3, rotation=angle, color=defcolour, fill=True,
        # icon=icon,
        tooltip=f.Tooltip(
            permanent=True,
            sticky=False,
            text=geninfo
        )
    ).add_to(flightmap)

    lc = [
        coords,
        (part['Latitude'], part['Longitude']),
        (part['Latitude'] - tailmult*cos(radians(part['Heading'])),
         part['Longitude'] - tailmult*sin(radians(part['Heading']))),
    ]

    f.PolyLine(
        locations=lc,
        color=defcolour,
        weight=3,
    ).add_to(flightmap)

flightmap.save("flightmap.html")

[hansthen]

Hey, that sounds like a nice project. Some of the things you want to achieve are quite difficult using only Python, especially if you also allow the user to zoom in and zoom out.

So to answer your questions

1. Not really. You might be able to do it by adding JsCode objects as event handlers and keeping a list of all Tooltips in javascript and do the calculations for overlap yourself. However, I don't think that is a feasible solution.
2. and 3. and 4. Have a look at the offset, opacity and direction parameters.
   These are not documented in Folium, but the Leaflet documentation is here: https://leafletjs.com/reference.html#tooltip. You can just add them as keyword parameters when creating the folium.Tooltip.

[boltyboi]

Thanks for the response - I've taken a look at the solutions for 2, 3, and 4 - The direction and offset has been quite useful to help reduce overlap between the tooltip and icon. As for the opacity, it seems to affect the entire tooltip (including the text) meaning an opacity of 0.0 is unfortunately identical to having no tooltip in the first place (this is also visible in the image).

This is probably as close as I can get to a solution and it already functions quite nicely now, although I do have one more question:
I've been attempting to make the map update in real-time: You can see in previously sent code that my program calls the scraper for data which is used to draw on the map (somewhere around line 12 is where this happens). However, when I looked through the 'realtime' plugin documentation I gather that it only works if you give it a url to draw data from.

As the cherry on top of this project, do you know of any ways I could allow Realtime to call the aforementioned function for its data rather than using a url? Regardless, thanks for the help.

[hansthen]

If opacity does not do what you want, you might also try looking at css styling for the tooltip. I found an example online here: https://gist.github.com/Gordonei/6f40b6d15e1a00fce8281f5e3165ece6.

[boltyboi]

Just a heads up for future reference: It looks like the white tooltip border which folium generates cannot be removed regardless of how you style your tooltip, it seems whatever styling choices you make are simply placed inside of the tooltip's white box.

[hansthen]

As for your Realtime question, it is not possible for Realtime to call a python function. There are three options I can think of for your use case:

1. Wrap your function that exposes the scraped data in a python application server like Flask or FastAPI.
2. Rewrite your application to use Streamlit and streamlit-folium. This way you can periodically update the items on the map. (And you also don't need Realtime).
3. Instead of calling the scraper from python create a JsCode object, where you call it from javascript. You can have a look at the ISS examples for Realtime for inspiration.

In all three cases you need to introduce new technology (Flask, Streamlit or javascript). My guess is that option 2 is easiest to learn if you have no prior knowledge of any of the three.

[boltyboi]

I will take your advice and look into these alternatives, thank you for the help!