services/map_service.py

def generate_map_html(gps_coordinates, items):
    if not gps_coordinates or not items:
        return "<div>No data to display on map.</div>"

    # Calculate the center of the map
    avg_lat = sum(coord[0] for coord in gps_coordinates) / len(gps_coordinates)
    avg_lon = sum(coord[1] for coord in gps_coordinates) / len(gps_coordinates)

    # Generate Leaflet.js map HTML
    html = f"""
    <div id="map" style="height: 400px; width: 100%;"></div>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <script>
        var map = L.map('map').setView([{avg_lat}, {avg_lon}], 15);
        L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{
            attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }}).addTo(map);
    """

    # Add markers for cracks and potholes
    for coord, item in zip(gps_coordinates[-len(items):], items):
        color = 'red' if item['type'] == 'crack' else 'blue'  # Updated color for potholes
        severity = item.get('severity', 'Unknown')
        confidence = item.get('confidence', 0.0)
        obj_id = item.get('id', 'N/A')
        popup = f"Type: {item['type'].capitalize()}<br>ID: {obj_id}<br>Severity: {severity}<br>Confidence: {confidence:.2f}"
        html += f"""
        L.marker([{coord[0]}, {coord[1]}]).addTo(map)
            .bindPopup("{popup}")
            .setIcon(L.divIcon({{
                className: 'custom-icon',
                html: '<i class="fa fa-circle" style="color: {color}; font-size: 12px;"></i>',
                iconSize: [12, 12]
            }}));
        """

    html += """
    </script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    """
    return html