I am trying to make a temperature layer on a map however i am having some trouble trying to get this layer to work. I want it so that the data is displayed on the map as a heat map not as a graph like the examples i have looked up online.
I have tried a similar thing to what i have done with the population aspect of the map layer:
def access_map(self, latitude, longitude, layer='Population, Temperature, Landmarks'):
# Create a map using Folium
map = folium.Map(location=[latitude, longitude], zoom_start=6)
if layer == "Population":
# Connect to the database
conn = sqlite3.connect("world_cities_population.db")
cur = conn.cursor()
# Query the database for the data
cur.execute("SELECT city, latitude, longitude, population FROM cities")
data = cur.fetchall()
# Prepare the data for the heat map
heat_data = [[float(lat), float(lon), float(pop)] for city, lat, lon, pop in data]
# Add population data layer to the map
population_layer = folium.FeatureGroup(name="Population Layer")
# Add the heat map layer to the map
heat_map = HeatMap(heat_data)
heat_map.add_to(population_layer)
# Add the population layer to the map
population_layer.add_to(map)
# Get the population values
populations = [pop for _, _, _, pop in data]
# Define the color scale for the legend
max_population = max(populations)
min_population = min(populations)
color_scale = folium.LinearColormap(['green', 'yellow', 'red'], vmin=min_population, vmax=max_population)
# Add markers to the map
for name, latitude, longitude, population in data:
marker = folium.CircleMarker(
location=[latitude, longitude],
radius = 3,
popup=f"City: {name}<br>Population: {population}",
color = '#9d54f0',
fill = True,
fill_color = '#9d54f0',
tooltip=name
)
marker.add_to(population_layer)
# Create the legend
legend_html = '''
<div style="position: fixed;
bottom: 50px; left: 50px; width: 150px; height: 120px;
border:2px solid grey; z-index:9999; font-size:14px;
background-color: rgba(255, 255, 255, 0.9);
">
<p><span style="background: #84aaec; padding: 5px;"></span> Very Low Population </p>
<p><span style="background: green; padding: 5px;"></span> Low Population</p>
<p><span style="background: yellow; padding: 5px;"></span> Medium Population</p>
<p><span style="background: red; padding: 5px;"></span> High Population</p>
</div>
'''
However this has not worked. Anyone have any tips?