def generate_map_plot(data):
if data is not None:
start_point = data['STATION_NAME'].item()
point = [data['LAT'].item(), data['LON'].item()]
fig = [
dl.Map(
[
dl.TileLayer(url=mapURL,
attribution=attribution,
tileSize=512,
zoomOffset=-1),
dl.LayerGroup(id="layer"),
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),
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),
dl.LocateControl(options={
'locateOptions': {
'enableHighAccuracy': True
}
}),
dl.Marker(position=point,
children=dl.Tooltip(start_point)),
],
center=point,
zoom=4,
style={
'width': '100%',
'height': '35vh',
'margin': "auto",
"display": "block"
},
id='map')
]
else: # make an empty map
fig = make_empty_map()
return fig
def make_empty_map(lat_center=51.326863, lon_center=10.354922, zoom=5):
fig = [
dl.Map(
[
dl.TileLayer(url=mapURL,
attribution=attribution,
tileSize=512,
zoomOffset=-1),
dl.LayerGroup(id="layer"),
dl.WMSTileLayer(url="https://maps.dwd.de/geoserver/ows?",
layers="dwd:RX-Produkt",
format="image/png",
transparent=True,
opacity=0.7,
version='1.3.0',
detectRetina=True),
dl.LocateControl(
options={'locateOptions': {
'enableHighAccuracy': True
}}),
],
center=[lat_center, lon_center],
zoom=zoom,
style={
'width': '100%',
'height': '45vh',
'margin': "auto",
"display": "block"
},
id='map')
]
return fig
def generate_map_plot(df):
if df is not None:
lons = df.lons.values
lats = df.lats.values
trajectory = np.vstack([lats, lons]).T.tolist()
start_point = df.source.values[0]
end_point = df.destination.values[0]
zoom, center = zoom_center(lons, lats, width_to_height=8)
fig = [
dl.Map(
[
dl.TileLayer(url=mapURL,
attribution=attribution,
tileSize=512,
zoomOffset=-1),
dl.LayerGroup(id="layer"),
dl.WMSTileLayer(url="https://maps.dwd.de/geoserver/ows?",
layers="dwd:RX-Produkt",
format="image/png",
transparent=True,
opacity=0.7),
dl.LocateControl(options={
'locateOptions': {
'enableHighAccuracy': True
}
}),
dl.Polyline(positions=trajectory),
dl.Marker(position=trajectory[0],
children=dl.Tooltip(start_point)),
dl.Marker(position=trajectory[-1],
children=dl.Tooltip(end_point))
],
center=[center['lat'], center['lon']],
zoom=zoom,
style={
'width': '100%',
'height': '45vh',
'margin': "auto",
"display": "block"
},
id='map')
]
else: # make an empty map
fig = make_empty_map()
return fig
def render_example2():
return [
html.H1("Example 2: WMSTileLayer"),
dl.Map(
style={
'width': '1000px',
'height': '500px'
},
center=[40, -100],
zoom=4,
children=[
dl.TileLayer(url=mapbox_url.format(id="dark-v9",
access_token=mapbox_token)),
dl.WMSTileLayer(
url=
"http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
layers="nexrad-n0r-900913",
format="image/png",
transparent=True),
])
]
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
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