Maplibre-gl and deck-gl in Observable framework

Community Help
1

What is the recommended way to import maplibre-gl and deck-gl libraries (and associated css) into Observable Framework?

1 Like
2

Salut Nicolas,

Here’s how I import maplibre-gl, with its css and js locally hosted:

https://observablehq.observablehq.cloud/pangea/party/maplibre-gl

It’s possible that the same pattern works for deck.gl, but I haven’t tried yet. Let me know if you get it to work?

Note that if you prefer, you could combine the css and js cells into one like so:

```js
display(html`<link rel="stylesheet" href="${import.meta.resolve("npm:maplibre-gl/dist/maplibre-gl.css")}">`);
import maplibregl from "npm:maplibre-gl";
```
1 Like
3

Thanks a lot.
What is import.meta.resolve() ?

4

Actually, I can’t import deck-gl with import. The only way is

<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>

But I don’t know if it’s a good way.

5
6

Ah, if I try to import

import deck from "npm:deck.gl"

I get this error:

unable to fetch: https://cdn.jsdelivr.net/npm/@loaders.gl/compression@undefined/package.json

7

We need to investigate a better solution for deck.gl, but for now hot-linking to unpkg seems to be the only thing that works.

1 Like
8

DeckGL!

```js
import deck from "npm:deck.gl/dist.min.js/+esm";
```

demo:

https://observablehq.observablehq.cloud/pangea/party/deck.gl.html

1 Like
9

Hello Fil.
I’m interested to have a look to the code source behind this map.
https://observablehq.observablehq.cloud/pangea/party/deck.gl-map
Is it possible?

10

yep there is a tiny button with a link to the source at the top right (it’s normal you didn’t see it, as it’s hidden by a big O — I have to move it somewhere else)

11

I’ve seen it. But it links to a 404 error page.

12

hmmm… try this one pangea/docs/party/deck.gl-map.md at main · Fil/pangea · GitHub

Note that this is not “official documentation”, it’s just a playground where I’m trying things out, and changing everything all the time. Something more serious will definitely come out of this chaos, in the near future.

13

It works. Yes, I understood it was a playground. But it helps.

1 Like
14

The documentation page for deck.gl now lives at deck.gl | Observable Framework

1 Like
15

Well done

1 Like