"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.\n",
"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 add a basic map layer.\n",
"\n",
"```Python\n",
"mapComponent = dl.Map(children=\n",
...
...
@@ -238,7 +238,67 @@
"id": "ef8cbf39-d2f4-4426-b76a-8e6dc1311541",
"metadata": {},
"source": [
"Now that we have our map, let's see what we can do with it. "
"Now that we have our map, let's see what we can do with it. \n",
"\n",
"The ```children``` attribute of the map component allows us to add different kinds of layers to the map.\n",
# 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 :
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 :
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.
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 add a basic map layer.
"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.\n",
"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 add a basic map layer.\n",
"\n",
"```Python\n",
"mapComponent = dl.Map(children=\n",
...
...
@@ -238,7 +238,67 @@
"id": "ef8cbf39-d2f4-4426-b76a-8e6dc1311541",
"metadata": {},
"source": [
"Now that we have our map, let's see what we can do with it. "
"Now that we have our map, let's see what we can do with it. \n",
"\n",
"The ```children``` attribute of the map component allows us to add different kinds of layers to the map.\n",
# 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 :
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 :
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.
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 add a basic map layer.
