diff --git a/dash/.ipynb_checkpoints/dash-leaflet-checkpoint.ipynb b/dash/.ipynb_checkpoints/dash-leaflet-checkpoint.ipynb
index e5812d1fe87a45781e0efff4a102b6abc53dfb27..746afe6cd3b01fcdd593ce329c664d1e7bc549ea 100644
--- a/dash/.ipynb_checkpoints/dash-leaflet-checkpoint.ipynb
+++ b/dash/.ipynb_checkpoints/dash-leaflet-checkpoint.ipynb
@@ -88,11 +88,12 @@
"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",
+ " {'label': 'Paris', 'value': 'paris'},\n",
+ " {'label': 'Lyon', 'value': 'lyon'},\n",
+ " {'label': 'Marseille', 'value': 'marseille'},\n",
+ " {'label': 'Grenoble', 'value': 'grenoble'}\n",
" ],\n",
- " value='NYC'\n",
+ " value='paris' #The value that will be intially selected\n",
" )\n",
"```\n",
"\n",
@@ -154,11 +155,12 @@
"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",
+ " {'label': 'Paris', 'value': 'paris'},\n",
+ " {'label': 'Lyon', 'value': 'lyon'},\n",
+ " {'label': 'Marseille', 'value': 'marseille'},\n",
+ " {'label': 'Grenoble', 'value': 'grenoble'}\n",
" ],\n",
- " value='NYC'\n",
+ " value='paris'\n",
" )\n",
"\n",
"app.layout = html.Div(dropdown)\n",
@@ -171,7 +173,8 @@
"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 add a default map layer based on OpenStreetMap.\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.\n",
+ "We need to draw some map tiles, by adding ``` dl.TileLayer()``` as an argument, Dash Leaflet will add a default map layer based on OpenStreetMap.\n",
"\n",
"```Python\n",
"mapComponent = dl.Map(children=\n",
@@ -182,7 +185,7 @@
" id = 'first_map'\n",
" )\n",
"\n",
- "app.layout = html.Div(children = mapComponent)\n",
+ "app.layout = html.Div(mapComponent) \n",
"```\n",
"\n",
"\n",
@@ -191,7 +194,7 @@
},
{
"cell_type": "code",
- "execution_count": 3,
+ "execution_count": 31,
"id": "06e83bd3-ba85-48f4-b3e0-99014887e3d1",
"metadata": {},
"outputs": [
@@ -202,7 +205,7 @@
" <iframe\n",
" width=\"100%\"\n",
" height=\"650\"\n",
- " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8051/jupyter/app_proxy/8051/\"\n",
+ " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8079/jupyter/app_proxy/8079/\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" \n",
@@ -210,7 +213,7 @@
" "
],
"text/plain": [
- "<IPython.lib.display.IFrame at 0x7f74c26b97c0>"
+ "<IPython.lib.display.IFrame at 0x7f74c039e400>"
]
},
"metadata": {},
@@ -228,7 +231,7 @@
" zoom = 5,\n",
" id = 'first_map')\n",
"\n",
- "app.layout = html.Div(children = mapComponent)\n",
+ "app.layout = html.Div(mapComponent)\n",
"\n",
"app.run_server(mode='inline', host=host, port=port, proxy=proxy)"
]
@@ -247,7 +250,7 @@
"\n",
"polygon = dl.Polygon(positions =[[43,2],[46,2],[46,4],[43,3]], id='polygon')\n",
"\n",
- "mapComponent = dl.Map(children = \n",
+ "mapComponent = dl.Map(children = #When we want our map to have multiple layers, we have to pass them as a list in the 'children' argument\n",
" [dl.TileLayer(),marker,polygon],\n",
" style={'width': '80%','height':'80vh','float': 'center','margin': 'auto'},\n",
" center = [46.5,2.25],\n",
@@ -255,7 +258,7 @@
" id = 'first_map')\n",
"```\n",
"\n",
- "We assign an id to each component because the callbacks which we will define in the next part will use them as inputs or outputs."
+ "We assign an id to each component because the callbacks which we will define in the next part will use them to refer to the components we want to use as inputs or outputs."
]
},
{
@@ -324,21 +327,19 @@
"\n",
"```Python\n",
"def print_click(n):\n",
- " return str(n)\n",
+ " return ('Marker clicks : ' + str(n))\n",
"``` \n",
"\n",
"The print_click function will be called every time the app detects an update on the 'n_clicks' component of the marker.\n",
"\n",
"```Python \n",
"txt_output = html.Div(id='result')\n",
- "app.layout = html.Div(children = (txt_output, mapComponent))\n",
+ "app.layout = html.Div(children = (txt_output, mapComponent)) #Just like the map component, to have multiple components in our layout they have to be in a list in the children attribute.\n",
"\n",
"@app.callback(Output('result','children'),Input('marker','n_clicks'))\n",
"def print_click(n):\n",
" return ('Marker clicks : ' + str(n))\n",
- "``` \n",
- "\n",
- "Callbacks are to be put after the app layout. "
+ "``` "
]
},
{
@@ -425,7 +426,7 @@
" zoom = 5,\n",
" id = 'first_map')\n",
"\n",
- "app.layout = html.Div(children = (colorselector,button, mapComponent ))\n",
+ "app.layout = html.Div(children = (colorselector,button, mapComponent))\n",
"\n",
"@app.callback(Output('polygon','fillColor'),Input('input_button','n_clicks'),State('color-dropdown','value'))\n",
"def poly_color(click,color):\n",
@@ -505,14 +506,129 @@
"metadata": {},
"source": [
"## GeoJSON rendering\n",
- "\n"
+ "\n",
+ "The Dash_Leaflet library offers the possibility to create map layers based on GeoJSON files. \n",
+ "`dl.GeoJSON` works just like other layers we have seen before. We can give the layer an id and use its different attributes inside callbacks.\n",
+ "\n",
+ "Here with 2 different GeoJSON files : departements.geojson for France's departments and regions.geojson for France's regions we can create a toggle which will make the geojson layer display either the regions or the departements.\n",
+ "\n",
+ "```Python\n",
+ "geojson = dl.GeoJSON(url=base_path+'assets/regions.geojson', # url to geojson file\n",
+ " zoomToBounds=True, # when true, zooms to bounds when data changes (e.g. on load)\n",
+ " zoomToBoundsOnClick=True, # when true, zooms to bounds of feature (e.g. polygon) on click\n",
+ " id=\"geojson-layer\"\n",
+ " )\n",
+ "\n",
+ "radioButtons = dcc.RadioItems(\n",
+ " options=[\n",
+ " {'label': 'Regions', 'value': 'region'},\n",
+ " {'label': 'Departements', 'value': 'departement'}\n",
+ " ],\n",
+ " value='regions',\n",
+ " id='radio-buttons',\n",
+ " style ={'float':'center'}\n",
+ ")\n",
+ "\n",
+ "mapComponent = dl.Map(children = \n",
+ " [dl.TileLayer(),geojson],\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",
+ "@app.callback(Output('geojson-layer','url'),Input('radio-buttons','value'))\n",
+ "def switch_file(value):\n",
+ " return (base_path+'assets/' + value + 's.geojson')\n",
+ "```\n",
+ "So the GeoJSON layer works as a callback output, but it can also work as an input. \n",
+ "Each polygon drawn in the layer has different features such as the `click_feature` which updates when any of the polygon is clicked and allows us to get informations on it.\n",
+ "\n",
+ "```Python\n",
+ "txt_output = html.Div(id='result',style={'float': 'left','margin': 'auto','color':'red'})\n",
+ "\n",
+ "@app.callback(Output('result','children'),Input('geojson-layer','click_feature'),State('radio-buttons','value'))\n",
+ "def get_name(feature,value):\n",
+ " return (value + ' : ' + feature['properties']['nom'])\n",
+ "\n",
+ "app.layout = html.Div(children = (radioButtons, mapComponent, txt_output))\n",
+ "```"
]
},
{
"cell_type": "code",
- "execution_count": null,
+ "execution_count": 50,
"id": "72ade10f-9d80-4507-8e54-15d667ae15a9",
"metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/html": [
+ "\n",
+ " <iframe\n",
+ " width=\"100%\"\n",
+ " height=\"650\"\n",
+ " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8097/jupyter/app_proxy/8097/\"\n",
+ " frameborder=\"0\"\n",
+ " allowfullscreen\n",
+ " \n",
+ " ></iframe>\n",
+ " "
+ ],
+ "text/plain": [
+ "<IPython.lib.display.IFrame at 0x7f74b0729790>"
+ ]
+ },
+ "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",
+ "geojson = dl.GeoJSON(url=base_path+'assets/regions.geojson', # url to geojson file\n",
+ " zoomToBounds=True, # when true, zooms to bounds when data changes (e.g. on load)\n",
+ " zoomToBoundsOnClick=True, # when true, zooms to bounds of feature (e.g. polygon) on click\n",
+ " id=\"geojson-layer\"\n",
+ " )\n",
+ "\n",
+ "radioButtons = dcc.RadioItems(\n",
+ " options=[\n",
+ " {'label': 'Regions', 'value': 'region'},\n",
+ " {'label': 'Departements', 'value': 'departement'}\n",
+ " ],\n",
+ " value='region',\n",
+ " id='radio-buttons',\n",
+ " style ={'float':'center'}\n",
+ ")\n",
+ "\n",
+ "txt_output = html.Div(id='result',style={'float': 'left','margin': 'auto','color':'red'})\n",
+ "\n",
+ "mapComponent = dl.Map(children = \n",
+ " [dl.TileLayer(),geojson],\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",
+ "@app.callback(Output('geojson-layer','url'),Input('radio-buttons','value'))\n",
+ "def switch_file(value):\n",
+ " return (base_path+'assets/' + value + 's.geojson')\n",
+ "\n",
+ "@app.callback(Output('result','children'),Input('geojson-layer','click_feature'),State('radio-buttons','value'))\n",
+ "def get_name(feature,value):\n",
+ " return (value + ' : ' + feature['properties']['nom'])\n",
+ "\n",
+ "app.layout = html.Div(children = (radioButtons, mapComponent,txt_output))\n",
+ "app.run_server(mode='inline', host=host, port=port, proxy=proxy)"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "id": "6ab4e665-61a5-4338-9251-d4a20439d426",
+ "metadata": {},
"outputs": [],
"source": []
}
diff --git a/dash/dash-leaflet.ipynb b/dash/dash-leaflet.ipynb
index e5812d1fe87a45781e0efff4a102b6abc53dfb27..e36782ad3cc920b615dcd72cca0967853b4b65a9 100644
--- a/dash/dash-leaflet.ipynb
+++ b/dash/dash-leaflet.ipynb
@@ -88,11 +88,12 @@
"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",
+ " {'label': 'Paris', 'value': 'paris'},\n",
+ " {'label': 'Lyon', 'value': 'lyon'},\n",
+ " {'label': 'Marseille', 'value': 'marseille'},\n",
+ " {'label': 'Grenoble', 'value': 'grenoble'}\n",
" ],\n",
- " value='NYC'\n",
+ " value='paris' #The value that will be intially selected\n",
" )\n",
"```\n",
"\n",
@@ -122,7 +123,7 @@
" <iframe\n",
" width=\"100%\"\n",
" height=\"650\"\n",
- " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8050/jupyter/app_proxy/8050/\"\n",
+ " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8098/jupyter/app_proxy/8098/\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" \n",
@@ -130,7 +131,7 @@
" "
],
"text/plain": [
- "<IPython.lib.display.IFrame at 0x7f74c2709e80>"
+ "<IPython.lib.display.IFrame at 0x7f3926036070>"
]
},
"metadata": {},
@@ -154,11 +155,12 @@
"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",
+ " {'label': 'Paris', 'value': 'paris'},\n",
+ " {'label': 'Lyon', 'value': 'lyon'},\n",
+ " {'label': 'Marseille', 'value': 'marseille'},\n",
+ " {'label': 'Grenoble', 'value': 'grenoble'}\n",
" ],\n",
- " value='NYC'\n",
+ " value='paris'\n",
" )\n",
"\n",
"app.layout = html.Div(dropdown)\n",
@@ -171,7 +173,8 @@
"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 add a default map layer based on OpenStreetMap.\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.\n",
+ "We need to draw some map tiles, by adding ``` dl.TileLayer()``` as an argument, Dash Leaflet will add a default map layer based on OpenStreetMap.\n",
"\n",
"```Python\n",
"mapComponent = dl.Map(children=\n",
@@ -182,7 +185,7 @@
" id = 'first_map'\n",
" )\n",
"\n",
- "app.layout = html.Div(children = mapComponent)\n",
+ "app.layout = html.Div(mapComponent) \n",
"```\n",
"\n",
"\n",
@@ -202,7 +205,7 @@
" <iframe\n",
" width=\"100%\"\n",
" height=\"650\"\n",
- " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8051/jupyter/app_proxy/8051/\"\n",
+ " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8099/jupyter/app_proxy/8099/\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" \n",
@@ -210,7 +213,7 @@
" "
],
"text/plain": [
- "<IPython.lib.display.IFrame at 0x7f74c26b97c0>"
+ "<IPython.lib.display.IFrame at 0x7f397041baf0>"
]
},
"metadata": {},
@@ -228,7 +231,7 @@
" zoom = 5,\n",
" id = 'first_map')\n",
"\n",
- "app.layout = html.Div(children = mapComponent)\n",
+ "app.layout = html.Div(mapComponent)\n",
"\n",
"app.run_server(mode='inline', host=host, port=port, proxy=proxy)"
]
@@ -247,7 +250,7 @@
"\n",
"polygon = dl.Polygon(positions =[[43,2],[46,2],[46,4],[43,3]], id='polygon')\n",
"\n",
- "mapComponent = dl.Map(children = \n",
+ "mapComponent = dl.Map(children = #When we want our map to have multiple layers, we have to pass them as a list in the 'children' argument\n",
" [dl.TileLayer(),marker,polygon],\n",
" style={'width': '80%','height':'80vh','float': 'center','margin': 'auto'},\n",
" center = [46.5,2.25],\n",
@@ -255,7 +258,7 @@
" id = 'first_map')\n",
"```\n",
"\n",
- "We assign an id to each component because the callbacks which we will define in the next part will use them as inputs or outputs."
+ "We assign an id to each component because the callbacks which we will define in the next part will use them to refer to the components we want to use as inputs or outputs."
]
},
{
@@ -271,7 +274,7 @@
" <iframe\n",
" width=\"100%\"\n",
" height=\"650\"\n",
- " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8054/jupyter/app_proxy/8054/\"\n",
+ " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8100/jupyter/app_proxy/8100/\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" \n",
@@ -279,7 +282,7 @@
" "
],
"text/plain": [
- "<IPython.lib.display.IFrame at 0x7f74c0dcd070>"
+ "<IPython.lib.display.IFrame at 0x7f3924763be0>"
]
},
"metadata": {},
@@ -324,26 +327,24 @@
"\n",
"```Python\n",
"def print_click(n):\n",
- " return str(n)\n",
+ " return ('Marker clicks : ' + str(n))\n",
"``` \n",
"\n",
"The print_click function will be called every time the app detects an update on the 'n_clicks' component of the marker.\n",
"\n",
"```Python \n",
"txt_output = html.Div(id='result')\n",
- "app.layout = html.Div(children = (txt_output, mapComponent))\n",
+ "app.layout = html.Div(children = (txt_output, mapComponent)) #Just like the map component, to have multiple components in our layout they have to be in a list in the children attribute.\n",
"\n",
"@app.callback(Output('result','children'),Input('marker','n_clicks'))\n",
"def print_click(n):\n",
" return ('Marker clicks : ' + str(n))\n",
- "``` \n",
- "\n",
- "Callbacks are to be put after the app layout. "
+ "``` "
]
},
{
"cell_type": "code",
- "execution_count": 5,
+ "execution_count": 10,
"id": "1d00d6d3-8c1f-4336-83ca-dcb40e408d2d",
"metadata": {},
"outputs": [
@@ -354,7 +355,7 @@
" <iframe\n",
" width=\"100%\"\n",
" height=\"650\"\n",
- " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8056/jupyter/app_proxy/8056/\"\n",
+ " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8106/jupyter/app_proxy/8106/\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" \n",
@@ -362,7 +363,7 @@
" "
],
"text/plain": [
- "<IPython.lib.display.IFrame at 0x7f74c056b880>"
+ "<IPython.lib.display.IFrame at 0x7f392476a730>"
]
},
"metadata": {},
@@ -375,7 +376,7 @@
"app = Dash(prevent_initial_callbacks=False, server_url=server_url, requests_pathname_prefix=base_path)\n",
"\n",
"marker = dl.Marker(position = [46.5,2.25], id ='marker')\n",
- "txt_output = html.Div(id='result',style={'float': 'left','margin': 'auto','color':'red'})\n",
+ "txt_output = html.Div(id='result',style={'float': 'left','margin': 'auto','color':'green'})\n",
"\n",
"mapComponent = dl.Map(children = \n",
" [dl.TileLayer(),marker],\n",
@@ -425,7 +426,7 @@
" zoom = 5,\n",
" id = 'first_map')\n",
"\n",
- "app.layout = html.Div(children = (colorselector,button, mapComponent ))\n",
+ "app.layout = html.Div(children = (colorselector,button, mapComponent))\n",
"\n",
"@app.callback(Output('polygon','fillColor'),Input('input_button','n_clicks'),State('color-dropdown','value'))\n",
"def poly_color(click,color):\n",
@@ -438,7 +439,7 @@
},
{
"cell_type": "code",
- "execution_count": 30,
+ "execution_count": 6,
"id": "d1bc382b-d86a-425b-96c9-53bbb0291267",
"metadata": {},
"outputs": [
@@ -449,7 +450,7 @@
" <iframe\n",
" width=\"100%\"\n",
" height=\"650\"\n",
- " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8078/jupyter/app_proxy/8078/\"\n",
+ " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8102/jupyter/app_proxy/8102/\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" \n",
@@ -457,7 +458,7 @@
" "
],
"text/plain": [
- "<IPython.lib.display.IFrame at 0x7f74c026ff70>"
+ "<IPython.lib.display.IFrame at 0x7f39246c5850>"
]
},
"metadata": {},
@@ -505,14 +506,129 @@
"metadata": {},
"source": [
"## GeoJSON rendering\n",
- "\n"
+ "\n",
+ "The Dash_Leaflet library offers the possibility to create map layers based on GeoJSON files. \n",
+ "`dl.GeoJSON` works just like other layers we have seen before. We can give the layer an id and use its different attributes inside callbacks.\n",
+ "\n",
+ "Here with 2 different GeoJSON files : departements.geojson for France's departments and regions.geojson for France's regions we can create a toggle which will make the geojson layer display either the regions or the departements.\n",
+ "\n",
+ "```Python\n",
+ "geojson = dl.GeoJSON(url=base_path+'assets/regions.geojson', # url to geojson file\n",
+ " zoomToBounds=True, # when true, zooms to bounds when data changes (e.g. on load)\n",
+ " zoomToBoundsOnClick=True, # when true, zooms to bounds of feature (e.g. polygon) on click\n",
+ " id=\"geojson-layer\"\n",
+ " )\n",
+ "\n",
+ "radioButtons = dcc.RadioItems(\n",
+ " options=[\n",
+ " {'label': 'Regions', 'value': 'region'},\n",
+ " {'label': 'Departements', 'value': 'departement'}\n",
+ " ],\n",
+ " value='regions',\n",
+ " id='radio-buttons',\n",
+ " style ={'float':'center'}\n",
+ ")\n",
+ "\n",
+ "mapComponent = dl.Map(children = \n",
+ " [dl.TileLayer(),geojson],\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",
+ "@app.callback(Output('geojson-layer','url'),Input('radio-buttons','value'))\n",
+ "def switch_file(value):\n",
+ " return (base_path+'assets/' + value + 's.geojson')\n",
+ "```\n",
+ "So the GeoJSON layer works as a callback output, but it can also work as an input. \n",
+ "Each polygon drawn in the layer has different features such as the `click_feature` which updates when any of the polygon is clicked and allows us to get informations on it.\n",
+ "\n",
+ "```Python\n",
+ "txt_output = html.Div(id='result',style={'float': 'left','margin': 'auto','color':'red'})\n",
+ "\n",
+ "@app.callback(Output('result','children'),Input('geojson-layer','click_feature'),State('radio-buttons','value'))\n",
+ "def get_name(feature,value):\n",
+ " return (value + ' : ' + feature['properties']['nom'])\n",
+ "\n",
+ "app.layout = html.Div(children = (radioButtons, mapComponent, txt_output))\n",
+ "```"
]
},
{
"cell_type": "code",
- "execution_count": null,
+ "execution_count": 11,
"id": "72ade10f-9d80-4507-8e54-15d667ae15a9",
"metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/html": [
+ "\n",
+ " <iframe\n",
+ " width=\"100%\"\n",
+ " height=\"650\"\n",
+ " src=\"https://dev.tetras-lab.io:443/jupyter/app_proxy/8107/jupyter/app_proxy/8107/\"\n",
+ " frameborder=\"0\"\n",
+ " allowfullscreen\n",
+ " \n",
+ " ></iframe>\n",
+ " "
+ ],
+ "text/plain": [
+ "<IPython.lib.display.IFrame at 0x7f392464d310>"
+ ]
+ },
+ "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",
+ "geojson = dl.GeoJSON(url=base_path+'assets/regions.geojson', # url to geojson file\n",
+ " zoomToBounds=True, # when true, zooms to bounds when data changes (e.g. on load)\n",
+ " zoomToBoundsOnClick=True, # when true, zooms to bounds of feature (e.g. polygon) on click\n",
+ " id=\"geojson-layer\"\n",
+ " )\n",
+ "\n",
+ "radioButtons = dcc.RadioItems(\n",
+ " options=[\n",
+ " {'label': 'Regions', 'value': 'region'},\n",
+ " {'label': 'Departements', 'value': 'departement'}\n",
+ " ],\n",
+ " value='region',\n",
+ " id='radio-buttons',\n",
+ " style ={'float':'center'}\n",
+ ")\n",
+ "\n",
+ "txt_output = html.Div(id='result',children='Click a polygon !', style={'float': 'left','margin': 'auto','color':'green'})\n",
+ "\n",
+ "mapComponent = dl.Map(children = \n",
+ " [dl.TileLayer(),geojson],\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",
+ "@app.callback(Output('geojson-layer','url'),Input('radio-buttons','value'))\n",
+ "def switch_file(value):\n",
+ " return (base_path+'assets/' + value + 's.geojson')\n",
+ "\n",
+ "@app.callback(Output('result','children'),Input('geojson-layer','click_feature'),State('radio-buttons','value'))\n",
+ "def get_name(feature,value):\n",
+ " return (value + ' : ' + feature['properties']['nom'])\n",
+ "\n",
+ "app.layout = html.Div(children = (radioButtons, mapComponent,txt_output))\n",
+ "app.run_server(mode='inline', host=host, port=port, proxy=proxy)"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": null,
+ "id": "6ab4e665-61a5-4338-9251-d4a20439d426",
+ "metadata": {},
"outputs": [],
"source": []
}