Wrap new gallery examples into apps (#2546)

* wrapped into an app

* wrap LeafletHeatMap into a nice template

examples/gallery/components/CanvasDraw.ipynb

@@ -31,7 +31,7 @@
     "    _template = \"\"\"\n",
     "    <canvas \n",
     "      id=\"canvas\"\n",
-    "      style=\"border: 1px solid;\"\n",
+    "      style=\"border: 1px solid\"\n",
     "      width=\"${model.width}\"\n",
     "      height=\"${model.height}\"\n",
     "      onmousedown=\"${script('start')}\"\n",
@@ -92,7 +92,7 @@
     "canvas = Canvas(width=400, height=400)\n",
     "\n",
     "# We create a separate HTML element which syncs with the uri parameter of the Canvas\n",
-    "png_view = pn.pane.HTML()\n",
+    "png_view = pn.pane.HTML(height=400)\n",
     "canvas.jslink(png_view, code={'uri': \"target.text = `<img src='${source.uri}'></img>`\"})\n",
     "\n",
     "pn.Column(\n",
@@ -104,6 +104,29 @@
     "    )\n",
     ")"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## App\n",
+    "\n",
+    "Let's wrap it into nice template that can be served via `panel serve CanvasDraw.ipynb`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "description=pn.pane.Markdown(\"This example shows how to use the `ReactiveHTML` component to develop a **Drawable Canvas**.\", sizing_mode=\"stretch_width\")\n",
+    "pn.template.FastListTemplate(\n",
+    "    site=\"Panel\", title=\"Canvas Draw\", \n",
+    "    sidebar=[canvas.controls(['color', 'line_width'])], \n",
+    "    main=[description, pn.Row(canvas, png_view, height=460)]\n",
+    ").servable();"
+   ]
   }
  ],
  "metadata": {
@@ -122,7 +145,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.8"
+   "version": "3.8.4"
   },
   "widgets": {
    "application/vnd.jupyter.widget-state+json": {

examples/gallery/components/LeafletHeatMap.ipynb

@@ -103,7 +103,8 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "earthquakes = pd.read_csv(\"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv\")\n",
+    "url=\"http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv\"\n",
+    "earthquakes = pd.read_csv(url)\n",
     "\n",
     "heatmap = LeafletHeatMap(\n",
     "    attribution='Map data &copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors',\n",
@@ -116,8 +117,10 @@
     "    zoom=2,\n",
     ")\n",
     "\n",
+    "description=pn.pane.Markdown(f'## Earthquakes between {earthquakes.time.min()} and {earthquakes.time.max()}\\n\\n[Data Source]({url})', sizing_mode=\"stretch_width\")\n",
+    "\n",
     "pn.Column(\n",
-    "    f'# Earthquakes between {earthquakes.time.min()} and {earthquakes.time.max()}',\n",
+    "    description,\n",
     "    pn.Row(\n",
     "        heatmap.controls(['blur', 'min_alpha', 'radius', 'zoom']),\n",
     "        heatmap,\n",
@@ -126,6 +129,28 @@
     "    sizing_mode='stretch_both'\n",
     ")"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## App\n",
+    "\n",
+    "Let's wrap it into nice template that can be served via `panel serve LeafletHeatMap.ipynb`"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.template.FastListTemplate(\n",
+    "    site=\"Panel\", title=\"Leaflet Heat Map\", \n",
+    "    sidebar=[heatmap.controls(['blur', 'min_alpha', 'radius', 'zoom'])], \n",
+    "    main=[description, pn.Row(heatmap, sizing_mode=\"stretch_both\")]\n",
+    ").servable();"
+   ]
   }
  ],
  "metadata": {
@@ -144,7 +169,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.8.8"
+   "version": "3.8.4"
   },
   "widgets": {
    "application/vnd.jupyter.widget-state+json": {