className = 'h-15'
),
dbc.Row([dbc.Col(html.Div([dbc.Row(dbc.Col(dcc.Graph(id = 'temporal-analysis',
figure = {}
),
width = 12)
),
dbc.Row(dbc.Col(dl.Map(dl.LayersControl([dl.BaseLayer(dl.TileLayer(id = 'layer',
url = 'https://api.maptiler.com/maps/outdoor/256/{z}/{x}/{y}@2x.png?key=' + map_key,
attribution = '<a href="https://www.maptiler.com/copyright/" target="_blank">© MapTiler</a> ' + '<a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
),
name = 'Base Map',
checked = True
),
dl.Overlay(children = [],
name = 'Routes Polygons',
checked = True,
id = 'map-routes'
),
dl.Overlay(id = 'map-events',
children = [],
name = 'Events Points',
)
],
),
style = {'width': '800px', 'height': '400px'},
zoom = 4,
center = (37,15),
id = 'map-analysis'),
width = {'offset' : 1}
)
)
def get_map_panel_layout():
colorbar = get_colorbar()
stl_center = [38.648, -90.253]
city_map_style = {"height": "100%", "margin": "none", "display": "block"}
city_map = html.Div(
dl.Map(
children=[
get_base_toner_tile_layer(),
dl.LayersControl(
children=[
dl.BaseLayer(
get_precinct_geojson(),
name="precinct",
id="precinct-baselayer",
checked=True,
),
dl.BaseLayer(
get_neighborhood_geojson(),
name="neighborhood",
id="neighborhood-baselayer",
),
dl.BaseLayer(get_zip_geojson(),
name="zip",
id="zip-baselayer"),
],
id="geojson-layer-control",
),
colorbar,
],
zoom=12,
center=stl_center,
id="city-map",
),
style=city_map_style,
id="map",
)
precinct_card = dbc.Card(
children=bootstrap_stuff.get_floatbox_card_contents(
"precinct",
"",
"Mayor",
),
color="dark",
outline=True,
id="floatbox-precinct",
className="displayNone",
)
neighborhood_card = dbc.Card(
children=bootstrap_stuff.get_floatbox_card_contents(
"neighborhood",
"",
"Mayor",
),
color="dark",
outline=True,
id="floatbox-neighborhood",
className="displayNone",
)
zip_card = dbc.Card(
children=bootstrap_stuff.get_floatbox_card_contents(
"zip", "", "Mayor"),
color="dark",
outline=True,
id="floatbox-zip",
className="displayNone",
)
map_panel_style = {"width": "100%", "display": "block"}
map_panel = html.Div(
id="map-panel",
children=[
city_map,
html.Div(
children=[precinct_card, neighborhood_card, zip_card],
id="floatbox-holder",
),
],
style=map_panel_style,
)
return map_panel
def serve_layout():
dd_variable = dcc.Dropdown(options=variable_options,
value=default_variable, id="dd_variable", clearable=False)
minmax = get_minmax(default_variable)
# # Create a colorbar.
colorbar = dl.Colorbar(
colorscale=csc_map[default_csc], id="colorbar", width=20, height=150, **minmax)
geojson = dl.GeoJSON(data=get_data(default_variable), id="geojson",
format='geobuf',
cluster=True, # when true, data are clustered
# how to draw clusters
clusterToLayer=ns("clusterToLayer"),
# how to draw points
options=dict(pointToLayer=ns("pointToLayer")),
superClusterOptions=dict(radius=50), # adjust cluster size
hideout=dict(colorscale=csc_map[default_csc],
colorProp=default_variable, **minmax))
times = pd.date_range(start=pd.to_datetime('now', utc=True).round('15min') - pd.Timedelta('2hours'),
end=pd.to_datetime('now', utc=True).round(
'15min') - pd.Timedelta('15min'),
freq='5min')
latest = times[-1].strftime('%Y-%m-%dT%H:%M:00.000Z')
numdate = [x for x in range(len(times))]
marks = {numd: date.strftime('%H:%M')
for numd, date in zip(numdate, times)}
slider = dcc.Slider(id='time_slider', min=numdate[0],
max=numdate[-1],
value=numdate[-1],
marks=marks)
layout = html.Div([
dl.Map([
dl.LayersControl(
[
dl.BaseLayer(dl.TileLayer(url=mapURL, attribution=attribution,
tileSize=512, zoomOffset=-1), name='map', checked=True),
dl.Overlay(dl.WMSTileLayer(url="https://maps.dwd.de/geoserver/ows?",
layers="dwd:SAT_EU_RGB",
format="image/png",
transparent=True, opacity=0.6,
version='1.3.0',
detectRetina=True), name='sat eu', checked=True),
dl.Overlay(dl.WMSTileLayer(id='radar_it',
url="http://www.protezionecivile.gov.it/geowebcache/service/wms?tiled=True&time=%s" % latest,
layers="radar:vmi",
transparent=True,
format="image/png",
opacity=1.0,
version='1.1.1'),
name='radar IT', checked=True),
dl.Overlay([geojson, colorbar], name='obs', checked=True)
]),
geojson_countries,
], center=[41, 12], zoom=6),
html.Div(id='date-div', style={'display': 'none'},
children=times.strftime('%Y-%m-%dT%H:%M:00.000Z')),
html.Div([slider],
style={"position": "absolute", "bottom": "20px",
"left": "10px", "z-index": "1000", "width": "800px",
"background-color": 'rgba(1, 1, 1, 0.3)'}),
html.Div([dd_variable],
style={"position": "absolute", "top": "300px", "right": "16px", "z-index": "1000", "width": "100px"})
], style={'width': '100%', 'height': '90vh', 'margin': "auto", "display": "block", "position": "relative"})
return layout
html.H4([
"Population and Road Distribution | Click to Start",
],
className="container_title"),
html.Div(
[
dl.Map([
dl.LayersControl([
dl.BaseLayer(
dl.TileLayer(url=url_template.format(key),
attribution=attribution),
name=key,
checked=key == checked_key) for key in keys
] + [
dl.LayerGroup(id="layer"),
dl.GeoJSON(
id='polygons',
options=dict(style=ns("style")),
hideout=dict(colorscale=colorscale,
classes=classes,
style=style,
colorProp="index"),
)
]),
],
id="map-graph",
zoom=4,
center=(39, -100)),
html.Div(
[
html.H5("Average Speed",
def serve_layout():
minmax = get_minmax(default_variable)
# Create a colorbar.
colorbar = dl.Colorbar(colorscale=csc_map[default_csc],
id="colorbar",
width=20,
height=150,
**minmax)
geojson = dl.GeoJSON(
data=get_data(default_variable),
id="geojson",
format="geobuf",
zoomToBounds=True, # when true, zooms to bounds when data changes
cluster=True, # when true, data are clustered
# how to draw clusters
clusterToLayer=ns("clusterToLayer"),
# when true, zooms to bounds of feature (e.g. cluster) on click
zoomToBoundsOnClick=True,
# how to draw points
options=dict(pointToLayer=ns("pointToLayer")),
superClusterOptions=dict(radius=20), # adjust cluster size
hideout=dict(colorscale=csc_map[default_csc],
colorProp=default_variable,
**minmax))
layout = html.Div(
[
dl.Map([
dl.LayersControl([
dl.BaseLayer(dl.TileLayer(url=mapURL,
attribution=attribution,
tileSize=512,
zoomOffset=-1),
name='map',
checked=True),
dl.Overlay(dl.WMSTileLayer(
url="https://maps.dwd.de/geoserver/ows?",
layers="dwd:SAT_WELT_KOMPOSIT",
format="image/png",
transparent=True,
opacity=0.7,
version='1.3.0',
detectRetina=True),
name='sat world',
checked=True),
dl.Overlay(dl.WMSTileLayer(
url="https://maps.dwd.de/geoserver/ows?",
layers="dwd:SAT_EU_RGB",
format="image/png",
transparent=True,
opacity=0.7,
version='1.3.0',
detectRetina=True),
name='sat eu',
checked=True),
dl.Overlay(dl.WMSTileLayer(
url="https://maps.dwd.de/geoserver/ows?",
layers="dwd:WN-Produkt",
format="image/png",
transparent=True,
opacity=0.7,
version='1.3.0',
detectRetina=True),
name='radar DE',
checked=True),
dl.Overlay(
[geojson, colorbar], name='obs DE', checked=True)
]),
geojson_countries,
]),
html.Div(
[dd_variable, dd_csc],
style={
"position": "relative",
"bottom": "80px",
"left": "10px",
"z-index": "1000",
"width": "200px"
})
],
style={
'width': '100%',
'height': '90vh',
'margin': "auto",
"display": "block",
"position": "relative"
})
return layout
data=neighborhodd_geojson,
options=dict(style=dict(color="green")),
zoomToBoundsOnClick=True,
hoverStyle=arrow_function(dict(weight=4, fillOpacity=0.2, dashArray="")),
id="neighborhoods-geojson",
)
neighborhood_overlay = dl.Overlay(precincts,
name="neighborhood",
checked=False)
# Map and wrapper
city_map = html.Div(
children=[
dl.Map(
dl.LayersControl([
base_tile_layer, ward_overlay, precinct_overlay,
neighborhood_overlay
]),
zoom=12,
center=[38.648, -90.253],
style={
"width": "100%",
"height": "100vh",
"margin": "none",
"display": "block",
},
)
],
id="city-map-wrapper",
)
# Main layout component for the map
colorscale=colorscale,
classes=list(
range(
outline_min, outline_max,
(outline_max - outline_min) //
5)),
style=style,
colorProp="volume"),
),
locate_control,
dl.LayersControl([
dl.BaseLayer(dl.TileLayer(
url=esri_url.format(
variant=variants[key]['variant']),
attribution=variants[key]
['attribution']),
name=key,
checked=key
== "World_Terrain_Base")
for key in variants
]),
colorbar,
nbd_colorbar,
info
],
zoom=11,
center=(39.1, -94.5786)),
html.Div(
[dd_state],
style={
"position": "relative",
children=[
dl.LayersControl(
[
dl.BaseLayer(dl.TileLayer(opacity=0.8, url=url.format(key)),
name=names[keys.index(key)],
checked=key == keys[0]) for key in keys
] + [
dl.GeoJSON(data=get_data(df),
format='geobuf',
cluster=True,
clusterToLayer=namespaceSelected('clusterToLayer'),
superClusterOptions=dict(radius=200),
id='graph',
zoomToBounds=True,
zoomToBoundsOnClick=True,
options=dict(
pointToLayer=namespaceSelected('pointToLayer')))
] +
# Top right info bar about ChargingPoint
[
html.Div(children=[],
id="info",
className="info",
style={
"position": "absolute",
"top": "10px",
"right": "10px",
"z-index": "1000"
})
],
position='topleft'),
],