Use ArcGIS for JavaScript in Observable

Is there a way to use ArcGIS for JavaScript in Observable?

ArcGIS JS is using Dojo under the hood to load their packages.

I am trying to adapt this example to an Observable notebook: https://codepen.io/noahsong/pen/PoobqKp

Instead of the global <scrip> tag, you can use the ‘esri-loader’ NPM package to load ESRI packages.

But it seems like the require function that ESRI is trying to use under the hood is conflicting with Observable’s require? Someone care to take a look and make it work?

Thanks.

Unfortunately, I don’t think this will be (directly) possible.

ArcGIS JS relies on DOJO’s AMD convention which is incompatible with RequireJS’s AMD convention. The latter is used by Observable (and implemented by d3-require), and you can’t use multiple conventions simultaneously because they compete for the require and define globals.

To load this in Observable, you’ll probably need to run ESRI’s code through a bundler to either turn it into a standard ES module you can dynamic import, or to make it compatible with RequireJS.

2 Likes

Thanks for the explanation Mike :slight_smile: