Dmitriy Grankin
Dmitriy Grankin

Reputation: 608

Plotting polygons on mapbox with plotly

I am trying to plot geojson geometries with plotly using scattermapbox.

This piece of code converts data successfully from geopandas for plotly to work with:

from plotly.offline import download_plotlyjs, init_notebook_mode, 
plot, iplot
import plotly.graph_objs as go

mapbox_access_token = 'mykey'

import json

from_json = geopandas_gdf.to_json()
geoJSON = json.loads(from_json)

pts=[]#list of points defining boundaries of polygons
for  feature in geoJSON['features']:
    if feature['geometry']['type']=='Polygon':
        pts.extend(feature['geometry']['coordinates'][0])    
        pts.append([None, None])#mark the end of a polygon   

    elif feature['geometry']['type']=='MultiPolygon':
        for polyg in feature['geometry']['coordinates']:
            pts.extend(polyg[0])
            pts.append([None, None])#end of polygon
    else: raise ValueError("geometry type irrelevant for map") 

X, Y=zip(*pts)

I am able to plot this data on blanc figure with the following code:

axis_style=dict(showline=False, 
            mirror=False, 
            showgrid=False, 
            zeroline=False,
            ticks='',
            showticklabels=False)
layout=dict(title='map',
            width=700, height=700, 
            autosize=False,
            xaxis=axis_style,
            yaxis=axis_style,
            hovermode='closest')
fig=dict(data=data, layout=layout)
plot(fig, filename='map')

But I can not plot this on scattermapbox. Trying like this:

data = [
go.Scattermapbox(
    lat=X,
    lon=Y,
    line = go.scattermapbox.Line(width=5,
                                 color='red'))
    ]

layout = go.Layout(
autosize=True,
hovermode='closest',
mapbox=go.layout.Mapbox(
    accesstoken=mapbox_access_token,
    bearing=0,
    center=go.layout.mapbox.Center(
        lat=53,
        lon=0
    ),
    pitch=0,
    zoom=5
    ),
)

fig = go.Figure(data=data, layout=layout)
plot(fig, filename='Montreal Mapbox')

thank you!

Upvotes: 2

Views: 6885

Answers (2)

Mike_H
Mike_H

Reputation: 1455

Answer to your secondary question

Provide Data from JSON to hover by using customdata attribute inside data that is passed to the plot.

Additionally: Could you please route a general json dataset, so that others can easily run your code blocks please?

Link to customdata attribute: https://plot.ly/python/reference/#scatter-customdata

Else, you could use text and mode='markers + text' to display data from text attribute on hover.

Upvotes: 0

Dmitriy Grankin
Dmitriy Grankin

Reputation: 608

I have managed to do this with the following:

layout = go.Layout(
    height=1500,
    autosize=True,
    hovermode='closest',
    mapbox=dict(
        layers=[
            dict(
                sourcetype = 'geojson',
                source = geoJSON,
                type = 'fill',
                color = 'rgba(163,22,19,0.8)'
            )
        ],
        accesstoken=mapbox_access_token,
        bearing=0,
        center=dict(
            lat=53,
             lon=0
        ),
        pitch=0,
        zoom=5.2,
        style='light'
     ),
)

But then the other question arises: how to provide data from json to hover?

Upvotes: 1

Related Questions