Black Lives Matter. Please consider donating to Black Girls Code today.

Mapbox: 3D/extrude buildings

Hi, I’m new to the plotly and mapbox environment. I want to build an interactive map from mapbox. I want the buildings to be extruded so it’s in 3D so it looks something like this:

I’ve tried these lines in my Python environment:

mapbox = dict(
 accesstoken = '...'
 style = 'mapbox://styles/srepho/cjttho6dl0hl91fmzwyicqkzf'
)


#mapbox_access_token = '...'
#style = 'mapbox://styles/anjulia/ck6212zuo0n7k1irz2cvd377i'

data = [
    go.Scattermapbox(
        lat=['57.72849'],
        lon=['11.9745'],
        
        mode='markers',
        marker=go.scattermapbox.Marker(
            size=14
        ),
        text=['Göteborg'],
    )
]

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

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

the “style”-url is the one I get from my edited mapbox-map. The error-code I get looks like this:

image

I don’t need my code to look like that, I just want a 3D map with extruded buildings to use on a webpage that I later can get information from.

@anjulia ,
Welcome to the Dash community. I’m not sure how to help with the 3d part, but if you need help building an interactive mapbox with dash plotly, I have a video tutorial that goes over that.
In the meantime, make sure to modify the code you posted above and take out your access_token. You don’t want other people using your tokens.

Cheers.

@adamshroeder

Thank you for your input. The token is deleted now.

I managed to fix my code and got extruded buildings!

#import necessary libraries
import numpy as np
import pandas as pd
import plotly
import chart_studio.plotly as py
import plotly.offline as py
import plotly.graph_objs as go

mapstyle = “mapbox://styles/anjulia/ck6212zuo0n7k1irz2cvd377i”
#set the geo=spatial data
data = [go.Scattermapbox(
lat= [‘57.72849’] ,
lon= [‘11.9745’],
#customdata = train[‘key’],
mode=‘markers’,
marker=dict(
size= 4,
color = ‘gold’,
opacity = .8,
),
)]
#set the layout to plot
layout = go.Layout(autosize=False,
mapbox= dict(accesstoken="…",
bearing=10,
pitch=60,
zoom=13,
center= dict(lat=57.671667,
lon=11.980833),
style=mapstyle),
width=1800,
height=1200,
title = “Karta över Göteborg”
)

fig = go.Figure(data=data, layout=layout)
py.iplot(fig, filename=‘Gothenburg Mapbox’)

However, the next step is that I want to place out an imaginary building. Let’s say that I first want to define its geometry and then place it out in the map. The goal I want to reach is to make it able to tell the distance from the imaginary building to surrounding buildings for each wall of it. I want to later implement energy and daylight calculations of it (the calculations are already prepared with a pyhthon code but I need the geometry data) and then I need the distances. The map will later be used for visualization use. Does anyone know how to do this or if it’s even possible within this environment?

I would be forever grateful, thanks!