These examples show how to bring datasets into your Map SDK projects.



The following example was made with React, and features buttons that call each of the dataset functions individually. Use the code editor to explore App.tsx, which contains all calls to the Map SDK.

HTML and JavaScript

This example demonstrates how to work with Map SDK without any framework or bundler available, in a pure JS and HTML setup.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Basic HTML and JS example</title>
      body {
        margin: 0;
        padding: 0;
      #map-container {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      type="module" makes it possible to work with JS modules
    <script type="module">
      // we import a bundled version of Map SDK from unpkg CDN
      import { createMap } from "";

      // we now can call functions as we would anywhere else
      const map = await createMap({
        apiKey: "<api-key>",
        container: document.getElementById("map-container"),

    <div id="map-container"></div>


The following Python Notebook shows how to bring data into Foursquare Studio maps. This example also shows how to load pandas dataframes into Studio.


Local Maps

Use local Studio maps to visualize Dataframes, GeoJSON, and CSV.

Binder Colab GitHub