Skip to content
Snippets Groups Projects
Commit fe6313ed authored by David Rouquet's avatar David Rouquet
Browse files

closes #1 first examples

parent 197bc4a5
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 262 additions and 2 deletions
dash/dash-leaflet.ipynb
+ 262
− 2
View file @ fe6313ed
%% Cell type:code id:13f6dc62-8ea6-482d-9115-707cd6b712fc tags:
``` python
def get_tl_config():
import socket, errno, os
# Find a free port
host = '0.0.0.0'
port = 8050
end = 9999
found = False
while not found:
with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
try:
s.bind((host, port))
found = True
except socket.error as e:
if e.errno == errno.EADDRINUSE:
port = port + 1
if (port > end):
raise "No available APP port"
else:
raise e
if (os.getenv('HOST', None) is not None):
proto = os.getenv('PROTO')
actualhost = os.getenv('JUPYTER_HOST', os.getenv('VOILA_HOST', ""))
localport = os.getenv('PORT', 80)
intermediatehost = os.getenv('HOST', 'localhost')
base_path = f'/{actualhost}/app_proxy/{port}/'
proxified= f'{proto}://{intermediatehost}:{localport}{base_path}'
localurl = f'http://{host}:{port}'
proxy = f'{localurl}::{proxified}'
return ((proxified, host, port, proxy, base_path))
return ((f'http://localhost:{port}', host, port, None, '/'))
server_url, host, port, proxy, base_path = get_tl_config()
#print(get_tl_config())
```
%% Cell type:markdown id:adaf50a1-4fb2-4ed6-bbb2-7b18d2758e6f tags:
# Tetras-Lab for interactive geographical data visualisation
In this galery you will learn how to create dashboards using the open source data intelligence platform Tetras-Lab and easily visualize and share them as a web app.
## Set up
We will be using the python libraries Dash and Dash-Leaflet, which can be easily added to Tetras-Lab, to create the components to be displayed in our dashboard.
The following imports are gonna be required :
```Python
from dash import html
import dash_leaflet as dl
import dash_leaflet.express as dlx
from jupyter_dash import JupyterDash as Dash
from dash_extensions.javascript import arrow_function, assign
from dash_extensions.enrich import Output, DashProxy, Input, MultiplexerTransform, State
from dash.dependencies import Output, Input
from dash import dcc
import dash_bootstrap_components as dbc
import plotly.express as px
```
## Basic layout
The first part of a Dash application is the layout, first of all we have to initialize our app :
```Python
app = Dash(prevent_initial_callbacks=True, server_url=server_url, requests_pathname_prefix=base_path)
```
Then we can add the components we want to the app layout, each component works like a HTML element to which we can set a CSS style attribute to manage its size, color, font, etc...
Exemple for a dropdown selector, first we declare the component :
```Python
dropdown = dcc.Dropdown(
id='demo-dropdown',
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montreal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='NYC'
)
```
Then we add it to the layout
```Python
app.layout = html.Div(dropdown)
```
Finnaly ,to run the app we add :
```Python
app.run_server(mode='inline', host=host, port=port, proxy=proxy)
```
%% Cell type:code id:ed671aec-502e-458d-87fb-8034a2b2e79e tags:
``` python
from dash import html
import dash_leaflet as dl
import dash_leaflet.express as dlx
from jupyter_dash import JupyterDash as Dash
from dash_extensions.javascript import arrow_function, assign
from dash_extensions.enrich import Output, DashProxy, Input, MultiplexerTransform, State
from dash.dependencies import Output, Input
from dash import dcc
import dash_bootstrap_components as dbc
import plotly.express as px
app = Dash(prevent_initial_callbacks=True, server_url=server_url, requests_pathname_prefix=base_path)
dropdown = dcc.Dropdown(
id='demo-dropdown',
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': 'Montreal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'}
],
value='NYC'
)
app.layout = html.Div(dropdown)
app.run_server(mode='inline', host=host, port=port, proxy=proxy)
```
%% Output
%% Cell type:markdown id:0d6f8c87-d80e-4520-9415-2a7be591b6b1 tags:
We will now use the Dash_Leaflet Library to display an interactive map, the component to use is ```dl.Map()``` , without adding anything else, the only thing that will be displayed is a grey square, we need to draw some map tiles. By adding ``` dl.TileLayer()``` as an argument, Dash Leaflet will display a basic map.
```Python
mapComponent = dl.Map(children=
[dl.TileLayer()],
style={'width': '80%','height':'80vh','float': 'center','margin': 'auto'},
center = [46.5,2.25],
zoom = 5,
id = 'first_map'
)
app.layout = html.Div(children = mapComponent)
```
We can add attributes to the map such as the center point or the zoom level.
%% Cell type:code id:06e83bd3-ba85-48f4-b3e0-99014887e3d1 tags:
``` python
server_url, host, port, proxy, base_path = get_tl_config()
app = Dash(prevent_initial_callbacks=True, server_url=server_url, requests_pathname_prefix=base_path)
mapComponent = dl.Map(children=
[dl.TileLayer()],style={'width': '80%','height':'80vh','float': 'center','margin': 'auto'},
center = [46.5,2.25],
zoom = 5)
app.layout = html.Div(children = mapComponent)
app.run_server(mode='inline', host=host, port=port, proxy=proxy)
```
%% Output
%% Cell type:markdown id:ef8cbf39-d2f4-4426-b76a-8e6dc1311541 tags:
Now that we have our map, let's see what we can do with it.
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment