feat: Table of contents #836
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,238 @@ | ||
| { | ||
| "cells": [ | ||
| { | ||
| "cell_type": "markdown", | ||
| "id": "a033bf32-69c9-48bc-a275-8ce1a3901365", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "## Layer Control\n", | ||
| "\n", | ||
| "This notebook demonstrates the use of the lonbord map's `layer_control`, to control layer visibility and layer properties." | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": null, | ||
| "id": "bb983a26-ab11-4070-91bd-c78371ca6d68", | ||
| "metadata": {}, | ||
| "outputs": [], | ||
| "source": [ | ||
| "from pathlib import Path\n", | ||
| "\n", | ||
| "import geopandas as gpd\n", | ||
| "from palettable.colorbrewer.sequential import Blues_8\n", | ||
| "\n", | ||
| "from lonboard import Map, PathLayer, PolygonLayer\n", | ||
| "from lonboard.colormap import apply_continuous_cmap" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "id": "3dcbf11b-6c10-46bc-a6de-1d1d37f4e8b6", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "### Get data\n", | ||
| "\n", | ||
| "Download data from the web and save as geoparquet so we can show some data on our Lonboard map and create a layer control." | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": null, | ||
| "id": "56896a28-4d72-426e-9ea0-2e3854e389f8", | ||
| "metadata": {}, | ||
| "outputs": [], | ||
| "source": [ | ||
| "file_urls = [\n", | ||
| " (\n", | ||
| " \"ne_10m_roads_north_america.parquet\",\n", | ||
| " \"https://naciscdn.org/naturalearth/10m/cultural/ne_10m_roads_north_america.zip\",\n", | ||
| " ),\n", | ||
| " (\n", | ||
| " \"geoBoundariesCGAZ_ADM1.parquet\",\n", | ||
| " \"https://github.com/wmgeolab/geoBoundaries/raw/main/releaseData/CGAZ/geoBoundariesCGAZ_ADM1.geojson\",\n", | ||
| " ),\n", | ||
| " (\n", | ||
| " \"rivers_asia_37331.parquet\",\n", | ||
| " \"https://storage.googleapis.com/fao-maps-catalog-data/geonetwork/aquamaps/rivers_asia_37331.zip\",\n", | ||
| " ),\n", | ||
| "]\n", | ||
| "for filename, url in file_urls:\n", | ||
| " if Path(filename).exists() is False:\n", | ||
| " print(f\"Reading {filename} from web and saving as geoparquet.\")\n", | ||
| " gdf = gpd.read_file(url, engine=\"pyogrio\")\n", | ||
| " gdf.to_parquet(filename)\n", | ||
| " del gdf\n", | ||
| " else:\n", | ||
| " print(f\"{filename} already downloaded.\")" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "id": "00e57959-6b12-4dc7-8621-6f725d928b96", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "### Read geoparquet files into geopandas dataframes" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": null, | ||
| "id": "230e851e-8bb9-4697-9143-688537c746a0", | ||
| "metadata": {}, | ||
| "outputs": [], | ||
| "source": [ | ||
| "boundary_df = gpd.read_parquet(\"geoBoundariesCGAZ_ADM1.parquet\")\n", | ||
| "road_df = gpd.read_parquet(\"ne_10m_roads_north_america.parquet\")\n", | ||
| "river_df = gpd.read_parquet(\"rivers_asia_37331.parquet\")" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "id": "f98bf950-2f66-47eb-8e3a-8123aa2083d5", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "### Create layers\n", | ||
| "\n", | ||
| "* Create a `PolygonLayer` from the boundary dataframe that is brown with a darker brown outline, that's 1 pixel wide.\n", | ||
| "\n", | ||
| "* Create a `PathLayer` from the road dataframe with a title and minimum width.\n", | ||
| "\n", | ||
| "* Create a `PathLayer` from the river dataframe that uses the 'Strahler' column for setting the color and width of the lines, as well as some defaults on the width to make the more prominent rivers darker and wider on the map." | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": null, | ||
| "id": "e3366f15-245f-4a8f-b87d-dcb7fd993392", | ||
| "metadata": {}, | ||
| "outputs": [], | ||
| "source": [ | ||
| "boundary_layer = PolygonLayer.from_geopandas(\n", | ||
| " boundary_df,\n", | ||
| " title=\"Boundaries\",\n", | ||
| " get_fill_color=[137, 81, 41],\n", | ||
| " get_line_color=[102, 60, 31],\n", | ||
| " get_line_width=1,\n", | ||
| " line_width_units=\"pixels\",\n", | ||
| " stroked=True,\n", | ||
| ")\n", | ||
| "\n", | ||
| "road_layer = PathLayer.from_geopandas(road_df, width_min_pixels=0.8)\n", | ||
| "\n", | ||
| "river_layer = PathLayer.from_geopandas(\n", | ||
| " river_df,\n", | ||
| " title=\"Rivers\",\n", | ||
| " get_color=apply_continuous_cmap(river_df[\"Strahler\"] / 7, Blues_8),\n", | ||
| " get_width=river_df[\"Strahler\"],\n", | ||
| " width_scale=3000,\n", | ||
| " width_min_pixels=0.5,\n", | ||
| ")" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "id": "9cdd3071-2dd6-4b77-b42d-7def62e3087d", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "### Create the Lonboard `Map` and `layer_control`\n", | ||
| "\n", | ||
| "Create a lonboard map, and then create a `layer_control` with the `include_settings` parameter to True then display them both.\n", | ||
| "\n", | ||
| "With `include_settings=True` we will get a layer control that includes the setttings cog, which when expanded will allow us to change some of the layer properties. Note that we did not give this layer a title, so when we make the layer control, the default title will show in the layer control.\n", | ||
| "\n", | ||
| "If the user unchecks the checkbox next to the layer's name the layer's visibility will be set to False.\n", | ||
| "\n", | ||
| "!!! note\n", | ||
| "\n", | ||
| " We're only adding the boundary and road layer at this point, not the river layer. We'll add that later, and when we do we can see the layer control automatically react to the new layer being added to the map, and it will show up in our layer control." | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": null, | ||
| "id": "ae4529e4-b656-47eb-8928-a51f02d038fb", | ||
| "metadata": {}, | ||
| "outputs": [], | ||
| "source": [ | ||
| "lonboard_map = Map([boundary_layer, road_layer])\n", | ||
| "lc = lonboard_map.layer_control(include_settings=True)\n", | ||
| "\n", | ||
| "display(lonboard_map)\n", | ||
| "display(lc)" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "id": "9c291004-4d2d-4f7f-9dcb-f3f1d098114f", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "### Change the title of the road layer\n", | ||
| "\n", | ||
| "By default the title of the layer is the layer's type. When we change the title of the layer, it will automatically be changed in the layer control." | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": null, | ||
| "id": "2039d785-3edb-44b8-bbb7-ab61397bdae4", | ||
| "metadata": {}, | ||
| "outputs": [], | ||
| "source": [ | ||
| "road_layer.title = \"Roads\"" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "markdown", | ||
| "id": "d475c61b-e0fd-4227-a3c1-aa2cabeec7d0", | ||
| "metadata": {}, | ||
| "source": [ | ||
| "### Add the River layer\n", | ||
| "\n", | ||
| "When we add the river layer to the map, the layer control will automatically detect the new layer, and also add it to the layer control.\n", | ||
| "\n", | ||
| "When we expand the cog for the river layer we will see that the `Color` and the `Width` properties of the layer display `Custom` instead of a color picker/float widget. \n", | ||
| "\"Custom\" is displayed in the layer control currently because the layer uses the values from the rows of data to render the lines. This may change in future releases of Lonboard." | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": null, | ||
| "id": "13a4bb69-6871-4e40-946f-27edccac9f05", | ||
| "metadata": {}, | ||
| "outputs": [], | ||
| "source": [ | ||
| "lonboard_map.add_layer(river_layer, reset_zoom=True)" | ||
| ] | ||
| }, | ||
| { | ||
| "cell_type": "code", | ||
| "execution_count": null, | ||
| "id": "0a3b72c2-8601-4ae6-8ebd-209a03f19aaf", | ||
| "metadata": {}, | ||
| "outputs": [], | ||
| "source": [] | ||
| } | ||
| ], | ||
| "metadata": { | ||
| "kernelspec": { | ||
| "display_name": "lonboard_toc", | ||
| "language": "python", | ||
| "name": "lonboard_toc" | ||
| }, | ||
| "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.11.11" | ||
| } | ||
| }, | ||
| "nbformat": 4, | ||
| "nbformat_minor": 5 | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Trying to render the geo boundaries file crashes VSCode for me and doesn't display well in Jupyter Lab. We should find a smaller file to work with, or just use the other two layers.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oh, I'm sorry! I'll do something to limit what gets displayed