A minimal-working example of an ESRI widget

HelloSceneView.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "from traitlets import Unicode, validate\n",
    "\n",
    "\n",
    "class HelloSceneWidget(widgets.DOMWidget):\n",
    "    _view_name = Unicode('HelloSceneView').tag(sync=True)\n",
    "    _view_module = Unicode('helloscene').tag(sync=True)\n",
    "    _view_module_version = Unicode('0.1.0').tag(sync=True)\n",
    "    \n",
    "    value = Unicode('topo').tag(sync=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "\n",
       "var esriCDN =  location.protocol + \"//js.arcgis.com/4.4/\"\n",
       "\n",
       "require.config({\n",
       "      // Define path mappings for modules\n",
       "      paths: {\n",
       "        // [1] Modules hosted on Esri CDN.\n",
       "        \"dojo\":         esriCDN + \"dojo\",\n",
       "        \"dojox\":        esriCDN + \"dojox\",\n",
       "        \"dijit\":        esriCDN + \"dijit\",\n",
       "        \"esri\":         esriCDN + \"esri\",\n",
       "        \"dgrid\":        esriCDN + \"dgrid\",\n",
       "        \"xstyle\":       esriCDN + \"xstyle\",\n",
       "        \"put-selector\": esriCDN + \"put-selector\",\n",
       "        \"moment\":       esriCDN + \"moment\",\n",
       "      },\n",
       "});\n",
       "\n",
       "define('helloscene', [\n",
       "     \"@jupyter-widgets/base\",\n",
       "     //\"jupyter-js-widgets\",\n",
       "     \"esri/Map\",\n",
       "     \"esri/views/SceneView\",\n",
       "     \"dojo/domReady!\"\n",
       "], function(widgets, Map, SceneView) {\n",
       "    // Define the HelloView\n",
       "    var HelloSceneView = widgets.DOMWidgetView.extend({\n",
       "        render: function() {\n",
       "            $('<meta charset=\"utf-8\">').appendTo('head');\n",
       "            $('<meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\">').appendTo('head');\n",
       "            $('<link rel=\"stylesheet\" type=\"text/css\" href=\"https://js.arcgis.com/4.4/esri/css/main.css\"/>').appendTo('head');\n",
       "\n",
       "            var map = new Map({\n",
       "                basemap: \"streets\",\n",
       "                ground: \"world-elevation\"\n",
       "            });\n",
       "            var view = new SceneView({\n",
       "                container: this.el,  // Reference to the DOM node that will contain the view\n",
       "                map: map  // References the map object created in step 3\n",
       "            });\n",
       "            \n",
       "            this.value_changed();\n",
       "            this.model.on('change:value', this.value_changed, this);\n",
       "        },\n",
       "        \n",
       "        value_changed: function() {\n",
       "            //this.el.textContent = this.model.get('value'); \n",
       "        },\n",
       "    });\n",
       "\n",
       "    return {\n",
       "        HelloSceneView: HelloSceneView\n",
       "    }\n",
       "});"
      ],
      "text/plain": [
       "<IPython.core.display.Javascript object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%%javascript\n",
    "\n",
    "var esriCDN =  location.protocol + \"//js.arcgis.com/4.4/\"\n",
    "var proxyUrl = \"/proxy/proxy.jsp\" ;\n",
    "    \n",
    "require.config({\n",
    "      // Define path mappings for modules\n",
    "      paths: {\n",
    "        // [1] Modules hosted on Esri CDN.\n",
    "        \"dojo\":         esriCDN + \"dojo\",\n",
    "        \"dojox\":        esriCDN + \"dojox\",\n",
    "        \"dijit\":        esriCDN + \"dijit\",\n",
    "        \"esri\":         esriCDN + \"esri\",\n",
    "        \"dgrid\":        esriCDN + \"dgrid\",\n",
    "        \"xstyle\":       esriCDN + \"xstyle\",\n",
    "        \"put-selector\": esriCDN + \"put-selector\",\n",
    "        \"moment\":       esriCDN + \"moment\",\n",
    "      },\n",
    "});\n",
    "\n",
    "\n",
    "\n",
    "define('helloscene', [\n",
    "     \"@jupyter-widgets/base\",\n",
    "     //\"jupyter-js-widgets\",\n",
    "     \"esri/Map\",\n",
    "     \"esri/views/SceneView\",\n",
    "     \"dojo/domReady!\"\n",
    "], function(widgets, Map, SceneView) {\n",
    "     \n",
    "    // Define the HelloView\n",
    "    var HelloSceneView = widgets.DOMWidgetView.extend({\n",
    "        render: function() {\n",
    "            $('<meta charset=\"utf-8\">').appendTo('head');\n",
    "            $('<meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=1, user-scalable=no\">').appendTo('head');\n",
    "            $('<link rel=\"stylesheet\" type=\"text/css\" href=\"https://js.arcgis.com/4.4/esri/css/main.css\"/>').appendTo('head');\n",
    "\n",
    "            var map = new Map({\n",
    "                basemap: \"streets\",\n",
    "                ground: \"world-elevation\"\n",
    "              });\n",
    "            var view = new SceneView({\n",
    "                container: this.el,  // Reference to the DOM node that will contain the view\n",
    "                map: map  // References the map object created in step 3\n",
    "              });\n",
    "            \n",
    "            this.value_changed();\n",
    "            this.model.on('change:value', this.value_changed, this);\n",
    "        },\n",
    "        \n",
    "        value_changed: function() {\n",
    "            //this.el.textContent = this.model.get('value'); \n",
    "        },\n",
    "    });\n",
    "\n",
    "    return {\n",
    "        HelloSceneView: HelloSceneView\n",
    "    }\n",
    "});"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
       "model_id": "fb28a9886c294f7e905a30dca21c355a",
       "version_major": 2,
       "version_minor": 0
      },
      "text/plain": [
       "A Jupyter Widget"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "HelloSceneWidget()"
   ]
  }
 ],
 "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.6.3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}