{
 "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 link a JSON editor to a DeckGL pane to enable 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",
    "pn.Row(pn.Column(view_editor, layer_editor), deck_gl)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "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.7.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
