Observable Notebooks

Studio maps can be embedded in and controlled from Observable JavaScript notebooks.

Studio maps work seamlessly in Observable notebooks.

Import the Map SDK

TypeScript

mapSDK = import("https://unpkg.com/@foursquare/map-sdk/dist/index.js?module");

Display a Studio Map

TypeScript

viewof map = {
  let iframe;

const map = mapSDK.createMap();

iframe = map.iframe;
  yield iframe;
}

Control the Map

After importing and creating a map object, you can control the map via the functions listed out in the Map SDK documentation.