Table of contents

examples/index.md

@@ -13,7 +13,7 @@
 -  [Rivers in Asia ![](../assets/rivers-asia.jpg)](../examples/map_challenge/6-asia/) using [`PathLayer`](../api/layers/path-layer)
 -  [Inflation Reduction Act Projects ![](../assets/column-layer.jpg)](../examples/column-layer/) using [`ColumnLayer`](../api/layers/column-layer)
 -  [Linked Maps ![](../assets/linked-maps.gif)](../examples/linked-maps/)
-
+-  [Table of contents ![](../assets/table-of-contents.jpeg)](../examples/lonboard-table-of-contents/)
 </div>
 
 ## Integrations

examples/lonboard-table-of-contents.ipynb

@@ -0,0 +1,190 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "a9528b4f-0597-4eba-a618-35cdb738a685",
+   "metadata": {},
+   "source": [
+    "# Lonboard Table of Contents\n",
+    "\n",
+    "This notebook demonstrates using the Lonboard controls to make a table of contents from a Lonboard map."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "2c1be9b5-feea-4072-b356-228dfdb86331",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import shapely\n",
+    "import geopandas as gpd\n",
+    "\n",
+    "import lonboard"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "8d9af9fa-5e4c-48cf-88fa-031dd0b3f78e",
+   "metadata": {},
+   "source": [
+    "#### Make some simple dataframes and layers\n",
+    "\n",
+    "This notebook is not to demonstrate the speed of Lonboard, rather, it is simply to show the table of contents.  Some simple geodataframes with one row each will be sufficient to make layers to add to a map."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "id": "00ae8b4b-ea2d-42d2-8ce0-c17372b08fd1",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "point = shapely.Point(-90, 38.8)\n",
+    "point_df = gpd.GeoDataFrame(\n",
+    "    [point],\n",
+    "    columns=[\"geometry\"],\n",
+    "    geometry=\"geometry\",\n",
+    "    crs=4326\n",
+    ")\n",
+    "point_layer = lonboard.ScatterplotLayer.from_geopandas(\n",
+    "    point_df,\n",
+    "    title=\"Point Layer\",\n",
+    "    radius_min_pixels=10,\n",
+    "    get_fill_color=[255, 255, 0]\n",
+    ")\n",
+    "\n",
+    "line = shapely.LineString([[-91, 38], [-90, 39]])\n",
+    "line_df = gpd.GeoDataFrame(\n",
+    "    [line],\n",
+    "    columns=[\"geometry\"],\n",
+    "    geometry=\"geometry\",\n",
+    "    crs=4326,\n",
+    ")\n",
+    "line_layer = lonboard.PathLayer.from_geopandas(\n",
+    "    line_df,\n",
+    "    title=\"Line Layer\",\n",
+    "    width_min_pixels=10,\n",
+    "    get_color=[124, 124, 124]\n",
+    ")\n",
+    "\n",
+    "polygon = shapely.Polygon([[-91, 38], [-90, 39], [-89, 38.5]])\n",
+    "polygon_df = gpd.GeoDataFrame(\n",
+    "    [polygon],\n",
+    "    columns=[\"geometry\"],\n",
+    "    geometry=\"geometry\",\n",
+    "    crs=4326\n",
+    ")\n",
+    "polygon_layer = lonboard.PolygonLayer.from_geopandas(\n",
+    "    polygon_df,\n",
+    "    title=\"Polygon Layer\"\n",
+    ")"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "f2c7c703-fbd1-4084-98fc-b755ece60f72",
+   "metadata": {},
+   "source": [
+    "#### Make the map with the polygon and line layers and then make a table of contents from the map\n",
+    "\n",
+    "The checkboxes in the table of contents toggle the layer's visibility.\n",
+    "\n",
+    "If you click the settings gear for a layer in the TOC, the layer's traits are exposed and can be changed by the user"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "id": "345b2305-4a00-4adb-9117-bf2f3efb60eb",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "2bcf1687e5854cd1837da4e277da38b1",
+       "version_major": 2,
+       "version_minor": 1
+      },
+      "text/plain": [
+       "Map(custom_attribution='', layers=(PolygonLayer(table=arro3.core.Table\n",
+       "-----------\n",
+       "geometry: List(Field { name…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    },
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "fa1470fcc4a54257bc6e5282aac72a23",
+       "version_major": 2,
+       "version_minor": 0
+      },
+      "text/plain": [
+       "VBox(children=(VBox(children=(HBox(children=(Checkbox(value=True, description='Polygon Layer', indent=False, l…"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "lonboard_map = lonboard.Map([polygon_layer, line_layer])\n",
+    "lonboard_toc = lonboard.controls.make_TOC(lonboard_map)\n",
+    "display(lonboard_map)\n",
+    "display(lonboard_toc)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "8ebcad27-da7d-44be-bf91-c1f6dadf24e2",
+   "metadata": {},
+   "source": [
+    "### Table of contents is reactive to changes\n",
+    "\n",
+    "If you add a layer to the map after it is created, the table of content will dynamically refresh itself and show the new layer"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 5,
+   "id": "a82f2fb5-305b-47e8-9db9-30ed78d6a722",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "lonboard_map.add_layer(point_layer)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "cce264ba-0426-4db2-81eb-c33cf01556dc",
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "lonboard",
+   "language": "python",
+   "name": "lonboard"
+  },
+  "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.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

lonboard/_layer.py

@@ -271,6 +271,12 @@ def _add_extension_traits(self, extensions: Sequence[BaseExtension]):
     for an example.
     """
 
+    title = t.CUnicode("Layer", allow_none=False).tag(sync=True)
+    """
+    The title of the layer.  The title of the layer is visible in the table of
+    contents produced by the lonboard.controls.make_TOC() function.
+    """
+
 
 def default_geoarrow_viewport(
     table: Table,