def update_map(rows, viewData): dff = pd.DataFrame.from_dict(viewData) # get the lat and lon of the selected row lat = dff.iat[rows[0], 13] lon = dff.iat[rows[0], 14] return [ dl.Map( style={ 'width': '1000px', 'height': '500px' }, center=[30.75, -97.48], zoom=10, children=[ dl.TileLayer(id="base-layer-id"), # Marker with tool tip and popup dl.Marker(position=[lat, lon], children=[ dl.Tooltip(dff.iat[rows[0], 4]), dl.Popup([ html.H1("Animal Name"), html.P(dff.iat[rows[0], 9]) ]) ]) ]) ]
def update_radio(input_value): if input_value != None: print("update_radio", input_value) def get_style(feature): color = [ colorscale[i] for i, item in enumerate(marks) if feature["properties"][input_value] > item ][-1] return dict(fillColor=color, weight=2, opacity=1, color='white', dashArray='3', fillOpacity=0.7) options = dict(hoverStyle=dict(weight=5, color='#666', dashArray=''), zoomToBoundsOnClick=True) geojson = dlx.geojson(data, id="geojson", defaultOptions=options, style=get_style) return html.Div([ dl.Map(children=[dl.TileLayer(), geojson], center=[51.51, -0.083], zoom=11) ], style={ 'width': '150%', 'height': '75vh' }, id="map")
def render_example5(): color_domain = dict(domainMin=20, domainMax=40, colorscale=['white', 'orange', 'red']) return [ html.H1("Example 5: GeoTIFFOverlay"), html.P("Middle East Temperatures"), dl.Map( style={ 'width': '1000px', 'height': '500px' }, center=[25, 45], zoom=5, children=[ dl.TileLayer( url= "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png" ), dl.GeoTIFFOverlay(id=GEOTIFF_ID, interactive=True, url="/assets/tz850.tiff", band=1, opacity=0.8, **color_domain), dl.Colorbar(width=200, height=20, **color_domain, unit="°C", style={'color': 'black'}), html.Div(id=GEOTIFF_MARKER_ID) ]), ]
def render_example5(): # Example from https://plot.ly/python/scatter-plots-on-maps/#us-airports-map color_domain = dict(domainMin=20, domainMax=40, colorscale=['white', 'orange', 'red']) return [ html.H1("Example 5: GeoTIFFOverlay"), html.P("US airports (most arrivals)"), dl.Map( style={ 'width': '1000px', 'height': '500px' }, center=[25, 45], zoom=5, children=[ dl.TileLayer( url= "https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_nolabels/{z}/{x}/{y}.png" ), dl.GeoTIFFOverlay(id=GEOTIFF_ID, interactive=True, url="/assets/tz850.tiff", band=1, opacity=0.9, **color_domain), dl.Colorbar(width=200, height=20, **color_domain, unit="°C", style={'color': 'white'}), html.Div(id=GEOTIFF_MARKER_ID) ]), ]
def render_example6(): # Generate some in-memory data. bermuda = dlx.dicts_to_geojson([dict(lat=32.299507, lon=-64.790337)]) biosfera = dlx.geojson_to_geobuf( dlx.dicts_to_geojson([dict(lat=29.015, lon=-118.271)])) with open("data/KCNeighborhood.json", 'r') as f: statesData = json.load(f) return [ dl.Map( center=[39, -98], zoom=4, children=[ dl.TileLayer(), dl.GeoJSON(data=bermuda), # in-memory geojson (slowest option) dl.GeoJSON( data=biosfera, format="geobuf" ), # in-memory geobuf (smaller payload than geojson) dl.GeoJSON( data=statesData, id="capitals"), # geojson resource (faster than in-memory) ], style={ 'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block" }, id="map"), html.Div(id="state"), html.Div(id="capital") ]
def get_map_panel_zip_layout(): classes = [0, 100, 500, 1000, 2000, 5000, 10000, 20000] colorscale = [ "#FFEDA0", "#FED976", "#FEB24C", "#FD8D3C", "#FC4E2A", "#E31A1C", "#BD0026", "#800026", ] style = { "weight": 2, "opacity": 1, "color": "white", "dashArray": 3, "fillOpacity": 0.7, } ctg = ["{}+".format(cls, classes[i + 1]) for i, cls in enumerate(classes[:-1])] + [ "{}+".format(classes[-1]) ] colorbar = dlx.categorical_colorbar( categories=ctg, colorscale=colorscale, width=400, height=30, position="bottomright", ) ns = Namespace("dlx", "choropleth") zip_geojson = dl.GeoJSON( data=None, # url to geojson file options=dict(style=ns("style")), # how to style each polygon zoomToBounds=False, # when true, zooms to bounds when data changes (e.g. on load) zoomToBoundsOnClick=True, # when true, zooms to bounds of feature (e.g. polygon) on click hoverStyle=arrow_function( dict(weight=5, color="#666", dashArray="") ), # style applied on hover hideout=dict( colorscale=colorscale, classes=classes, style=style, colorProp="Amount" ), id="zips-geojson", ) stl_center = [38.648, -90.253] city_map_style = {"height": "100vh", "margin": "none", "display": "block"} city_map = html.Div( dl.Map( children=[get_base_toner_tile_layer(), zip_geojson, colorbar], zoom=12, center=stl_center, ), style=city_map_style, id="map", ) map_panel_style = {"width": "100%", "height": "100vh", "display": "block"} map_panel = html.Div(id="map-panel", children=city_map, style=map_panel_style) return map_panel
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 build_alerts_map(): """ The following function mobilises functions defined hereabove or in the utils module to instantiate and return a dl.Map object, corresponding to the "Alerts and Infrastructure" view. """ map_object = dl.Map( center=[44.73, 4.27], # Determines the point around which the map is centered zoom=9, # Determines the initial level of zoom around the center point children=[ dl.TileLayer(id='tile_layer'), build_departments_geojson(), build_filters_object(map_type='alerts'), build_legend_box(map_type='alerts'), dl.MarkerClusterGroup( children=build_sites_markers(sites_with_live_alerts=[]), id='sites_markers'), dl.LayerGroup(id='vision_polygons'), html.Div(id="live_alerts_marker"), html.Div(id="live_alert_header_btn"), html.Div(id='fire_markers_alerts') ], # Will contain the past fire markers of the alerts map style=map_style, # Reminder: map_style is imported from utils.py id='map') return map_object
def create_map(self): self.ns = Namespace("dlx", "scatter") self.markers = [ dl.Marker( dl.Tooltip(f"({pos[0]}, {pos[1]}), time:{self.times[i]}"), position=pos, id="marker{}".format(i)) for i, pos in enumerate(self.locations) ] self.cluster = dl.MarkerClusterGroup( id="markers", children=self.markers, options={"polygonOptions": { "color": "red" }}) self.app = dash.Dash(external_scripts=[ "https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.0/chroma.min.js" ]) self.polyline = dl.Polyline(positions=self.locations) self.app.layout = html.Div([ dl.Map([ dl.TileLayer(), self.cluster, self.polyline, dl.LayerGroup(id="layer") ], id="map", center=(40.4259, -86.9081), zoom=8, style={'height': '100vh'}), ])
def get_map(run_by, paved_status, lighted_status, spaces_range): df = lots[(lots["operator"].isin(run_by)) & (lots["is_paved"].isin(paved_status)) & (lots["light"].isin(lighted_status)) & (lots["available_spaces"] >= spaces_range[0]) & (lots["available_spaces"] <= spaces_range[1])] titles = df[df.columns[0]] lat = df[df.columns[7]] long = df[df.columns[8]] avg_lat = sum(lat) / len(lat) avg_long = sum(long) / len(long) print(len(df)) points = [] for i in range(0, len(lat) - 1): points.append(dict(lat=lat[i], lon=long[i])) return dl.Map(center=[avg_lat, avg_long], zoom=7, children=[ dl.TileLayer(), dl.GeoJSON(data=dlx.dicts_to_geojson(points)) ], style={ 'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block" }, id="map-object")
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 get_component(eq_data): """Return the map component with earthquakes represented as circles. Keyword arguments: eq_data -- EarthquakeData object containing the quakes to be drawn. """ return dl.Map(id='quake-map', center=[33.7, -117.3], zoom=8, children=[ dl.TileLayer(url=api_url, attribution=attribution), html.Div(id='test-id', children=[get_event_layer(eq_data)]) ])
def render_example3(): return [ html.H1("Example 3: ImageOverlay"), dl.Map(style={ 'width': '1000px', 'height': '500px' }, bounds=[[40.712216, -74.22655], [40.773941, -74.12544]], children=[ dl.TileLayer(), dl.ImageOverlay(opacity=0.5, url="/assets/newark_nj_1922.jpg", bounds=[[40.712216, -74.22655], [40.773941, -74.12544]]) ]), ]
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_example4(): return [ html.H1("Example 4: VideoOverlay"), dl.Map(style={ 'width': '1000px', 'height': '500px' }, bounds=[[32, -130], [13, -100]], children=[ dl.TileLayer(url=mapbox_url.format( id="satellite-streets-v9", access_token=mapbox_token)), dl.VideoOverlay(id=VIDEO_OVERLAY_ID, url="/assets/patricia_nasa.webm", bounds=[[32, -130], [13, -100]]), ]), html.Button(id=BUTTON_PLAY_ID, children="Play/pause"), ]
def render_example3(): return [ html.H1("Example 3: ImageOverlay"), dl.Map( style={ 'width': '1000px', 'height': '500px' }, bounds=[[40.712216, -74.22655], [40.773941, -74.12544]], children=[ dl.TileLayer(), dl.ImageOverlay( opacity=0.5, url= "https://raw.githubusercontent.com/thedirtyfew/dash-leaflet/master/assets/newark_nj_1922.jpg", bounds=[[40.712216, -74.22655], [40.773941, -74.12544]]) ]), ]
def get_component(eq_data, sizes, opacities, color_params=None, show_uncertainties=False, show_faults=False): """Return the map component with earthquakes represented as circles. Keyword arguments: eq_data -- EarthquakeData object containing the quakes to be drawn. sizes -- An array containing a size for each data point opacities -- An array containing an opacity for each data point color_params -- A tuple with the column name and its minimum and maximum values for extracting and normalizing values to use for colors show_uncertainties -- A boolean indicating whether to display the uncertainties in location of each data point show_faults -- A boolean indicating whether to show the faults """ colors, color_domain = get_colors(eq_data.data, color_params) return dl.Map(id='quake-map', center=eq_data.get_map_center(), zoom=eq_data.get_initial_zoom(), children=[ dl.TileLayer(url=api_url, attribution=attribution), html.Div(id='test-id', children=[ get_fault_layer(show_faults), get_event_layer(eq_data, sizes, colors, opacities), get_location_uncertainty_layer( eq_data, show_uncertainties) ]), (color_domain is not None and dl.Colorbar(width=200, height=20, **color_domain, style={ 'color': 'black', 'font-weight': 'bold' })) ])
def build_alerts_map(): map_object = dl.Map( center=[ 46.5, 2 ], # Determines the point around which the map is initially centered zoom=6, # Determines the initial level of zoom around the center point children=[ dl.TileLayer(id='tile_layer'), build_departments_geojson(), build_info_object(app_page='alerts'), build_legend_box(app_page='alerts'), build_sites_markers(), html.Div(id="live_alerts_marker"), html.Div(id='fire_markers_alerts') ], # Will contain the past fire markers of the alerts map style=map_style, # Reminder: map_style is imported from utils.py id='map') return map_object
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 update_map(viewData, derived_virtual_selected_rows): """ functionality for updating map. map always shows location of the animal at top of table's current page """ dff = df if viewData is None else pd.DataFrame(viewData) selected_animal = None # if there are no selected rows yet, map default displays first animal of table's current page if not derived_virtual_selected_rows: selected_animal = dff.iloc[0] # else there is a selected row, map displays that animal else: selected_animal = dff.iloc[derived_virtual_selected_rows[0]] latitude = selected_animal[12] longitude = selected_animal[13] animal_breed = selected_animal[3] animal_name = selected_animal[8] return [ dl.Map( style={ 'width': '700px', 'height': '500px' }, center=[latitude, longitude], zoom=10, children=[ dl.TileLayer(id="base-layer-id"), # Marker with tool tip and popup dl.Marker( position=[latitude, longitude], children=[ # show breed of animal on hovering over marker dl.Tooltip(animal_breed), # show animal name on clicking marker dl.Popup([html.H1("Animal Name"), html.P(animal_name)]) ]) ]) ]
def build_risks_map(): geojson, colorbar = build_risks_geojson_and_colorbar() map_object = dl.Map( center=[ 46.5, 2 ], # Determines the point around which the map is initially centered zoom=6, # Determines the initial level of zoom around the center point children=[ dl.TileLayer(id='tile_layer'), geojson, colorbar, build_info_object(app_page='risks'), build_legend_box(app_page='risks'), html.Div(id='fire_markers_risks' ) # Will contain past fire markers of the risks map ], style=map_style, # Reminder: map_style is imported from utils.py id='map') return map_object
def build_risks_map(): """ This function mobilises functions defined hereabove or in the utils module to instantiate and return a dl.Map object, corresponding to the "Risk Score" view. """ geojson, colorbar = build_risks_geojson_and_colorbar() map_object = dl.Map(center=[46.5, 2], # Determines the point around which the map is initially centered zoom=6, # Determines the initial level of zoom around the center point children=[dl.TileLayer(id='tile_layer'), geojson, colorbar, build_filters_object(map_type='risks'), build_legend_box(map_type='risks'), html.Div(id='fire_markers_risks'), # Will contain past fire markers of the risks map html.Div(id='live_alerts_marker') ], style=map_style, # Reminder: map_style is imported from utils.py id='map') return map_object
def plot_coordinate(value='11 Cadogan Gardens'): search_data = df[df['Hotel_Name'] == value] lat = search_data.lat.values[0] lng = search_data.lng.values[0] name = search_data.Hotel_Name.values[0] address_ = search_data.Hotel_Address.values[0] markers = [ dl.Marker( position=[lat, lng], children=[dl.Popup('Name: ' + name + ', Address: ' + address_, )]) ] return html.Div([ dl.Map([dl.TileLayer(), dl.LayerGroup(id="layer")] + [dl.LayerGroup(markers)], center=[lat, lng], zoom=14, id="map", style=MAP_STYLE), ]),
###Main graphs html.Div( id = "main-body", children = [ html.Div( id = "wrapper", children = [ html.Div( id = "map", children = [ dl.Map( center = [-16, -52], zoom = 4, children = [ dl.TileLayer(), geojson, colorbar, html.Div( children = get_info(), id = "info", className = "info", style = {"position": "absolute", "top": "10px", "right": "10px", "z-index": "1000"})], style = {"border-radius":"8px"}) ], className ="leaflet-map"), html.Div( children = dt.DataTable( id = "data_table", columns=[{"id": " ", "name": " "}, {"id": "count", "name": "Observado"}, {"id": "expected", "name": "Esperado"}, {"id": "rr", "name": "RR"}],
def render_example1(): comment = """ Marker with default icon, marker with custom icon, circle marker (fixed pixel radius), circle (fixed physical radius), polyline, polygon and rectangle, all supporting tooltips and popups. """ return [ html.H1("Example 1: Basic components"), html.P(comment), dl.Map( id=MAP_ID, style={ 'width': '1000px', 'height': '500px' }, center=[56.05, 10.25], zoom=10, children=[ dl.TileLayer(id=BASE_LAYER_ID), # Marker with tool tip and popup. dl.Marker(position=[56, 9.8], children=[ dl.Tooltip("Marker tooltip"), dl.Popup([ html.H1("Marker popup"), html.P("with inline html") ]) ]), # Marker with custom icon. dl.Marker(position=[55.94, 9.96], icon={ "iconUrl": "/assets/149059.svg", "iconSize": [25, 25] }, children=[dl.Tooltip("Marker with custom icon")]), # Circle marker (with fixed radius in pixel). dl.CircleMarker(center=[56.05, 10.15], radius=20, children=[dl.Popup('Circle marker, 20px')]), # Circle with fixed radius in meters. dl.Circle(center=[56.145, 10.21], radius=2000, color='rgb(255,128,0)', children=[dl.Tooltip('Circle, 2km radius')]), # Polyline marker. dl.Polyline(id='polyline', positions=[[56.06, 10.0], [56.056, 10.01], [56.064, 10.028], [56.0523, 10.0717], [56.044, 10.073]], children=[dl.Tooltip('Polyline')]), # Polygon marker. dl.Polygon(id='polygon', positions=[[56.013, 9.84], [56.0544, 9.939], [56.003, 10.001]], children=[dl.Tooltip('Polygon')]), # Rectangle marker. dl.Rectangle(id='rectangle', bounds=[[55.9, 10.2], [56.0, 10.5]], children=[dl.Tooltip('Rectangle')]) ]), dcc.RadioItems(id=BASE_LAYER_DROPDOWN_ID, options=[{ "label": i, "value": mapbox_url.format(id=i, access_token=mapbox_token) } for i in mapbox_ids], labelStyle={'display': 'inline-block'}, value=mapbox_url.format(id="light-v9", access_token=mapbox_token)), html.P("Coordinate (click on map):"), html.Div(id=COORDINATE_CLICK_ID), ]
lon=9.5 + random.random(), value=random.random()) for i in range(100) ] data = dlx.dicts_to_geojson(points) # Create geojson. js = module_to_props(rjs) # compiles the js geojson = dl.GeoJSON( data=data, options=dict(pointToLayer=rjs.point_to_layer), # pass function as prop hideout=dict(scale=10), id="geojson") # pass variables to function # Create the app. app = dash.Dash() app.layout = html.Div([ dl.Map([dl.TileLayer(), geojson], center=(56, 10), zoom=8, style={'height': '50vh'}), dcc.Slider(min=1, max=100, value=10, id="slider") ]) inject_js(app, js) # adds the js to the app @app.callback(Output("geojson", "hideout"), [Input("slider", "value")], prevent_initial_call=False) def update_scale(value): return dict(scale=value) if __name__ == '__main__': app.run_server()
], className="header", ), # MAP html.Div( children=[ dl.Map(center=[lat_center, long_center], zoom=14, children=[ dl.TileLayer(url=url, attribution=attribution, maxZoom=20), dl.GeoJSON( data=data, id="unique-squirrel-id", format="geobuf", cluster=True, zoomToBoundsOnClick=True, superClusterOptions={"radius": 50}, options=dict(pointToLayer=ns("pointToLayer"))), ], className="squirrel-map", style={'display': 'block'}, id="map"), ], className="squirrel-map-container", ), # SQUIRREL INFO html.Div(id="squirrel-facts"), # invisible sound containers
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} ) ) ] ),
}, { 'label': 'Total_Sales', 'value': 'Total_Sales' }, ], #value='footfall', style={"margin-left": "15px"}, ), html.Div(id='radio_output', style={"margin-left": "15px" }), # html.Div ], className='six columns'), html.Div([ dl.Map(children=[dl.TileLayer(), geojson, colorbar, info], center=[39, -98], zoom=4) ], style={ 'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block" }, id="map") ]) @app.callback(Output("info", "children"), [Input("geojson", "featureHover")]) def info_hover(feature): return get_info(feature)
# clusterToLayer=ns("clusterToLayer"), zoomToBoundsOnClick=True, # options=dict(pointToLayer=ns('pointToLayer')), superClusterOptions=dict(radius=150)) # hideout=dict(colorscale='Viridis', colorProp='cpa')) # add cpa boundaries cpa_boundaries = dl.GeoJSON( id='rfmp', url="/assets/rfmp4.json", zoomToBounds=True, hoverStyle=arrow_function(dict(weight=5, color='#666', dashArray=''))) # must be in assets folder # create map map = dl.Map([dl.TileLayer(), cpa_boundaries, geojson]) # create dropdown for CPA dd = html.Div( [dd_cpa], style={ "position": "relative", "bottom": "80px", "left": "10px", "z-index": "1000", "width": "200px" }) table = dbc.Table.from_dataframe(df, striped=True, bordered=True, hover=True) layout = html.Div(