@trailstash/ultra 4.3.1 → 5.0.1

package/components/ultra-map.js

@@ -15,6 +15,12 @@ import { handleStyleImageMissing } from "../lib/sprites.js";
 import { handleMouseClick, handleMouseMove } from "../lib/queryMap.js";
 import { localStorage, optionsFromStorage } from "../lib/localStorage.js";
 import { HTMLControl } from "./html-control.js";
+import makeSandbox from "../lib/sandbox.js";
+
+let sandbox;
+try {
+  sandbox = await makeSandbox();
+} catch {}
 
 const css = new CSSStyleSheet();
 css.replaceSync(`
@@ -57,6 +63,7 @@ export class UltraMap extends HTMLElement {
   #shadow;
 
   #cachedBBox;
+  #cachedTransform;
   #cachedType;
   #cachedQuery;
   #cachedSource;
@@ -77,6 +84,9 @@ export class UltraMap extends HTMLElement {
     fitBounds: undefined,
     queryProviders,
     persistState: false,
+    transform: undefined,
+    title: undefined,
+    description: undefined,
   };
 
   loadSettingsFromQueryParams = UltraMap.defaults.loadSettingsFromQueryParams;
@@ -100,6 +110,11 @@ export class UltraMap extends HTMLElement {
 
   queryProviders = UltraMap.defaults.queryProviders;
 
+  transform = UltraMap.defaults.transform;
+
+  title = UltraMap.defaults.title;
+  description = UltraMap.defaults.description;
+
   static CONFIG_SETTINGS = [
     "queryProviders",
     "loadSettingsFromQueryParams",
@@ -129,6 +144,7 @@ export class UltraMap extends HTMLElement {
     "query",
     "fitBounds",
     "mapStyle",
+    "transform",
   ];
 
   constructor() {
@@ -166,8 +182,8 @@ export class UltraMap extends HTMLElement {
     this.#shadow.adoptedStyleSheets.push(css);
 
     if (this.loadSettingsFromQueryParams) {
-      return Promise.resolve(getQueryFromQueryParams() || this.query).then(
-        async (query) => {
+      return Promise.resolve(getQueryFromQueryParams() || this.query)
+        .then(async (query) => {
           const querySettings = parseSettings(query);
           const settings = {
             ...this,
@@ -188,8 +204,8 @@ export class UltraMap extends HTMLElement {
           });
 
           return this.#init(await getStyle(this.mapStyle));
-        },
-      );
+        })
+        .catch(alert);
     } else if (this.persistState) {
       this.options = {
         ...this.options,
@@ -282,8 +298,9 @@ export class UltraMap extends HTMLElement {
   }
 
   async run(controller) {
-    this.refs.mapLibre.mapStyle = await getStyle(this.mapStyle);
-    const data = await this.#run(controller);
+    const mapStyle = await getStyle(this.mapStyle);
+    this.refs.mapLibre.mapStyle = mapStyle;
+    const result = await this.#run(controller);
     if (this.#fitBounds) {
       if (
         this.#cachedSource?.type === "geojson" &&
@@ -299,7 +316,7 @@ export class UltraMap extends HTMLElement {
         );
       }
     }
-    return data;
+    return result || { mapStyle };
   }
   async #runUnbound(controller) {
     if (!this.query) {
@@ -320,6 +337,7 @@ export class UltraMap extends HTMLElement {
       const query = setQueryBounds(this.query, this.refs.mapLibre.bounds);
       if (
         !this.#cachedSource ||
+        this.transform !== this.#cachedTransform ||
         this.type !== this.#cachedType ||
         query !== this.#cachedQuery ||
         (queryProvider.invalidateCacheOnBBox &&
@@ -331,20 +349,30 @@ export class UltraMap extends HTMLElement {
           this.refs.mapLibre.bounds,
         );
         this.#cachedQuery = query;
+        this.#cachedTransform = this.transform;
         this.#cachedType = this.type;
-        this.#cachedSource = await queryProvider.source(query, controller, {
+        let source = await queryProvider.source(query, controller, {
           server: this.server,
           bounds: this.refs.mapLibre.bounds,
         });
+        if (this.transform) {
+          if (sandbox) {
+            source.data = await sandbox(this.transform, source.data);
+          } else {
+            throw new Error("sandbox could not be initialized");
+          }
+        }
+        this.#cachedSource = source;
       }
-      this.refs.mapLibre.mapStyle = await getStyle(this.mapStyle, {
+      const mapStyle = await getStyle(this.mapStyle, {
         // Don't love this...
         source: this.#cachedSource,
         layers: queryProvider.layers
           ? await Promise.resolve(queryProvider.layers("ultra", query))
           : [],
       });
-      return this.#cachedSource.data;
+      this.refs.mapLibre.mapStyle = mapStyle;
+      return { data: this.#cachedSource.data, mapStyle };
     } finally {
       this.refs.loadingIndicator.style.display = "none";
     }

package/config.mjs

@@ -1,7 +1,7 @@
 export const defaultMode = "ide";
 export const modes = {
   ide: {
-    settings: {},
+      settings: { options: { hash: "m" }},
   },
   map: {
     settings: {},

package/docs/further-reading.md

@@ -12,7 +12,7 @@ Here are some more resources on Ultra:
 
 ## Talks
 
-- [Mapping USA 2025 - Slides](https://ultra-mapping-usa-2025.glitch.me/#1)
+- [Mapping USA 2025](https://openstreetmap.us/events/mapping-usa/2025/making-maps-with-ultra/)
 
 ## Third party blog posts
 

package/docs/open-with-ultra.md

@@ -0,0 +1,94 @@
+# Open with Ultra
+
+**Open with Ultra** is a [bookmarklet](https://en.wikipedia.org/wiki/Bookmarklet) for making it
+easier to use Ultra.
+
+## Install
+
+Install it by dragging the **Open with Ultra** link below to your bookmarks bar.
+
+<center><a id="bookmarklet">**Open with Ultra**</a></center>
+
+<style>
+#bookmarklet {
+  display: inline-block;
+  background: #526cfe;
+  color: white;
+  box-shadow: 0 0 .2rem rgba(0,0,0,.1),0 .2rem .4rem rgba(0,0,0,.2);
+  padding: 10px;
+}
+</style>
+
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.7.1"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/dschep/jQuery-Bookmarklet@master/jquery.bookmarklet.js"></script>
+<script>
+const b = document.querySelector("#bookmarklet")
+b.onclick = e => { e.preventDefault(); return false; };
+$(b).bookmarkletHelperArrow();
+const code = () => {
+  const origin = "https://overpass-ultra.us";
+  if (window.location.host === "overpass-turbo.eu") {
+    const search = new URLSearchParams();
+    search.set(
+      "query",
+      JSON.parse(localStorage.getItem("overpass-ide_code")).overpass,
+    );
+    if (localStorage.getItem("overpass-ide_coords_zoom")) {
+      search.set(
+        "m",
+        [
+          parseInt(localStorage.getItem("overpass-ide_coords_zoom")) - 1,
+          localStorage.getItem("overpass-ide_coords_lat"),
+          localStorage.getItem("overpass-ide_coords_lon"),
+        ].join("/"),
+      );
+    }
+    window.location = `${origin}/#${search.toString()}`;
+  } else if (window.location.host === "qlever.cs.uni-freiburg.de") {
+    const search = new URLSearchParams();
+    search.set("query", `---\ntype: sparql\nserver: https://qlever.cs.uni-freiburg.de/api/${document.querySelector("#backend-slug").textContent}\n---\n${document.querySelector(".CodeMirror").CodeMirror.getValue()}`);
+    window.location = `${origin}/#${search.toString()}`;
+  } else if (window.location.host === "sophox.org") {
+    const search = new URLSearchParams();
+    search.set("query", `---\ntype: sparql\nserver: https://sophox.org/sparql\n---\n${localStorage.getItem("wikibase.queryService.ui.Editor")}`);
+    window.location = `${origin}/#${search.toString()}`;
+  } else if (window.location.host === "gist.github.com") {
+    window.location = `${origin}/#query=gist:${window.location.pathname.split("/").slice(-1)[0]}`;
+  } else if (window.location.host === "github.com") {
+    window.location = `${origin}/#query=url:https://raw.githubusercontent.com${window.location.pathname.replace("/blob", "")}`;
+  } else if (window.location.host === "geojson.io") {
+    window.location = `${origin}/#query=${encodeURIComponent(JSON.stringify(window.api.data.all().map))}`;
+  } else {
+    window.location = `${origin}/#query=${encodeURIComponent(window.location)}`;
+  }
+}
+b.href = `javascript:(${code.toString()})();`
+</script>
+
+## Behavior
+
+It features special support for:
+
+- [overpass-turbo.eu](https://overpass-turbo.eu) - Loads query & viewport from overpass turbo in
+  Ultra
+- [QLever](https://qlever.cs.uni-freiburg.de/) - Loads query & server from the QLever in Ultra
+- [Sophox](https://sopox.org/) - Loads query & server from the Sophox in Ultra
+- [geojson.io](https://geojson.io) - loads the GeoJSON from geojson.io as the query in Ultra
+- [Gists](https://gist.github.com) - loads the current gist as the query in Ultra
+- [Github](https://github.com) - loads the `githubusercontent.com` URL for a file loaded in the web
+  UI
+
+For all other sites, it loads the URL as the query.
+
+Ultra features some query providers which work well with this:
+
+- `osmWebsite` - detects `https://openstreetmap.org/[node|way|relation]/:id` URLs and loads that
+  object via the Overpass API
+- `osmWiki` - detects `https://wiki.openstreetmap.org/wiki/Key:` and
+  `https://wiki.openstreetmap.org/wiki/Tag:` URLs and loads that object with that tag or key via
+  the Overpass API
+- `taginfo` - detects `https://taginfo.openstreetmap.org/key/` and
+  `https://taginfo.openstreetmap.org/tags/` URLs and loads that object with that tag or key via the
+  Overpass API
+- `kml` - detects `https://www.google.com/maps/d` (Google My Maps) URLs and loads that map via the
+  KML export.

package/docs/style.md

@@ -1,7 +1,7 @@
 # Styling
 
-The MapLibre styling can be attached to a query via the `style:` key of the [YAML
-front-matter](./yaml.md).
+[MapLibre styling](https://maplibe.org/maplibre-style-spec/) can be attached to a query
+via the `style:` key of the [YAML front-matter](./yaml.md).
 
 ```
 ---

package/docs/url-parameters.md

@@ -18,7 +18,7 @@ Example: [http://overpass-ultra.us/#query=gist:8ecb8ba0a0136f4f0dbc36de82061de4]
 
 You can load a query from any url by using a string prefixed with `url:`
 
-Example: [http://overpass-ultra.us/#query=url:https%3A%2F%2Fgist.githubusercontent.com%2Fdschep%2F8ecb8ba0a0136f4f0dbc36de82061de4%2Fraw%2F40ce5053cc664984d677bca20a2a2d3371ce09b0%2Fgistfile1.txt](http://overpass-ultra.us/#query=url:https%3A%2F%2Fgist.githubusercontent.com%2Fdschep%2F8ecb8ba0a0136f4f0dbc36de82061de4%2Fraw%2F40ce5053cc664984d677bca20a2a2d3371ce09b0%2Fgistfile1.txt)
+Example: [http://overpass-ultra.us/#query=url:https%3A%2F%2Fraw.githubusercontent.com%2FMapRVA%2Fmaprva.org%2F76eb1cd1bc8c022399f578e38f89917b98c97056%2F_ultra-maps%2Fsurveillance.ultra](http://overpass-ultra.us/#query=https%3A%2F%2Fraw.githubusercontent.com%2FMapRVA%2Fmaprva.org%2F76eb1cd1bc8c022399f578e38f89917b98c97056%2F_ultra-maps%2Fsurveillance.ultra)
 
 ## `q` <small>(lz-string-compressed string)</small>
 

package/docs/yaml.md

@@ -31,7 +31,7 @@ server:  https://overpass.private.coffee/api/
 
 ## `popupTemplate`
 
-Customize the interactive popup with a [LiquidJS]() template. Or set it to `false` to disable the
+Customize the interactive popup with a [LiquidJS](https://liquidjs.com/) template. Or set it to `false` to disable the
 interactive popup.
 
 ```
@@ -306,3 +306,25 @@ Specify which sources can be queried by mouse-click
 querySources: [ultra] # this is the default
 ---
 ```
+
+## `transform`
+
+This allows you to specify javascript to mutate the query result before it is added to the map
+style. Your code must export a function that accepts GeoJSON as a parameter and returns GeoJSON.
+To import libraries, use a CDN like [skypack.dev](https://skypack.dev) or [esm.sh](https://esm.sh).
+
+For example, to buffer highways by 10 meters:
+
+```
+---
+transform: |
+    import { buffer } from "https://cdn.skypack.dev/@turf/buffer";
+
+    export default function(data) {
+        return buffer(data, 0.01);
+    }
+---
+[bbox:{{bbox}}];
+way[highway];
+out geom;
+```

package/index.html

@@ -11,13 +11,21 @@
     <title>{{ title | default: "Ultra"}}</title>
 
     <!-- Meta tags for SEO and social sharing -->
-    {% if url %}
-    <link rel="canonical" href="{{ url }}" />
-    {% endif %}
+    <meta property="og:title" content="{{ title | default: "Ultra"}}" />
     <meta
       name="description"
       content="{{ description | default: "A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc" }}"
     />
+    <meta
+      name="og:description"
+      content="{{ description | default: "A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc" }}"
+    />
+    <meta property="og:type" content="website" />
+    {% if url %}
+    <link rel="canonical" href="{{ url }}" />
+    <meta property="og:url" content="{{ url }}" />
+    <meta property="og:image" content="{{ url }}/og:image.png" />
+    {% endif %}
     <meta name="robots" content="index,follow" />
 
     <script>

package/index.js

@@ -13,7 +13,7 @@ import { UltraIDE } from "./components/ultra-ide.js";
 import { CodeEditor } from "./components/code-editor.js";
 import { NavBar } from "./components/nav-bar.js";
 import { RunButton } from "./components/run-button.js";
-import { DownloadButton } from "./components/download-button.js";
+import { ExportModal as DownloadButton } from "./components/export-modal.js";
 import { StylePicker } from "./components/style-picker.js";
 import { ShareModal as ShareButton } from "./components/share-modal.js";
 import { HelpModal } from "./components/help-modal.js";

package/lib/htmlExport.js

@@ -0,0 +1,74 @@
+import { version as maplibreVersion } from "maplibre-gl/package.json";
+import { version } from "../package.json";
+
+let ultraVersion = version;
+if (version === "dev") {
+  ultraVersion = "latest";
+} else if (version.includes("-")) {
+  ultraVersion = version.split("-")[0];
+}
+
+export const htmlExport = (
+  style,
+  title = "Ultra Export",
+  description = "",
+  options = {},
+) => {
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>${title}</title>
+    <link
+      href="https://esm.sh/maplibre-gl@${maplibreVersion}/dist/maplibre-gl.css"
+      rel="stylesheet"
+    />
+
+    <style>
+      html,
+      body,
+      #map {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+
+    <script type="module">
+      import maplibregl from "https://esm.sh/maplibre-gl@${maplibreVersion}";
+
+      const style = ${JSON.stringify(style)};
+
+      maplibregl.setRTLTextPlugin("https://esm.sh/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js", true);
+
+      import { Protocol as PMTilesProtocol} from "https://esm.sh/pmtiles";
+      const pmtiles = new PMTilesProtocol();
+      maplibregl.addProtocol("pmtiles", pmtiles.tile);
+
+      import { Protocol as FallbackGlyphProtocol } from "https://esm.sh/@trailstash/ultra@${ultraVersion}/lib/glyphFallback.js";
+      const fallbackGlyphsProtocol = new FallbackGlyphProtocol();
+      maplibregl.addProtocol(FallbackGlyphProtocol.name, fallbackGlyphsProtocol.tile);
+      style.glyphs = FallbackGlyphProtocol.makeURL(style.glyphs);
+
+      const options = ${JSON.stringify(options)};
+      var map = new maplibregl.Map({
+        ...options,
+        container: "map",
+        style,
+      });
+
+      import { handleStyleImageMissing } from "https://esm.sh/@trailstash/ultra@${ultraVersion}/lib/sprites.js";
+      map.on("styleimagemissing", handleStyleImageMissing);
+
+      // TODO: popup?
+    </script>
+  </body>
+</html>`;
+};

package/lib/localStorage.js

@@ -29,6 +29,3 @@ export const optionsFromStorage = () => {
   }
   return options;
 };
-export const queryFromStorage = () => {
-  return localStorage.getItem("query");
-};

package/lib/queryProviders/geojson.js

@@ -1,4 +1,4 @@
-import { fetchIfHTTPS } from "./util.js";
+import { fetchIfHTTP } from "./util.js";
 
 const layers = (source) => [
   {
@@ -119,7 +119,7 @@ const geoJsonTypes = [
   "MultiPolygon",
 ];
 async function detect(query) {
-  query = await fetchIfHTTPS(query);
+  query = await fetchIfHTTP(query);
   try {
     const json = JSON.parse(query);
     if (geoJsonTypes.includes(json.type)) {

package/lib/queryProviders/gpx.js

@@ -1,4 +1,4 @@
-import { fetchIfHTTPS } from "./util.js";
+import { fetchIfHTTP } from "./util.js";
 import { gpx } from "@tmcw/togeojson";
 
 const layers = (source) => [
@@ -76,7 +76,7 @@ const layers = (source) => [
 ];
 
 const detect = async (query) => {
-  query = await fetchIfHTTPS(query);
+  query = await fetchIfHTTP(query);
   const doc = new window.DOMParser().parseFromString(query, "text/xml");
   if (
     !doc.querySelector("parsererror") &&

package/lib/queryProviders/kml.js

@@ -1,4 +1,4 @@
-import { fetchIfHTTPS } from "./util.js";
+import { fetchIfHTTP } from "./util.js";
 import { kml } from "@tmcw/togeojson";
 
 const layers = (source) => [
@@ -78,7 +78,7 @@ const detect = async (query) => {
   if (query.startsWith("https://www.google.com/maps/d/")) {
     return true;
   }
-  query = await fetchIfHTTPS(query);
+  query = await fetchIfHTTP(query);
   const doc = new window.DOMParser().parseFromString(query, "text/xml");
   return (
     !doc.querySelector("parsererror") &&

package/lib/queryProviders/raster.js

@@ -1,4 +1,4 @@
-import { fetchIfHTTPS } from "./util.js";
+import { fetchIfHTTP } from "./util.js";
 
 const layers = (source) => [
   {
@@ -16,7 +16,7 @@ const detect = async (query) => {
   if (query.match(/{(x|y|z)}.*\.(png|webp|jpe?g)$/)) {
     return true;
   }
-  query = await fetchIfHTTPS(query);
+  query = await fetchIfHTTP(query);
   try {
     const json = JSON.parse(query);
     return json.tilejson && IMAGE_FORMATS.has(json.formati);

package/lib/queryProviders/tcx.js

@@ -1,4 +1,4 @@
-import { fetchIfHTTPS } from "./util.js";
+import { fetchIfHTTP } from "./util.js";
 import { tcx } from "@tmcw/togeojson";
 
 const layers = (source) => [
@@ -66,7 +66,7 @@ const layers = (source) => [
 ];
 
 const detect = async (query) => {
-  query = await fetchIfHTTPS(query);
+  query = await fetchIfHTTP(query);
   const doc = new window.DOMParser().parseFromString(query, "text/xml");
   if (
     !doc.querySelector("parsererror") &&

package/lib/queryProviders/util.js

@@ -1,5 +1,5 @@
-export const fetchIfHTTPS = async (query) => {
-  if (query.startsWith("https://")) {
+export const fetchIfHTTP = async (query) => {
+  if (query.startsWith("http://") || query.startsWith("https://")) {
     try {
       const resp = await fetch(query, { cors: true });
       if (resp.ok) {

package/lib/queryProviders/vector.js

@@ -1,20 +1,17 @@
-import { fetchIfHTTPS } from "./util.js";
+import { fetchIfHTTP } from "./util.js";
 import { PMTiles } from "pmtiles";
 
-// Created with https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12
+// Created with https://colorbrewer2.org/?type=qualitative&scheme=Set1&n=9
 const colors = [
-  "#8dd3c7",
-  "#ffffb3",
-  "#bebada",
-  "#fb8072",
-  "#80b1d3",
-  "#fdb462",
-  "#b3de69",
-  "#fccde5",
-  "#d9d9d9",
-  "#bc80bd",
-  "#ccebc5",
-  "#ffed6f",
+  "#e41a1c",
+  "#377eb8",
+  "#4daf4a",
+  "#984ea3",
+  "#ff7f00",
+  "#ffff33",
+  "#a65628",
+  "#f781bf",
+  "#999999",
 ];
 
 export default {
@@ -64,6 +61,7 @@ export default {
           filter: ["==", ["geometry-type"], "LineString"],
           paint: {
             "line-color": colors[i % colors.length],
+            "line-width": 2,
           },
           layout: {
             "line-join": "round",
@@ -78,7 +76,7 @@ export default {
           filter: ["==", ["geometry-type"], "Point"],
           paint: {
             "circle-color": colors[i % colors.length],
-            "circle-radius": 2,
+            "circle-radius": 3,
           },
         });
       }
@@ -86,10 +84,15 @@ export default {
     return layers;
   },
   detect: async (query) => {
-    query = await fetchIfHTTPS(query);
+    if (query.startsWith("pmtiles://")) {
+      const pmtiles = new PMTiles(query.slice("pmtiles://".length));
+      const tileJSON = await pmtiles.getTileJson();
+      return tileJSON.tilejson && tileJSON.vector_layers;
+    }
+    query = await fetchIfHTTP(query);
     try {
-      const json = JSON.parse(query);
-      return json.tilejson && json.format === "pbf";
+      const tileJSON = JSON.parse(query);
+      return tileJSON.tilejson && tileJSON.vector_layers;
     } catch {}
   },
 };

package/lib/sandbox.js

@@ -0,0 +1,93 @@
+const makeSandbox = () => {
+  const iframe = window.document.createElement("iframe");
+  const sandboxId = crypto.randomUUID();
+  iframe.style.display = "none";
+  iframe.src =
+    "data:text/html;base64," +
+    btoa(`<!DOCTYPE html>
+    <script type="module">
+    const p = "${window.location.origin}"
+
+    window.addEventListener(
+      "message",
+      async (event) => {
+        console.debug(event);
+
+        if (event.origin !== p) return;
+
+        let id;
+        try {
+          const msg = JSON.parse(event.data);
+          id = msg.id;
+          console.debug(msg)
+
+          const { default: transform } = await import(msg.transform);
+
+          const o = await Promise.resolve(transform(msg.data));
+          event.source.postMessage(JSON.stringify({id: msg.id, data: o}), p);
+        } catch (e) {
+          event.source.postMessage(JSON.stringify({id: id, error: e.toString()}), p);
+        }
+      },
+      false,
+    );
+
+    window.parent.postMessage(JSON.stringify({id: "${sandboxId}"}), p);
+    </script>
+    `);
+
+  const run = (transform, data) => {
+    const messageID = crypto.randomUUID();
+    return new Promise((resolve, reject) => {
+      const listener = (event) => {
+        console.debug(event);
+        try {
+          const msg = JSON.parse(event.data);
+          if (msg.id === messageID) {
+            window.removeEventListener("message", listener, false);
+            if (msg.error) {
+              reject(msg.error);
+            } else {
+              resolve(msg.data);
+            }
+          } else {
+            console.warn("unexpected msg!");
+          }
+        } catch (e) {
+          console.error(e);
+          return;
+        }
+      };
+      window.addEventListener("message", listener, false);
+      iframe.contentWindow.postMessage(
+        JSON.stringify({
+          id: messageID,
+          transform: `data:text/javascript;base64,${btoa(transform)}`,
+          data,
+        }),
+        "*",
+      );
+    });
+  };
+
+  return new Promise((resolve) => {
+    const listener = (event) => {
+      window.removeEventListener("message", listener, false);
+      console.debug(event);
+      try {
+        const msg = JSON.parse(event.data);
+        if (msg.id === sandboxId) {
+          resolve(run);
+          return;
+        }
+        console.warn("unexpected msg!");
+      } catch (e) {
+        console.error(e);
+        return;
+      }
+    };
+    window.addEventListener("message", listener, false);
+    window.document.body.appendChild(iframe);
+  });
+};
+export default makeSandbox;