Folium

width, height = 480, 350

fig = Figure(width=width, height=height)

m = folium.Map(

    location=location,

    tiles=tiles,

    width=width,

    height=height,

    zoom_start=zoom_start

)

fig.add_child(m)

fig.save(os.path.join('results', 'WidthHeight_0.html'))

fig

 Using geoJSON

import json

import branca.colormap as cm

with open('germany_vs_denmark_euro2024_DTNlightningAPI.geojson', 'r') as file:

    data = json.load(file)

m = folium.Map(location=[51.4925888, 7.4518574], zoom_start=11)

colormap = cm.LinearColormap(

    colors=["#0d0887", "#7e03a8", "#cc4778", "#f89540", "#f0f921"],

    vmin=0,

    vmax=3,

)

m.add_child(colormap)

for feature in data['features']:

    properties = feature['properties']

    coordinates = feature['geometry']['coordinates']

    folium.CircleMarker(

        location=[coordinates[1], coordinates[0]],  # [latitude, longitude]

        radius=10,  # Fixed radius of 10

        popup=folium.Popup(

            f"Category: {properties['15_min_category_from_kick_off']}<br>"

            f"UTC Time: {properties['utc_time']}<br>"

            f"Local Time: {properties['local_time']}"

        ),

        color=colormap(properties["15_min_category_from_kick_off"]),

        fill=True,

        fillColor=colormap(properties["15_min_category_from_kick_off"]),

        fillOpacity=0.7,

        stroke=True,

        weight=2,

    ).add_to(m)

# Add the black circle

folium.CircleMarker(

    location=[51.4925888, 7.4518574],

    radius=20,

    color="black",

    fill=True,

    fillColor="black",

    fillOpacity=0.7,

    stroke=True,

    weight=2,

).add_to(m)

folium.LayerControl().add_to(m)

m