diff --git a/dash/dash-leaflet.ipynb b/dash/dash-leaflet.ipynb
index 363fcab7ed6e9634e198cf5555ceb88932c9a245..77139620adff41ae00dec9edf47bdd11edbceec9 100644
--- a/dash/dash-leaflet.ipynb
+++ b/dash/dash-leaflet.ipynb
@@ -1,6 +1,266 @@
 {
- "cells": [],
- "metadata": {},
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "13f6dc62-8ea6-482d-9115-707cd6b712fc",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def get_tl_config():\n",
+    "    import socket, errno, os\n",
+    "    # Find a free port\n",
+    "    host = '0.0.0.0'\n",
+    "    port = 8050\n",
+    "    end = 9999\n",
+    "    found = False\n",
+    "    while not found:\n",
+    "        with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:\n",
+    "            try:\n",
+    "                s.bind((host, port))\n",
+    "                found = True\n",
+    "            except socket.error as e:\n",
+    "                if e.errno == errno.EADDRINUSE:\n",
+    "                    port = port + 1\n",
+    "                    if (port > end):\n",
+    "                        raise \"No available APP port\"\n",
+    "                else:\n",
+    "                    raise e\n",
+    "    if (os.getenv('HOST', None) is not None):\n",
+    "        proto = os.getenv('PROTO')\n",
+    "        actualhost = os.getenv('JUPYTER_HOST', os.getenv('VOILA_HOST', \"\"))\n",
+    "        localport = os.getenv('PORT', 80)\n",
+    "        intermediatehost = os.getenv('HOST', 'localhost')\n",
+    "        base_path = f'/{actualhost}/app_proxy/{port}/'\n",
+    "        proxified= f'{proto}://{intermediatehost}:{localport}{base_path}'\n",
+    "        localurl = f'http://{host}:{port}'\n",
+    "        proxy = f'{localurl}::{proxified}'\n",
+    "        return ((proxified, host, port, proxy, base_path))\n",
+    "    return ((f'http://localhost:{port}', host, port, None, '/'))\n",
+    "    \n",
+    "server_url, host, port, proxy, base_path = get_tl_config()\n",
+    "#print(get_tl_config())"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "adaf50a1-4fb2-4ed6-bbb2-7b18d2758e6f",
+   "metadata": {
+    "jp-MarkdownHeadingCollapsed": true,
+    "tags": []
+   },
+   "source": [
+    "# Tetras-Lab for interactive geographical data visualisation\n",
+    "\n",
+    "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.\n",
+    "\n",
+    "## Set up\n",
+    "\n",
+    "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.\n",
+    "\n",
+    "The following imports are gonna be required : \n",
+    "\n",
+    "```Python\n",
+    "from dash import html\n",
+    "import dash_leaflet as dl\n",
+    "import dash_leaflet.express as dlx\n",
+    "from jupyter_dash import JupyterDash as Dash\n",
+    "from dash_extensions.javascript import arrow_function, assign\n",
+    "from dash_extensions.enrich import Output, DashProxy, Input, MultiplexerTransform, State\n",
+    "from dash.dependencies import Output, Input \n",
+    "from dash import dcc\n",
+    "import dash_bootstrap_components as dbc\n",
+    "import plotly.express as px\n",
+    "``` \n",
+    "\n",
+    "## Basic layout\n",
+    "\n",
+    "The first part of a Dash application is the layout, first of all we have to initialize our app : \n",
+    "\n",
+    "```Python\n",
+    "app = Dash(prevent_initial_callbacks=True, server_url=server_url, requests_pathname_prefix=base_path)\n",
+    "``` \n",
+    "\n",
+    "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...\n",
+    "\n",
+    "Exemple for a dropdown selector, first we declare the component : \n",
+    "\n",
+    "```Python\n",
+    "dropdown = dcc.Dropdown(\n",
+    "        id='demo-dropdown',\n",
+    "        options=[\n",
+    "            {'label': 'New York City', 'value': 'NYC'},\n",
+    "            {'label': 'Montreal', 'value': 'MTL'},\n",
+    "            {'label': 'San Francisco', 'value': 'SF'}\n",
+    "        ],\n",
+    "        value='NYC'\n",
+    "    )\n",
+    "```\n",
+    "\n",
+    "Then we add it to the layout \n",
+    "\n",
+    "```Python\n",
+    "app.layout = html.Div(dropdown)\n",
+    "```\n",
+    "\n",
+    "Finnaly ,to run the app we add : \n",
+    "\n",
+    "```Python \n",
+    "app.run_server(mode='inline', host=host, port=port, proxy=proxy)\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
+   "id": "ed671aec-502e-458d-87fb-8034a2b2e79e",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"650\"\n",
+       "            src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8054/jupyter/app_proxy/8054/\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
+      "text/plain": [
+       "<IPython.lib.display.IFrame at 0x7f7109a2f460>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "from dash import html\n",
+    "import dash_leaflet as dl\n",
+    "import dash_leaflet.express as dlx\n",
+    "from jupyter_dash import JupyterDash as Dash\n",
+    "from dash_extensions.javascript import arrow_function, assign\n",
+    "from dash_extensions.enrich import Output, DashProxy, Input, MultiplexerTransform, State\n",
+    "from dash.dependencies import Output, Input \n",
+    "from dash import dcc\n",
+    "import dash_bootstrap_components as dbc\n",
+    "import plotly.express as px\n",
+    "\n",
+    "app = Dash(prevent_initial_callbacks=True, server_url=server_url, requests_pathname_prefix=base_path)\n",
+    "\n",
+    "dropdown = dcc.Dropdown(\n",
+    "        id='demo-dropdown',\n",
+    "        options=[\n",
+    "            {'label': 'New York City', 'value': 'NYC'},\n",
+    "            {'label': 'Montreal', 'value': 'MTL'},\n",
+    "            {'label': 'San Francisco', 'value': 'SF'}\n",
+    "        ],\n",
+    "        value='NYC'\n",
+    "    )\n",
+    "\n",
+    "app.layout = html.Div(dropdown)\n",
+    "\n",
+    "app.run_server(mode='inline', host=host, port=port, proxy=proxy)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "0d6f8c87-d80e-4520-9415-2a7be591b6b1",
+   "metadata": {},
+   "source": [
+    "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",
+    "\n",
+    "```Python\n",
+    "mapComponent = dl.Map(children=\n",
+    "                    [dl.TileLayer()],\n",
+    "                    style={'width': '80%','height':'80vh','float': 'center','margin': 'auto'},\n",
+    "                    center = [46.5,2.25],\n",
+    "                    zoom = 5,\n",
+    "                    id = 'first_map'\n",
+    "                     )\n",
+    "\n",
+    "app.layout = html.Div(children = mapComponent)\n",
+    "```\n",
+    "\n",
+    "\n",
+    "We can add attributes to the map such as the center point or the zoom level. "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
+   "id": "06e83bd3-ba85-48f4-b3e0-99014887e3d1",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"650\"\n",
+       "            src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8059/jupyter/app_proxy/8059/\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
+      "text/plain": [
+       "<IPython.lib.display.IFrame at 0x7f710a229850>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "server_url, host, port, proxy, base_path = get_tl_config()\n",
+    "\n",
+    "app = Dash(prevent_initial_callbacks=True, server_url=server_url, requests_pathname_prefix=base_path)\n",
+    "\n",
+    "mapComponent = dl.Map(children=\n",
+    "                    [dl.TileLayer()],style={'width': '80%','height':'80vh','float': 'center','margin': 'auto'},\n",
+    "                    center = [46.5,2.25],\n",
+    "                    zoom = 5)\n",
+    "\n",
+    "app.layout = html.Div(children = mapComponent)\n",
+    "\n",
+    "app.run_server(mode='inline', host=host, port=port, proxy=proxy)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "ef8cbf39-d2f4-4426-b76a-8e6dc1311541",
+   "metadata": {},
+   "source": [
+    "Now that we have our map, let's see what we can do with it. "
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.8.6"
+  }
+ },
  "nbformat": 4,
  "nbformat_minor": 5
 }