closes #1 first examples

0896315a · David Rouquet · 91af3924 · 0896315a · 0896315a
Commit 0896315a authored 3 years ago by David Rouquet
--- a/dash/.ipynb_checkpoints/dash-leaflet-checkpoint.ipynb
+++ b/dash/.ipynb_checkpoints/dash-leaflet-checkpoint.ipynb
@@ -172,7 +172,7 @@
   "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",
+    "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",
+    "\n",
+    "Markers : \n",
+    "\n",
+    "```Python\n",
+    "marker = dl.Marker(position = [46.5,2.25])\n",
+    "``` \n",
+    "\n",
+    "```Python\n",
+    "polygon = dl.Polygon(positions =[[43,2],[46,2],[46,4],[43,3]])\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 20,
+   "id": "ad986a0f-ea66-42ee-8e7e-5482ee1ddc8f",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"650\"\n",
+       "            src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8063/jupyter/app_proxy/8063/\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
+      "text/plain": [
+       "<IPython.lib.display.IFrame at 0x7f710a064e80>"
+      ]
+     },
+     "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",
+    "marker = dl.Marker(position = [46.5,2.25], id ='marker')\n",
+    "polygon = dl.Polygon(positions =[[43,2],[46,2],[46,4],[43,3]], id='polygon')\n",
+    "\n",
+    "\n",
+    "mapComponent = dl.Map(children = \n",
+    "                          [dl.TileLayer(),marker,polygon],\n",
+    "                    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: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.
+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.
 ```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.
+The ```children``` attribute of the map component allows us to add different kinds of layers to the map.
+Markers :
+```Python
+marker = dl.Marker(position = [46.5,2.25])
+```
+```Python
+polygon = dl.Polygon(positions =[[43,2],[46,2],[46,4],[43,3]])
+```
+%% Cell type:code id:ad986a0f-ea66-42ee-8e7e-5482ee1ddc8f 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)
+marker = dl.Marker(position = [46.5,2.25], id ='marker')
+polygon = dl.Polygon(positions =[[43,2],[46,2],[46,4],[43,3]], id='polygon')
+mapComponent = dl.Map(children =
+                          [dl.TileLayer(),marker,polygon],
+                    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

--- a/dash/dash-leaflet.ipynb
+++ b/dash/dash-leaflet.ipynb
@@ -172,7 +172,7 @@
   "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",
+    "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",
+    "\n",
+    "Markers : \n",
+    "\n",
+    "```Python\n",
+    "marker = dl.Marker(position = [46.5,2.25])\n",
+    "``` \n",
+    "\n",
+    "```Python\n",
+    "polygon = dl.Polygon(positions =[[43,2],[46,2],[46,4],[43,3]])\n",
+    "```"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 20,
+   "id": "ad986a0f-ea66-42ee-8e7e-5482ee1ddc8f",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=\"650\"\n",
+       "            src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8063/jupyter/app_proxy/8063/\"\n",
+       "            frameborder=\"0\"\n",
+       "            allowfullscreen\n",
+       "            \n",
+       "        ></iframe>\n",
+       "        "
+      ],
+      "text/plain": [
+       "<IPython.lib.display.IFrame at 0x7f710a064e80>"
+      ]
+     },
+     "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",
+    "marker = dl.Marker(position = [46.5,2.25], id ='marker')\n",
+    "polygon = dl.Polygon(positions =[[43,2],[46,2],[46,4],[43,3]], id='polygon')\n",
+    "\n",
+    "\n",
+    "mapComponent = dl.Map(children = \n",
+    "                          [dl.TileLayer(),marker,polygon],\n",
+    "                    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: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.
+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.
 ```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.
+The ```children``` attribute of the map component allows us to add different kinds of layers to the map.
+Markers :
+```Python
+marker = dl.Marker(position = [46.5,2.25])
+```
+```Python
+polygon = dl.Polygon(positions =[[43,2],[46,2],[46,4],[43,3]])
+```
+%% Cell type:code id:ad986a0f-ea66-42ee-8e7e-5482ee1ddc8f 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)
+marker = dl.Marker(position = [46.5,2.25], id ='marker')
+polygon = dl.Polygon(positions =[[43,2],[46,2],[46,4],[43,3]], id='polygon')
+mapComponent = dl.Map(children =
+                          [dl.TileLayer(),marker,polygon],
+                    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