Kriko
June 29, 2024, 10:34pm
1
Hi everyone, hope you’re doing fine. I know this is a question that has already been asked in the past, but two things happen:
In some cases the libraries “suffer” updates
It’s still not clear enough (or at least for me)
I’ve been working on a personal project that consists on a map of coffee places in my city. I managed to create it and host it with azure.
I’m still defining the format, colors, etc. but the main problem I have is that I don’t want the default circles, neither de maki icons from mapbox. I want to add my custom markers, and I can’t understand in which cases that can be done and when it can’t. (I already have the token in case you ask).
As my code is already written using go.scattermapbox I would like to find a way to use my custom Icons markers. If not, I will try other ways. I’ve seen that using “fig.add_layout_image” there’s no problem at all, or even using dash leaflet but well, I want to figure it out.
Thanks!
1 Like
Emil
June 30, 2024, 6:54am
2
If you want to use a plotly figure, @RenaudLN curated an elegant example on how this can be done,
I don’t think you can do it automatically but you can use the Image interface to get to the expected result.
For instance you could do the following (in the example I put the round flag icons in the folder flags/png/512):
from PIL import Image
import plotly.express as px
df = px.data.gapminder().query("year==2007")
fig = px.scatter(
df,
x="lifeExp",
y="gdpPercap",
hover_name="country",
hover_data=["lifeExp", "gdpPercap", "pop"]
)
fig.update_traces(marker_color="rgba(0,0,0…
As you note, another option would be to use dash-leaflet
. If you go down that path, you can use the Marker
component with custom icon(s),
Marker (dash-leaflet.com)
or the GeoJSON
component for more performant rendering (best when you have > 100 markers),
GeojsonTutorial (dash-leaflet.com)
2 Likes
Id recomend using dash leaflet or dash deck, go.scattermapbox isnt my preferred choice when building apps that have a big focus on the map.
Personally with how many coffee shops you are dealing with I’d go the route of @Emil Geojson
Custom Cluster and Icons on GeoJSON: [image]
# dash_extentions.javascript import assign
point_to_layer_js = assign("""function(feature, latlng){
const flag = L.icon({iconUrl: `https://cdn.discordapp.com/attachments/419291925322006528/1178069819707359242/mining_site1.png?ex=6574ce04&is=65625904&hm=8c23df4651c5a131cbfb37ee155aa1edd0e7c9608a33f9bcc862df09875396b9&`, iconSize: [64, 48]});
return L.marker(latlng, {icon: flag});
}
""")
cluster_to_layer = assign("""function(feature, latln…
2 Likes
Kriko
June 30, 2024, 5:34pm
4
yeah, it definetly seems that dash leaflet is the best option, so goodbye to mapbox, thanks!
Kriko
June 30, 2024, 5:35pm
5
yes I’ve seen the one from RenaudLN, I think I will end up using dash leaflet, thanks!