Allow Carto tiles in DeckGL (#6531)

holoviz · Mar 19, 2024 · 9641c9b · 9641c9b
1 parent dd3da55
commit 9641c9b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/examples/gallery/nyc_deckgl.ipynb b/examples/gallery/nyc_deckgl.ipynb
@@ -11,8 +11,6 @@
     "import pandas as pd\n",
     "import param\n",
     "\n",
-    "MAPBOX_KEY = \"pk.eyJ1IjoicGFuZWxvcmciLCJhIjoiY2s1enA3ejhyMWhmZjNobjM1NXhtbWRrMyJ9.B_frQsAVepGIe-HiOJeqvQ\"\n",
-    "\n",
     "pn.extension('deckgl', design='bootstrap', theme='dark', template='bootstrap')\n",
     "\n",
     "pn.state.template.config.raw_css.append(\"\"\"\n",
@@ -60,7 +58,6 @@
     "        self._update_arc_view()\n",
     "        self.deck_gl = pn.pane.DeckGL(\n",
     "            self.spec,\n",
-    "            mapbox_api_key=MAPBOX_KEY,\n",
     "            throttle={'click': 10},\n",
     "            sizing_mode='stretch_both',\n",
     "            margin=0\n",
@@ -83,8 +80,8 @@
     "                \"pitch\": 40.5,\n",
     "                \"zoom\": 11\n",
     "            },\n",
+    "            \"mapStyle\": \"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json\",\n",
     "            \"layers\": [self.hex_layer, self.arc_layer],\n",
-    "            \"mapStyle\": \"mapbox://styles/mapbox/dark-v9\",\n",
     "            \"views\": [\n",
     "                {\"@@type\": \"MapView\", \"controller\": True}\n",
     "            ]\n",

diff --git a/examples/reference/panes/DeckGL.ipynb b/examples/reference/panes/DeckGL.ipynb
@@ -43,7 +43,7 @@
    "source": [
     "In order to use Deck.gl you need a MAP BOX Key which you can acquire for free for limited use at [mapbox.com](https://account.mapbox.com/access-tokens/).\n",
     "\n",
-    "Now we can define a JSON spec and pass it to the DeckGL pane along with the Mapbox key:"
+    "Now we can define a JSON spec and pass it to the DeckGL pane along with the Mapbox key (if you have one):"
    ]
   },
   {
@@ -52,7 +52,12 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "MAPBOX_KEY = \"pk.eyJ1IjoicGFuZWxvcmciLCJhIjoiY2s1enA3ejhyMWhmZjNobjM1NXhtbWRrMyJ9.B_frQsAVepGIe-HiOJeqvQ\"\n",
+    "MAPBOX_KEY = \"\"\n",
+    "\n",
+    "if MAPBOX_KEY:\n",
+    "    map_style = \"mapbox://styles/mapbox/dark-v9\"\n",
+    "else:\n",
+    "    map_style = \"https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json\"\n",
     "\n",
     "json_spec = {\n",
     "    \"initialViewState\": {\n",
@@ -76,7 +81,7 @@
     "        \"id\": \"8a553b25-ef3a-489c-bbe2-e102d18a3211\",\n",
     "        \"pickable\": True\n",
     "    }],\n",
-    "    \"mapStyle\": \"mapbox://styles/mapbox/dark-v9\",\n",
+    "    \"mapStyle\": map_style,\n",
     "    \"views\": [\n",
     "        {\"@@type\": \"MapView\", \"controller\": True}\n",
     "    ]\n",
@@ -91,6 +96,8 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
+    "If you do not have a Mapbox API key you can use one of the [Carto basemaps](https://deck.gl/docs/api-reference/carto/basemap#supported-basemaps).\n",
+    "\n",
     "Like other panes the DeckGL object can be replaced or updated. In this example we will change the `colorRange` of the HexagonLayer and then trigger an update:"
    ]
   },
@@ -166,7 +173,7 @@
     "        'getPolygon': '@@=-',\n",
     "        'getFillColor': [0, 0, 0, 20]\n",
     "    }],\n",
-    "    \"mapStyle\": \"mapbox://styles/mapbox/dark-v9\",\n",
+    "    \"mapStyle\": map_style,\n",
     "    \"views\": [\n",
     "        {\"@@type\": \"MapView\", \"controller\": True}\n",
     "    ]\n",
@@ -296,6 +303,7 @@
     "r = pydeck.Deck(\n",
     "    api_keys={'mapbox': MAPBOX_KEY},\n",
     "    layers=[polygon, geojson],\n",
+    "    map_style=map_style,\n",
     "    initial_view_state=INITIAL_VIEW_STATE\n",
     ")\n",
     "\n",

diff --git a/panel/models/deckgl.py b/panel/models/deckgl.py
@@ -61,6 +61,7 @@ def __js_skip__(cls):
             ("loader-json", f"{config.npm_cdn}/@loaders.gl/json@3.1.7/dist/dist.min"),
             ("loader-tiles", f"{config.npm_cdn}/@loaders.gl/3d-tiles@3.1.7/dist/dist.min"),
             ("mapbox-gl", "https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl"),
+            ("carto", "{config.npm_cdn}/@deck.gl/carto@^8.7.0/dist.min.js"),
         ]),
         'exports': {"deck-gl": "deck", "mapbox-gl": "mapboxgl", "h3": "h3"},
         'shim': {