I need to put the North Side indicator also known as compass on my maps.
I want to use this on scattermapbox where i am plotting lat/lon data points.
something like what is shown in image. Can someone tell how we can do this in plotly dash. I have digged a lot into this but couldn’t find anything.
I am not sure this is possible with the Scattermapbox plot. If you only need points, you could use the Dash Leaflet component instead. It has no compass component included by default, but it should be doable to port a Leaflet one, e.g.
@Emil Thanks a lot. I looked at one of the leaflet example and really did not get how it can be used in place of compass. Here is code i am looking at:
import dash
import dash_leaflet as dl
import dash_html_components as html
app = dash.Dash()
app.layout = html.Div([
dl.Map(style={‘width’: ‘1000px’, ‘height’: ‘500px’}, center=[56.05, 10.25], zoom=10, children=[
dl.TileLayer(url=“https://a.tile.openstreetmap.org/{z}/{x}/{y}.png”),
])
])
if name == ‘main’:
app.run_server(debug=False)
Can we not anyhow specifically use compass??
The code that you have pasted should render the map itself. Before you can add a compass, you need to write a light wrapper of the leaflet compass component that you decide to use. Once the wrapper is in place, you can add the compas to the map by attaching it as a child to the Map component.
@Emil Any example u can direct me to. This is slight difficult for me to understand.
You can see some usage example here with other components (Markers, Polygons, …),
Regarding component implementation examples, you could look at the source code of the current components,
This will take me forever to understand how to add compass to these maps. I tried the example u have shared and there is no compass else i would have figured out a way to incorporate same to my map. If u could give me direct example i can use straightaway in my code that will be really helpful. This is my code for scattermapbox. i am plotting lat/lon data on mapbox. Then passing data and layout to figure.
data =
for event in event_types:
event_data = dict(
lat = df.loc[df[‘EVENT_TYPE’] == event,‘BEGIN_LAT’],
lon = df.loc[df[‘EVENT_TYPE’] == event,‘BEGIN_LON’],
name = event,
marker = dict(size = 8, opacity = 0.5),
type = ‘scattermapbox’
)
data.append(event_data)
layout = dict(
height = 800,
margin = dict(t=0, b=0, l=0, r=0),
font = dict(color=’#FFFFFF’, size=11),
paper_bgcolor = ‘#000000’,
mapbox=dict(
accesstoken=mapbox_access_token,
bearing=0,
center=dict(
lat=38,
lon=-94
),
pitch=0,
zoom=3,
style=‘dark’
),
)
FWIW, I don’t think that scattermapbox charts can be rotated, so they are “always facing north”
In that case can we atleast show a compass that is static always pointing to North so users get a fair idea and indication that maps are always pointing in north. Any setting on scattermapbox we could enable???
there is no setting on mapbox for this, but you could add some text above the map or you could include an image with html.Img and position it absolutely over the map with css
Actually mapbox plots can be rotated and you can also change the bearing:
Therefore not so easy as to set a static image…
@RenaudLN
in that case can u let us know if we can add compass to these maps? I know mapbox has a setting to enable compass for android apps. You know if we can do same in Dash as well.
To add compass in Mapbox you use this snippet:
var aMapbox = new mapboxgl.Map(…);
aMapbox.addControl(new mapboxgl.NavigationControl(), ‘top-left’);
Introspecting go.Mapbox and go.Scattermapbox, I did not see any attribute or method getting the native mapbox object. If anyone knows an internal to get the native mapbox object when using ScatterMapbox…
This is my layout definition. Can you tell me how to fit above code into this. Thanks
layout = dict(
height = 420,
# top, bottom, left and right margins
margin = dict(t = 0, b = 0, l = 0, r = 0),
font = dict(color = ‘black’, size = 12, family = ‘Arial, Helvetica, sans-serif’),
paper_bgcolor = ‘white’,
legend=dict(orientation=‘h’, x = 0, y = -0.055),
mapbox = dict(
# here you need the token from Mapbox
accesstoken = mapbox_access_token,
bearing = 0,
# where we want the map to be centered
center = dict(
lat = 38,
lon = -94
),
# we want the map to be “parallel” to our screen, with no angle
pitch = 0,
# default level of zoom
zoom = 2.5,
# default map style
style = ‘light’
)
)
@RenaudLN Yes mapbox plots can be rotated but not real time i believe. we have to set the pitch or bearing values to accomplish that still the map will remain static with that angle i think. Please see below layout definition.
Unfortunately, compass is not set with init parameter of Mapbox creation : the mapbox dict of Layout. It is set with a method in mapbox object.
According to me there is no way to set compass with Layout.
