How to Use a Custom Image as a Pin on a Mapbox Map in Streamlit?

[Kevin9]

Hello everyone,

I’m trying to display custom pins on a Mapbox map within a Streamlit application, but I’m running into issues when trying to use a custom image as the pin marker.

Here’s what I’ve tried so far:

1. Current Setup:

   • I’m using Plotly with Streamlit to create an interactive map.
   • The map style is carto-positron from Mapbox.
   • I want to replace the default markers with custom icons hosted on Google Drive.

2. Code Attempt:

   import streamlit as st
   import pandas as pd
   import plotly.graph_objects as go
   from sqlalchemy import create_engine
   from sqlalchemy.orm import sessionmaker
   from common import Lead, Client, Prospect, DATABASE_URL
   import requests
   
   # Configuration
   st.set_page_config(page_title="Carte Interactive des Données Commerciales", layout="wide")
   
   # Database connection and data loading (details omitted for brevity)
   
   # Map creation
   fig = go.Figure()
   
   # Custom icon URLs
   lead_icon_url = "https://drive.google.com/uc?export=view&id=1VCTvIxYJf1unlZQsShDE0ri-NWisIVoX"
   
   if show_leads:
       fig.add_trace(go.Scattermapbox(
           lat=leads['latitude'].dropna(),
           lon=leads['longitude'].dropna(),
           mode='markers',
           marker=go.scattermapbox.Marker(
               size=15,
               symbol=['marker'] * len(leads),
               opacity=0.7
           ),
           text=leads['entreprise'],
           hoverinfo='text',
           name='Leads ADCHASE'
       ))
   
   # Additional configurations...
   
   # Display map
   st.plotly_chart(fig, use_container_width=True)
   

3. Issue:

   • I tried to use the icon property inside scattermapbox.Marker to set the custom image, but it resulted in an error because Plotly’s scattermapbox.Marker does not support direct image URLs for icons.

4. Objective:

   • I want to use a custom image as the pin marker on the map instead of the default symbols.

Questions:

• Is there a way to use a custom image as a pin in a Plotly Mapbox map in Streamlit?
• If not, is there an alternative approach or workaround that could achieve the same goal?

Any advice or suggestions would be greatly appreciated!