Added sample data

app.py

@@ -1,6 +1,6 @@
 import streamlit as st
 from multiapp import MultiApp
-from apps import home
+from apps import home, deck
 
 # st.set_page_config(layout="wide")
 
@@ -9,6 +9,7 @@ apps = MultiApp()
 
 # Add all your application here
 
+apps.add_app("pydeck", deck.app)
 apps.add_app("Home", home.app)
 
 # The main app

apps/deck.py

@@ -0,0 +1,46 @@
+import streamlit as st
+
+
+def app():
+
+    import pydeck as pdk
+
+    DATA_URL = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json"
+    LAND_COVER = [
+        [[-123.0, 49.196], [-123.0, 49.324], [-123.306, 49.324], [-123.306, 49.196]]
+    ]
+
+    INITIAL_VIEW_STATE = pdk.ViewState(
+        latitude=49.254, longitude=-123.13, zoom=11, max_zoom=16, pitch=45, bearing=0
+    )
+
+    polygon = pdk.Layer(
+        "PolygonLayer",
+        LAND_COVER,
+        stroked=False,
+        # processes the data as a flat longitude-latitude pair
+        get_polygon="-",
+        get_fill_color=[0, 0, 0, 20],
+    )
+
+    geojson = pdk.Layer(
+        "GeoJsonLayer",
+        DATA_URL,
+        opacity=0.8,
+        stroked=False,
+        filled=True,
+        extruded=True,
+        wireframe=True,
+        get_elevation="properties.valuePerSqm / 20",
+        get_fill_color="[255, 255, properties.growth * 255]",
+        get_line_color=[255, 255, 255],
+    )
+
+    r = pdk.Deck(
+        layers=[polygon, geojson],
+        initial_view_state=INITIAL_VIEW_STATE,
+        height=1000,
+        width="100%",
+    )
+
+    st.pydeck_chart(r)

notebooks/pydeck.ipynb

