check_custom_layer.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pydeck"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "pydeck.settings.custom_libraries = [\n",
    "    {\n",
    "        \"libraryName\": \"LabeledGeoJsonLayerLibrary\",\n",
    "        \"resourceUri\": \"https://unpkg.com/pydeck-lasso-layer/dist/bundle.js\",\n",
    "    }\n",
    "]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe src=\"about:blank\" frameborder=\"0\" srcdoc=\"&lt;html&gt;\n",
       "  &lt;head&gt;\n",
       "    &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;\n",
       "    &lt;title&gt;pydeck&lt;/title&gt;\n",
       "    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css&quot; /&gt;\n",
       "    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css&quot; /&gt;\n",
       "    &lt;script src=&#x27;https://cdn.jsdelivr.net/npm/@deck.gl/jupyter-widget@~8.3.*/dist/index.js&#x27;&gt;&lt;/script&gt;\n",
       "    &lt;style&gt;\n",
       "    body {\n",
       "      margin: 0;\n",
       "      padding: 0;\n",
       "      overflow: hidden;\n",
       "    }\n",
       "\n",
       "    #deck-map-container {\n",
       "      width: 100%;\n",
       "      height: 100%;\n",
       "      background-color: black;\n",
       "    }\n",
       "\n",
       "    #map {\n",
       "      pointer-events: none;\n",
       "      height: 100%;\n",
       "      width: 100%;\n",
       "      position: absolute;\n",
       "      z-index: 1;\n",
       "    }\n",
       "\n",
       "    #deckgl-overlay {\n",
       "      z-index: 2;\n",
       "      background: #333;\n",
       "    }\n",
       "\n",
       "    #deck-map-wrapper {\n",
       "      width: 100%;\n",
       "      height: 100%;\n",
       "    }\n",
       "\n",
       "    #deck-container {\n",
       "      width: 100vw;\n",
       "      height: 100vh;\n",
       "    }\n",
       "    &lt;/style&gt;\n",
       "  &lt;/head&gt;\n",
       "  &lt;body&gt;\n",
       "    &lt;div id=&quot;deck-container&quot;&gt;\n",
       "    &lt;/div&gt;\n",
       "  &lt;/body&gt;\n",
       "  &lt;script&gt;\n",
       "    const jsonInput = {&quot;initialViewState&quot;: {&quot;latitude&quot;: 0, &quot;longitude&quot;: 0, &quot;zoom&quot;: 1}, &quot;layers&quot;: [{&quot;@@type&quot;: &quot;LabeledGeoJsonLayer&quot;, &quot;billboard&quot;: false, &quot;data&quot;: &quot;https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json&quot;, &quot;filled&quot;: false, &quot;getLabel&quot;: &quot;@@=properties.name&quot;, &quot;getLabelColor&quot;: [0, 255, 255], &quot;getLabelSize&quot;: 200000, &quot;getLineColor&quot;: [180, 180, 180], &quot;id&quot;: &quot;b1695f66-81ef-4a32-8b8a-4f2023fd35b1&quot;, &quot;labelSizeUnits&quot;: &quot;meters&quot;, &quot;lineWidthMinPixels&quot;: 1}], &quot;mapStyle&quot;: &quot;mapbox://styles/mapbox/dark-v9&quot;, &quot;views&quot;: [{&quot;@@type&quot;: &quot;MapView&quot;, &quot;controller&quot;: true}]};\n",
       "    const MAPBOX_API_KEY = &#x27;None&#x27;;\n",
       "    const GOOGLE_MAPS_API_KEY = &#x27;None&#x27;;\n",
       "    const tooltip = true;\n",
       "    const customLibraries = [{&#x27;libraryName&#x27;: &#x27;LabeledGeoJsonLayerLibrary&#x27;, &#x27;resourceUri&#x27;: &#x27;https://unpkg.com/pydeck-lasso-layer/dist/bundle.js&#x27;}];\n",
       "\n",
       "    const deck = createDeck({\n",
       "      mapboxApiKey: MAPBOX_API_KEY,\n",
       "      googleMapsKey: GOOGLE_MAPS_API_KEY,\n",
       "      container: document.getElementById(&#x27;deck-container&#x27;),\n",
       "      jsonInput,\n",
       "      tooltip,\n",
       "      customLibraries\n",
       "    });\n",
       "\n",
       "  &lt;/script&gt;\n",
       "&lt;/html&gt;\" width=\"100%\" height=500></iframe>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "DATA_URL = \"https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json\"\n",
    "\n",
    "custom_layer = pydeck.Layer(\n",
    "    \"LabeledGeoJsonLayer\",\n",
    "    data=DATA_URL,\n",
    "    filled=False,\n",
    "    billboard=False,\n",
    "    get_line_color=[180, 180, 180],\n",
    "    get_label=\"properties.name\",\n",
    "    get_label_size=200000,\n",
    "    get_label_color=[0, 255, 255],\n",
    "    label_size_units='\"meters\"',\n",
    "    line_width_min_pixels=1,\n",
    ")\n",
    "\n",
    "view_state = pydeck.ViewState(latitude=0, longitude=0, zoom=1)\n",
    "\n",
    "r = pydeck.Deck(custom_layer, initial_view_state=view_state, map_provider=None)\n",
    "\n",
    "r.to_html(\"custom_layer.html\", css_background_color=\"#333\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}