{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import json\n",
    "import panel as pn\n",
    "\n",
    "pn.extension('ace', 'deckgl')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This example demonstrates how to `jslink` a JSON editor to a DeckGL pane to enable super fast, live editing of a plot:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "MAPBOX_KEY = \"pk.eyJ1IjoicGFuZWxvcmciLCJhIjoiY2s1enA3ejhyMWhmZjNobjM1NXhtbWRrMyJ9.B_frQsAVepGIe-HiOJeqvQ\"\n",
    "\n",
    "json_spec = {\n",
    "    \"initialViewState\": {\n",
    "        \"bearing\": -27.36,\n",
    "        \"latitude\": 52.2323,\n",
    "        \"longitude\": -1.415,\n",
    "        \"maxZoom\": 15,\n",
    "        \"minZoom\": 5,\n",
    "        \"pitch\": 40.5,\n",
    "        \"zoom\": 6\n",
    "    },\n",
    "    \"layers\": [{\n",
    "        \"@@type\": \"HexagonLayer\",\n",
    "        \"autoHighlight\": True,\n",
    "        \"coverage\": 1,\n",
    "        \"data\": \"https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv\",\n",
    "        \"elevationRange\": [0, 3000],\n",
    "        \"elevationScale\": 50,\n",
    "        \"extruded\": True,\n",
    "        \"getPosition\": \"@@=[lng, lat]\",\n",
    "        \"id\": \"8a553b25-ef3a-489c-bbe2-e102d18a3211\", \"pickable\": True\n",
    "    }],\n",
    "    \"mapStyle\": \"mapbox://styles/mapbox/dark-v9\",\n",
    "    \"views\": [{\"@@type\": \"MapView\", \"controller\": True}]\n",
    "}\n",
    "\n",
    "\n",
    "view_editor = pn.widgets.Ace(value=json.dumps(json_spec['initialViewState'], indent=4),\n",
    "                             theme= 'monokai', width=500, height=225)\n",
    "layer_editor = pn.widgets.Ace(value=json.dumps(json_spec['layers'][0], indent=4),\n",
    "                             theme= 'monokai', width=500, height=365)\n",
    "\n",
    "deck_gl = pn.pane.DeckGL(json_spec, mapbox_api_key=MAPBOX_KEY, sizing_mode='stretch_width', height=600)\n",
    "\n",
    "view_editor.jscallback(args={'deck_gl': deck_gl}, value=\"deck_gl.initialViewState = JSON.parse(cb_obj.code)\")\n",
    "layer_editor.jscallback(args={'deck_gl': deck_gl}, value=\"deck_gl.layers = [JSON.parse(cb_obj.code)]\")\n",
    "\n",
    "editor = pn.Row(pn.Column(view_editor, layer_editor), deck_gl)\n",
    "editor"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## App\n",
    "\n",
    "Lets wrap it into nice template that can be served via `panel serve deck_gl_json_editor.ipynb`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.template.FastListTemplate(\n",
    "    site=\"Panel\", title=\"Deck.gl Json Editor\", \n",
    "    main=[\n",
    "        pn.pane.Markdown(\"This example demonstrates two JSON editors `jslink`ed to a DeckGL pane to enable super fast, live editing of a plot:\", sizing_mode=\"stretch_width\"),\n",
    "        editor\n",
    "    ]\n",
    ").servable();"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}