Maplibre-gl and deck-gl in Observable framework

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

1 Like

Salut Nicolas,

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

It’s possible that the same pattern works for, 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:

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

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

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

<script src=""></script>

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

Ah, if I try to import

import deck from ""

I get this error:

unable to fetch:

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

1 Like


import deck from "";


1 Like

Hello Fil.
I’m interested to have a look to the code source behind this map.
Is it possible?

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)

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

hmmm… try this one pangea/docs/party/ 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.

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

1 Like

The documentation page for now lives at | Observable Framework

1 Like

Well done

1 Like