search

plotly / plotly.py

The interactive graphing library for Python :sparkles: This project now includes Plotly Express!
https://plotly.com/python/
MIT License
16.06k stars 2.54k forks source link

Mapbox Standard Map Style Not Showing #4463

Open Sang-Buster opened 9 months ago

Sang-Buster commented 9 months ago

Hi,

Mapbox recently came out with an absolutely stunning new map style named standard see demo, which requires GL JS 3, I was trying to import the script and stylesheet into my dash app externally as follows,

mapbox_scripts = ['https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js']
mapbox_stylesheets = ['https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css']
app = dash.Dash(__name__, external_stylesheets=mapbox_stylesheets, external_scripts=mapbox_scripts)

Which indeed is imported through browser inspector. However, it did not show the base map, it's just a blank background with some of my data point markers I manually put in. And I have tried this procedure using in just a html file, which does load the map properly, this may be a feature request or a bug report. I have tried all other mapbox style with different versions, which they all works and looks great, but it would be wonderfult if this stunning 3d map style is embded into plotly.

Thanks!

Coding-with-Adam commented 9 months ago

hi @Sang-Buster Are you able to share the full dash app with us, or at least a minimal reproducible example? Are you using your own mapbox token for this?

Sang-Buster commented 9 months ago

hi @Sang-Buster Are you able to share the full dash app with us, or at least a minimal reproducible example? Are you using your own mapbox token for this?

Hi, yes I'm using my own mapbox token, and here is the dash app source code repo. Please run the app.py from the root directory of the project file, the token needs to be put inside /src/components/map_component.py file and I have the steeet style as of now, I did try using my own custom style url with the standard style it does not work either.

Coding-with-Adam commented 9 months ago

Thank you, @Sang-Buster . I'm getting an sqlite3 error when I try to run your app.

sqlite3.OperationalError: unable to open database file

You know how I can fix that?

Sang-Buster commented 9 months ago

Thank you, @Sang-Buster . I'm getting an sqlite3 error when I try to run your app.

sqlite3.OperationalError: unable to open database file

You know how I can fix that?

Hi, I'm not sure what is causing this, but you can try to rerun the /src/data/agent_fake_data.py file, to rewrite some fake data into the .DB file and terminate the fake data generation whenever you want to. Let me know if the problem presists. Thanks again for the quick response and help!

Sang-Buster commented 9 months ago

Hi,

Mapbox recently came out with an absolutely stunning new map style named standard see demo, which requires GL JS 3, I was trying to import the script and stylesheet into my dash app externally as follows,

mapbox_scripts = ['https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js']
mapbox_stylesheets = ['https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css']
app = dash.Dash(__name__, external_stylesheets=mapbox_stylesheets, external_scripts=mapbox_scripts)

Which indeed is imported through browser inspector. However, it did not show the base map, it's just a blank background with some of my data point markers I manually put in. And I have tried this procedure using in just a html file, which does load the map properly, this may be a feature request or a bug report. I have tried all other mapbox style with different versions, which they all works and looks great, but it would be wonderfult if this stunning 3d map style is embded into plotly.

Thanks!

Oh I just thought this culd be the file directory naming issue, I'm using Windows so it uses / maybe in Linux or max uses different folder separate symbols, that said, you will need to change file directory naming in the read_data function in every component.py script in the components folder. Or this can be solved if you run the app.py from root directory, do not cd into src folder.

Coding-with-Adam commented 9 months ago

Wonderful, now I got it to run. This is with mapbox://styles/mapbox/streets-v12.

This also has the script and stylesheet you importe:

mapbox_scripts = ['https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js']
mapbox_stylesheets = ['https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css']

image

Did you not get the same result?

Sang-Buster commented 9 months ago

Wonderful, now I got it to run. This is with mapbox://styles/mapbox/streets-v12.

This also has the script and stylesheet you importe:

mapbox_scripts = ['https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js']
mapbox_stylesheets = ['https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css']

image

Did you not get the same result?

Right the street map style does not rely on the v3 script and stylesheet, so you can delete them and the map will still show for all other maps type except for standard style. So I was trying inject them and it does get injected but it was still not showing. And I know my mapbox token is fine and using my custom standard style url or using mapbox://styles/mapbox/standard works as I have tested it out in a html file.

Coding-with-Adam commented 9 months ago

@LiamConnors would it be possible to add the ability to assign the new standard map style to the mapbox style attribute?

Sang-Buster commented 9 months ago

Sorry, in addition is it possible for the scattermapbox to be 3d if we're using standard style, similar to scatter_3d function? It seems to me scattermapbox only supports 2d plot with lon or lat, a third dimentsion of elevation/elev for pint markers will make it look great. Thanks for the considerations .

gvwilson commented 1 month ago

@archmoj does this connect with your recent work at all?