🛰️

.gitignore

@@ -4,3 +4,4 @@ _build
 conf.py
 package-lock.json
 package.json
+Untitled.ipynb

myst.yml

@@ -32,6 +32,7 @@ project:
         - file: reading/07-ibis-4.ipynb
         - file: reading/spatial-1.ipynb
         - file: reading/spatial-2.ipynb
+        - file: reading/spatial-3.ipynb
 
 site:
   template: book-theme

reading/spatial-2.ipynb

@@ -32,7 +32,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "271c0afa00394d1bb38c3edcc9e0058e",
+       "model_id": "9eee4222e406459a9ee6f14f9327a784",
        "version_major": 2,
        "version_minor": 0
       },
@@ -83,7 +83,7 @@
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "8cf9736d206b4108830e3093f07427df",
+       "model_id": "237d8fb05c3f4794b2f823cb555a927d",
        "version_major": 2,
        "version_minor": 1
       },
@@ -103,9 +103,27 @@
     "m"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "70663683-ca61-4150-beb0-14c4f1890f84",
+   "metadata": {},
+   "source": [
+    "Because our map is an interactive javascript applet, putting `m` at the end of the a cell will allow it to display inline in Jupyter, but not in 'static' documentation such as the course website or a GitHub rendering of the notebook.  To share our map, we can export it to an HTML file.  This allows any web browser to view and interact with the map without having to install `jupyter` or `python`.  "
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": 5,
+   "id": "f7bbe798-585f-4ec7-9099-a836b25b6be2",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m.to_html(\"../data/nh1.html\", overwrite=True)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 6,
    "id": "8a433141-72bd-4b8c-8e46-ed4c86aeb12d",
    "metadata": {
     "scrolled": true
@@ -118,34 +136,34 @@
        "        <iframe\n",
        "            width=\"700\"\n",
        "            height=\"400\"\n",
-       "            src=\"../data/nh1.html\"\n",
+       "            src=\"https://espm-157.carlboettiger.info/build/nh1-f227d00042a353d1f2aa8004304f376f.html\"\n",
        "            frameborder=\"0\"\n",
        "            allowfullscreen\n",
        "            \n",
        "        ></iframe>\n",
        "        "
       ],
       "text/plain": [
-       "<IPython.lib.display.IFrame at 0x76d1a6b09850>"
+       "<IPython.lib.display.IFrame at 0x72cf105fd4d0>"
       ]
      },
-     "execution_count": 5,
+     "execution_count": 6,
      "metadata": {},
      "output_type": "execute_result"
     }
    ],
    "source": [
-    "#| remove-cell\n",
-    "m.to_html(\"../data/nh1.html\", overwrite=True)\n",
-    "IFrame(src='../data/nh1.html', width=700, height=400)"
+    "#| hide-input\n",
+    "# display map on course website by using an iframe to the output URL \n",
+    "IFrame(src='https://espm-157.carlboettiger.info/build/nh1-f227d00042a353d1f2aa8004304f376f.html', width=700, height=400)"
    ]
   },
   {
    "cell_type": "markdown",
    "id": "0c20600a-03cc-43bd-8bee-b72fe2f33464",
    "metadata": {},
    "source": [
-    "[rendered map](../data/nh1.html)"
+    "[rendered map fullscreen](../data/nh1.html)"
    ]
   },
   {
@@ -154,16 +172,90 @@
    "metadata": {},
    "source": [
     "## Map styling \n",
+    "\n",
+    "Leafmap allows us to add many _layers_ to our map from various data sources, and gives us a rich set of tools for styling the look and feel of most of those data layers.  The example below illustrates how we can use the data column called \"fill\", which corresponds to the redlining \"grade\" associated with each layer, \n",
     "\n"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": null,
+   "execution_count": 8,
    "id": "22704317-bcc5-421b-b78b-5b9149124b3f",
    "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/vnd.jupyter.widget-view+json": {
+       "model_id": "fca6c9d5762a424e90e6de4eb77fec44",
+       "version_major": 2,
+       "version_minor": 1
+      },
+      "text/plain": [
+       "Map(height='600px', map_options={'bearing': 0, 'center': (0, 20), 'pitch': 0, 'style': 'https://tiles.openfree…"
+      ]
+     },
+     "execution_count": 8,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "m = leafmap.Map(style=\"positron\")\n",
+    "\n",
+    "\n",
+    "paint = {\n",
+    "    \"fill-color\": [\"get\", \"fill\"], # color by the column called \"fill\"\n",
+    "    \"fill-opacity\": 0.8,\n",
+    "}\n",
+    "\n",
+    "m.add_basemap(\"Esri.NatGeoWorldMap\")\n",
+    "m.add_gdf(city, layer_type=\"fill\", name=\"Redlining\", paint=paint)\n",
+    "\n",
+    "m.add_layer_control()\n",
+    "m.to_html(\"../data/nh2.html\", overwrite=True)\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "ce17c3da-fbcb-42d5-b377-6a7b97c8fd74",
+   "metadata": {},
+   "source": [
+    "[rendered map fullscreen](../data/nh2.html)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "7aa49687-4c6f-466c-811c-e57637ce1bb7",
+   "metadata": {},
    "outputs": [],
-   "source": []
+   "source": [
+    "#| hide-input\n",
+    "# display map on course website by using an iframe to the output URL \n",
+    "IFrame(src='https://espm-157.carlboettiger.info/build/nh2-f227d00042a353d1f2aa8004304f376f.html', width=700, height=400)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "b17a5c05-d69b-423b-b9ff-d94a645279f8",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "## list all basemaps known to leafmap\n",
+    "#list(leafmap.basemaps.keys())"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "5f662fdd-2227-47ee-8af0-aa05e93427a4",
+   "metadata": {},
+   "source": [
+    "### Performance\n",
+    "\n",
+    "Visualizing data on an interactive map is a challenging technical task because of the potential size of the data: To show the user data while they pan and zoom around the map across scales from city to planet-wide can involve trillions of pixels that must be loaded, plotted and styled.  Clever software takes advantage of the users's current zoom and field of view to render only the data the user can currently see, loading more data 'on demand' as the user moves the map.  Careful preparation of data layers into \"tiles\" pre-computed at different \"zooms\", data compression, and data chunking can dramatically improve the map's ability to render massive datasets smoothly. "
+   ]
   }
  ],
  "metadata": {