panel_pydeck_mvtlayer_tooltip_experiment.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "74d95f41",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "default_view": {
        "hidden": true
       }
      }
     }
    },
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "import os\n",
    "import pandas as pd\n",
    "import pydeck as pdk\n",
    "import panel as pn\n",
    "pn.extension('deckgl')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "67edb9ad",
   "metadata": {},
   "source": [
    "### Define the initial view state"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "89849cb5",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "default_view": {
        "hidden": true
       }
      }
     }
    },
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "INITIAL_VIEW_STATE = pdk.ViewState(\n",
    "  latitude=38,\n",
    "  longitude=-97,\n",
    "  zoom=3,\n",
    "  min_zoom=3,\n",
    "  max_zoom=16,\n",
    "  pitch=0,\n",
    "  bearing=0\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "238ae516",
   "metadata": {},
   "source": [
    "### Define the MVTLayer\n",
    "#### Relevant Mapbox API Reference: https://docs.mapbox.com/api/maps/vector-tiles/\n",
    "#### Uses the national grazing allotment vector tiles hosted on Mapbox Studio"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a83b503e",
   "metadata": {},
   "outputs": [],
   "source": [
    "ACCESS_TOKEN = %env MAPBOX_ACCESS_TOKEN"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "400eefea",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "default_view": {
        "hidden": true
       }
      }
     }
    },
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "layer = pdk.Layer(\n",
    "    \"MVTLayer\",\n",
    "    'https://api.mapbox.com/v4/diehl.6baso3o2/{z}/{x}/{y}.mvt?access_token='+ACCESS_TOKEN,\n",
    "    get_line_color = [0, 255, 0],\n",
    "    line_width_min_pixels = 1,\n",
    "    pickable=True\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f9b7004f",
   "metadata": {},
   "source": [
    "### PyDeck visualization - Custom tooltip works"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "aeaceac1",
   "metadata": {
    "extensions": {
     "jupyter_dashboards": {
      "version": 1,
      "views": {
       "default_view": {
        "hidden": true
       }
      }
     }
    },
    "scrolled": true,
    "slideshow": {
     "slide_type": "-"
    }
   },
   "outputs": [],
   "source": [
    "TOOLTIP_HTML = ('<b>{ALLOT_NAME}</b><br />'\n",
    "                '<b>Allotment #</b>: {ALLOT_NO}<br />'\n",
    "                '<b>Acres</b>: {GIS_ACRES}<br />')\n",
    "\n",
    "r = pdk.Deck(\n",
    "    layers=[layer],\n",
    "    initial_view_state=INITIAL_VIEW_STATE,\n",
    "    map_style='dark',\n",
    "    tooltip={'html': TOOLTIP_HTML}\n",
    ")\n",
    "r.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d20a5748",
   "metadata": {},
   "source": [
    "### Panel+PyDeck visualization - Custom tooltip does not display data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "979ae575",
   "metadata": {},
   "outputs": [],
   "source": [
    "map = pn.pane.DeckGL(r, sizing_mode='stretch_both')  \n",
    "map.show() "
   ]
  }
 ],
 "metadata": {
  "extensions": {
   "jupyter_dashboards": {
    "activeView": "default_view",
    "version": 1,
    "views": {
     "default_view": {
      "cellMargin": 10,
      "defaultCellHeight": 40,
      "maxColumns": 12,
      "name": "active_view",
      "type": "grid"
     }
    }
   }
  },
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "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.9.16"
  },
  "voila": {
   "theme": "dark"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}

Using {properties.<DATA_FIELD_NAME>} as opposed to {<DATA_FIELD_NAME>} above fixes the issue.