From 0896315aac7047b094e61a55e792d8435f71c197 Mon Sep 17 00:00:00 2001
From: daxid <david.rouquet@tetras-libre.fr>
Date: Mon, 15 Nov 2021 15:28:29 +0000
Subject: [PATCH] closes #1 first examples
---
.../dash-leaflet-checkpoint.ipynb | 64 ++++++++++++++++++-
dash/dash-leaflet.ipynb | 64 ++++++++++++++++++-
2 files changed, 124 insertions(+), 4 deletions(-)
diff --git a/dash/.ipynb_checkpoints/dash-leaflet-checkpoint.ipynb b/dash/.ipynb_checkpoints/dash-leaflet-checkpoint.ipynb
index 7713962..1c39141 100644
--- 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)"
]
}
],
diff --git a/dash/dash-leaflet.ipynb b/dash/dash-leaflet.ipynb
index 7713962..1c39141 100644
--- 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)"
]
}
],
--
GitLab