@@ -0,0 +1,417 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 24,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=500\n",
+       "            frameborder=\"0\"\n",
+       "            srcdoc=\"&lt;!DOCTYPE html&gt;\n",
+       "&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;script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js&quot;&gt;&lt;/script&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.5.*/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: none;\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;bearing&quot;: 0, &quot;latitude&quot;: 1, &quot;longitude&quot;: 0, &quot;maxZoom&quot;: 16, &quot;pitch&quot;: 45, &quot;zoom&quot;: 0}, &quot;layers&quot;: [{&quot;@@type&quot;: &quot;GeoJsonLayer&quot;, &quot;data&quot;: &quot;https://raw.githubusercontent.com/giswqs/leafmap/master/examples/data/countries.geojson&quot;, &quot;extruded&quot;: true, &quot;filled&quot;: true, &quot;getElevation&quot;: &quot;@@=properties.POP_EST/300&quot;, &quot;getFillColor&quot;: &quot;@@=[255, 255, 0]&quot;, &quot;getLineColor&quot;: [255, 255, 255], &quot;id&quot;: &quot;b1b3fd43-09d9-4ad1-baec-4a80d8599fee&quot;, &quot;opacity&quot;: 0.3, &quot;stroked&quot;: false, &quot;wireframe&quot;: true}], &quot;mapProvider&quot;: &quot;carto&quot;, &quot;mapStyle&quot;: &quot;https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json&quot;, &quot;views&quot;: [{&quot;@@type&quot;: &quot;MapView&quot;, &quot;controller&quot;: true}]};\n",
+       "    const tooltip = true;\n",
+       "    const customLibraries = null;\n",
+       "\n",
+       "    const deckInstance = createDeck({\n",
+       "            mapboxApiKey: &#x27;pk.eyJ1IjoiZ2lzd3FzIiwiYSI6ImNqbWg2YWlpeTA0aGkzdXJ0aWs3YzBta2gifQ.o8KckhuMI8ef8JDIBoqJ3Q&#x27;,\n",
+       "                  container: document.getElementById(&#x27;deck-container&#x27;),\n",
+       "      jsonInput,\n",
+       "      tooltip,\n",
+       "      customLibraries\n",
+       "    });\n",
+       "\n",
+       "  &lt;/script&gt;\n",
+       "&lt;/html&gt;\"\n",
+       "        ></iframe>\n",
+       "    "
+      ],
+      "text/plain": [
+       "{\"initialViewState\": {\"bearing\": 0, \"latitude\": 1, \"longitude\": 0, \"maxZoom\": 16, \"pitch\": 45, \"zoom\": 0}, \"layers\": [{\"@@type\": \"GeoJsonLayer\", \"data\": \"https://raw.githubusercontent.com/giswqs/leafmap/master/examples/data/countries.geojson\", \"extruded\": true, \"filled\": true, \"getElevation\": \"@@=properties.POP_EST/300\", \"getFillColor\": \"@@=[255, 255, 0]\", \"getLineColor\": [255, 255, 255], \"id\": \"b1b3fd43-09d9-4ad1-baec-4a80d8599fee\", \"opacity\": 0.3, \"stroked\": false, \"wireframe\": true}], \"mapProvider\": \"carto\", \"mapStyle\": \"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json\", \"views\": [{\"@@type\": \"MapView\", \"controller\": true}]}"
+      ]
+     },
+     "execution_count": 24,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "import pydeck as pdk\n",
+    "\n",
+    "DATA_URL = \"https://raw.githubusercontent.com/giswqs/leafmap/master/examples/data/countries.geojson\"\n",
+    "\n",
+    "INITIAL_VIEW_STATE = pdk.ViewState(latitude=1, longitude=0, zoom=0, max_zoom=16, pitch=45, bearing=0)\n",
+    "\n",
+    "\n",
+    "geojson = pdk.Layer(\n",
+    "    \"GeoJsonLayer\",\n",
+    "    DATA_URL,\n",
+    "    opacity=0.3,\n",
+    "    stroked=False,\n",
+    "    filled=True,\n",
+    "    extruded=True,\n",
+    "    wireframe=True,\n",
+    "    get_elevation=\"properties.POP_EST/300\",\n",
+    "    get_fill_color=\"[255, 255, 0]\",\n",
+    "    get_line_color=[255, 255, 255],\n",
+    ")\n",
+    "\n",
+    "r = pdk.Deck(layers=[geojson], initial_view_state=INITIAL_VIEW_STATE, width=400)\n",
+    "r"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "geojson.opacity=0.5"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "r.update()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "r"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import pydeck as pdk\n",
+    "\n",
+    "# 2014 locations of car accidents in the UK\n",
+    "UK_ACCIDENTS_DATA = ('https://raw.githubusercontent.com/uber-common/'\n",
+    "                     'deck.gl-data/master/examples/3d-heatmap/heatmap-data.csv')\n",
+    "\n",
+    "# Define a layer to display on a map\n",
+    "layer = pdk.Layer(\n",
+    "    'HexagonLayer',\n",
+    "    UK_ACCIDENTS_DATA,\n",
+    "    get_position=['lng', 'lat'],\n",
+    "    auto_highlight=True,\n",
+    "    elevation_scale=50,\n",
+    "    pickable=True,\n",
+    "    elevation_range=[0, 3000],\n",
+    "    extruded=True,                 \n",
+    "    coverage=1)\n",
+    "\n",
+    "# Set the viewport location\n",
+    "view_state = pdk.ViewState(\n",
+    "    longitude=-1.415,\n",
+    "    latitude=52.2323,\n",
+    "    zoom=6,\n",
+    "    min_zoom=5,\n",
+    "    max_zoom=15,\n",
+    "    pitch=40.5,\n",
+    "    bearing=-27.36)\n",
+    "\n",
+    "# Render\n",
+    "r = pdk.Deck(layers=[layer], initial_view_state=view_state)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "r"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import pandas as pd"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "df = pd.read_csv(UK_ACCIDENTS_DATA)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "r.selected_data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "r.layers"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "r.mapbox_key"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "r.to_json()"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "r.selected_data"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "r.deck_widget.on_"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 10,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "\n",
+       "        <iframe\n",
+       "            width=\"100%\"\n",
+       "            height=500\n",
+       "            frameborder=\"0\"\n",
+       "            srcdoc=\"&lt;!DOCTYPE html&gt;\n",
+       "&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;script src=&quot;https://api.tiles.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js&quot;&gt;&lt;/script&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.5.*/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: none;\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;bearing&quot;: 0, &quot;latitude&quot;: 49.254, &quot;longitude&quot;: -123.13, &quot;maxZoom&quot;: 16, &quot;pitch&quot;: 45, &quot;zoom&quot;: 11}, &quot;layers&quot;: [{&quot;@@type&quot;: &quot;PolygonLayer&quot;, &quot;data&quot;: [[[-123.0, 49.196], [-123.0, 49.324], [-123.306, 49.324], [-123.306, 49.196]]], &quot;getFillColor&quot;: [0, 0, 0, 20], &quot;getPolygon&quot;: &quot;@@=-&quot;, &quot;id&quot;: &quot;29119cc5-60a8-496d-9bba-d38c0b2dad8d&quot;, &quot;stroked&quot;: false}, {&quot;@@type&quot;: &quot;GeoJsonLayer&quot;, &quot;data&quot;: &quot;https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json&quot;, &quot;extruded&quot;: true, &quot;filled&quot;: true, &quot;getElevation&quot;: &quot;@@=properties.valuePerSqm / 20&quot;, &quot;getFillColor&quot;: &quot;@@=[255, 255, properties.growth * 255]&quot;, &quot;getLineColor&quot;: [255, 255, 255], &quot;id&quot;: &quot;abbb7efd-2f90-4b1b-87c9-37a34332a2a8&quot;, &quot;opacity&quot;: 0.8, &quot;stroked&quot;: false, &quot;wireframe&quot;: true}], &quot;mapProvider&quot;: &quot;carto&quot;, &quot;mapStyle&quot;: &quot;https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json&quot;, &quot;views&quot;: [{&quot;@@type&quot;: &quot;MapView&quot;, &quot;controller&quot;: true}]};\n",
+       "    const tooltip = true;\n",
+       "    const customLibraries = null;\n",
+       "\n",
+       "    const deckInstance = createDeck({\n",
+       "            mapboxApiKey: &#x27;pk.eyJ1IjoiZ2lzd3FzIiwiYSI6ImNqbWg2YWlpeTA0aGkzdXJ0aWs3YzBta2gifQ.o8KckhuMI8ef8JDIBoqJ3Q&#x27;,\n",
+       "                  container: document.getElementById(&#x27;deck-container&#x27;),\n",
+       "      jsonInput,\n",
+       "      tooltip,\n",
+       "      customLibraries\n",
+       "    });\n",
+       "\n",
+       "  &lt;/script&gt;\n",
+       "&lt;/html&gt;\"\n",
+       "        ></iframe>\n",
+       "    "
+      ],
+      "text/plain": [
+       "{\"initialViewState\": {\"bearing\": 0, \"latitude\": 49.254, \"longitude\": -123.13, \"maxZoom\": 16, \"pitch\": 45, \"zoom\": 11}, \"layers\": [{\"@@type\": \"PolygonLayer\", \"data\": [[[-123.0, 49.196], [-123.0, 49.324], [-123.306, 49.324], [-123.306, 49.196]]], \"getFillColor\": [0, 0, 0, 20], \"getPolygon\": \"@@=-\", \"id\": \"29119cc5-60a8-496d-9bba-d38c0b2dad8d\", \"stroked\": false}, {\"@@type\": \"GeoJsonLayer\", \"data\": \"https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json\", \"extruded\": true, \"filled\": true, \"getElevation\": \"@@=properties.valuePerSqm / 20\", \"getFillColor\": \"@@=[255, 255, properties.growth * 255]\", \"getLineColor\": [255, 255, 255], \"id\": \"abbb7efd-2f90-4b1b-87c9-37a34332a2a8\", \"opacity\": 0.8, \"stroked\": false, \"wireframe\": true}], \"mapProvider\": \"carto\", \"mapStyle\": \"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json\", \"views\": [{\"@@type\": \"MapView\", \"controller\": true}]}"
+      ]
+     },
+     "execution_count": 10,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "import pydeck as pdk\n",
+    "\n",
+    "DATA_URL = \"https://raw.githubusercontent.com/visgl/deck.gl-data/master/examples/geojson/vancouver-blocks.json\"\n",
+    "LAND_COVER = [[[-123.0, 49.196], [-123.0, 49.324], [-123.306, 49.324], [-123.306, 49.196]]]\n",
+    "\n",
+    "INITIAL_VIEW_STATE = pdk.ViewState(latitude=49.254, longitude=-123.13, zoom=11, max_zoom=16, pitch=45, bearing=0)\n",
+    "\n",
+    "polygon = pdk.Layer(\n",
+    "    \"PolygonLayer\",\n",
+    "    LAND_COVER,\n",
+    "    stroked=False,\n",
+    "    # processes the data as a flat longitude-latitude pair\n",
+    "    get_polygon=\"-\",\n",
+    "    get_fill_color=[0, 0, 0, 20],\n",
+    ")\n",
+    "\n",
+    "geojson = pdk.Layer(\n",
+    "    \"GeoJsonLayer\",\n",
+    "    DATA_URL,\n",
+    "    opacity=0.8,\n",
+    "    stroked=False,\n",
+    "    filled=True,\n",
+    "    extruded=True,\n",
+    "    wireframe=True,\n",
+    "    get_elevation=\"properties.valuePerSqm / 20\",\n",
+    "    get_fill_color=\"[255, 255, properties.growth * 255]\",\n",
+    "    get_line_color=[255, 255, 255],\n",
+    ")\n",
+    "\n",
+    "r = pdk.Deck(layers=[polygon, geojson], initial_view_state=INITIAL_VIEW_STATE, height=800, width=\"50%\")\n",
+    "r"
+   ]
+  },
+  {
+   "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.8.5"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}