Introduction to Folium Maps GIS

Make a folium map of drone data

In [ ]:
In [15]:
import folium
import pandas as pd
from pathlib import Path
from jinja2 import Template

# Sample data
data = pd.DataFrame({
    'latitude': [40.7027809, 44.7296478, 45.513],
    'longitude': [-73.912115, -93.3436703, -122.705],
    'photo': ['photo1.jpg', 'photo2.jpg', 'photo3.jpg'],
    'timestamp': ['2024-06-25 10:00:00', '2024-06-25 10:05:00', '2024-06-25 10:10:00'],
    'description': ['Ridgwood, New York', 'Savage, Minnesota', 'Description of photo 3']
})

# Create a map centered around the average coordinates
map_center = [data['latitude'].mean(), data['longitude'].mean()]
m = folium.Map(location=map_center, zoom_start=13)

# Add markers with popups for each photo
for idx, row in data.iterrows():
    popup_html = f"""
    <strong>Description:</strong> {row['description']}<br>
    <strong>Timestamp:</strong> {row['timestamp']}<br>
    <img src='{row['photo']}' alt='Photo' width='200'>
    """
    folium.Marker([row['latitude'], row['longitude']], popup=folium.Popup(popup_html, max_width=300)).add_to(m)

# Save the Folium map to a string
folium_map = m._repr_html_()

# Load the Jinja2 template
template_html = """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drone Photos Map</title>
</head>
<body>
    {{ folium_map | safe }}
</body>
</html>
"""

template = Template(template_html)
rendered_html = template.render(folium_map=folium_map)

# Save the rendered HTML to a file
output_path = Path.cwd() / 'map.html'
with open(output_path, 'w') as f:
    f.write(rendered_html)

# Display the map in the notebook
m
Out[15]:
Make this Notebook Trusted to load map: File -> Trust Notebook

links

social