How to plot geographic maps in Plotly Dash using mapbox?

Dash Python
1

I have a dash app with a figure like this:

	fig = go.Figure(go.Scattermapbox(
	        lat=df.Lat,
	        lon=df.Lon,
	        mode='markers',
	        marker=go.scattermapbox.Marker(
	            size=17,
	            color='rgb(255, 0, 0)',
	            opacity=0.7,
	        ),
	        text=df.text,
	    ))

	fig.update_layout(
	    autosize=True,
	    hovermode='closest',
	    width=700,
	    height=900,
	    mapbox=go.layout.Mapbox(
	        accesstoken=mapbox_access_token,
	        bearing=0,
	        center=go.layout.mapbox.Center(
	            lat = -33.866,
	            lon = 151.205
	        ),
	        style="satellite-streets",
	        pitch=0,
	        zoom=13.8
	    ),
	)
	
	return fig.show()

But the map is displayed in a different page:

enter image description here
enter image description here

How do I display the map in the same page?

And also, as an aside, there is a weird error Cannot read property 'layout' of null that is always present; it does not interfere with execution flow, but I would just like to get rid of it anyway. How do I do that? And also, how do I get rid of that blank graph lines before the graph is displayed?

2

I’m not able to run your code right now, but I would guess the layout of null error may be due to your callbacks not having a valid return value when the app first loads. Try adding the following else clause to both callbacks:

else:
  return dash.no_update

I’m not experienced with Mapbox to provide assistance with those questions…

1 Like
3

@flyingcujo Thanks a lot! That somehow solved both my issues! :smiley: