panel_pydeck_responsiveness_issue.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": "6b02f53a",
   "metadata": {},
   "source": [
    "### Mapbox Access Token"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "35863cdf",
   "metadata": {},
   "outputs": [],
   "source": [
    "ACCESS_TOKEN = \"pk.eyJ1IjoicGFuZWxvcmciLCJhIjoiY2s1enA3ejhyMWhmZjNobjM1NXhtbWRrMyJ9.B_frQsAVepGIe-HiOJeqvQ\""
   ]
  },
  {
   "cell_type": "markdown",
   "id": "67edb9ad",
   "metadata": {},
   "source": [
    "### PyDeck Issue\n",
    "#### When clicking on geometries in the map, there is a noticeable lag between the click and the display of the click state - on the order of 100-200 ms. For Plotly plots, this delay is inperceptible. Is there a way to minimize this to the point where it appears instantaneous as in the Plotly example?"
   ]
  },
  {
   "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",
    ")\n",
    "\n",
    "mvt_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",
    "    get_fill_color = [0, 0, 0, 0], # Transparent fill\n",
    "    line_width_min_pixels = 1,\n",
    "    pickable=True\n",
    ")\n",
    "\n",
    "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=[mvt_layer],\n",
    "    initial_view_state=INITIAL_VIEW_STATE,\n",
    "    map_style='dark',\n",
    "    tooltip={'html': TOOLTIP_HTML}\n",
    ")\n",
    "\n",
    "map = pn.pane.DeckGL(r,sizing_mode='stretch_both')  \n",
    "pn.Row(map.controls(),map)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "23c7522a",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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
}