Scatter_geo custom marker images. Is there a way to do what I did, but better?

📊 Plotly Python
1

Hello,

I’m trying to combine a scatter_geo and choropleth map and render it in Django. For the markers on the scatter_geo, I would like to use custom marker images. I’m also using a this [geojson] (World Countries (Generalized)) from arcgis. The purpose of this map is for users to see the amount of items which are due per region. The lat/lon of each scatter point is mostly arbitrary, just a point in the middle of the region that makes sense. The choropleth is colored by region. In total there are 9 regions, but they cover the globe.

I’ve successfully accomplished this by using this post from RenaudLN. However, it was pretty labor/time intensive, and I was hoping I could post here for some tips. I know I’m asking about the custom marker images, but if you see anything else I’m doing wrong, let me know

Here is a sample of my code


data = {'AUS' {'lat' : -17.60, 'lon' : 133.48,'x' : 4.1, 'y' : .8}}

#call to django Model to fill the rest of the data
for k, v in data.items():
    x = TaskItMetrics.objects.filter(region=k)
    v['total'] = len(x)
    v['text'] = 'Total items: ' + str(v['total'])

df = pd.DataFrame(data).T

#Gives me a df that looks like this:
#                  lat           lon          total        x       y        text
#AUS          -17.6      133.48    10             4.25  1.05  Total items: 10

#creating the scatter_geo
fig = px.scatter_geo(df, lat='lat', lon='lon',
                    text='text',
                    projection="natural earth",                            )   
fig.update_layout(paper_bgcolor='rgba(0,0,0,0)', 
                    plot_bgcolor='rgba(0,0,0,0)', 
                    showlegend=False, 
                    dragmode=False                         )
fig.update_geos(showcountries=False, showlakes=False,
                bgcolor='rgba(0,0,0,0)',
                projection_scale=0.75,
                framecolor='#e83aff',                    )  
fig.update_traces(textposition='top center', textfont_size=18, textfont_color='#002EFF',
                    texttemplate=text_template,
                    hoverinfo='text', hovertemplate=text_template,                        )
    
#adding the images
for i, row in df.iterrows():
        imgname = row.name
        xpos = data[row.name]['x']
        ypos = data[row.name]['y']
        fig.add_layout_image(
            dict(
                source=Image.open(f"metrics/utils/{imgname}.png"),
                xref="x",
                yref="y",
                xanchor="center",
                yanchor="middle",
                x=xpos,
                y=ypos,
                sizex=.25,
                sizey=.25,
                sizing="contain",
                opacity=0.8,
                layer="above"
                )
            )

#Creating the choropleth
with open('metrics/utils/countryboundries.geojson') as f:
    geojson = json.load(f)

with open('metrics/utils/countries.xlsx', 'rb') as f:
    df2 = pd.read_excel(f)

fig2 = px.choropleth(df2, geojson=geojson, locations='FID', color='Region',
                     color_discrete_map=colors,
                     featureidkey='properties.FID'                     )
  
fig2.update_layout(paper_bgcolor='rgba(0,0,0,0)',
                height=1050, width=2500, showlegend=False,)
  
#combining the two charts
for data in fig2.data:
    fig.add_trace(data)

#turning the chart into html
html = fig.to_html(include_plotlyjs=False, full_html=False)

Here is part of what I end up with (Ignore the font color, I’m working on those :))
image

So, like I said this is a very labor intensive process. I tried to feed in my lat/long into the X,Y value for the “fig.add_layout_image”, similar to the example in the post above, however this didn’t work. To figure out the x,y values I copied pasted the block starting with “for i, row in df.iterrows():” several times in a row increased x and y by .1, which gave me:

image

which made me realize it was cutting up my map into a 4x5 grid, where each 1x1 grid could be broken down into a 10x10 grid. From there I just had to just eyeball the x and y for each image and add it to my “data” dict. This is not a good method, because if I change the map, say the projection scale to .7, everything gets thrown off:

image

and I have manually change every point. Is there a way to automate this? Thanks!