Datasets

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

JavaScript

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.

import { FC, useEffect, useMemo, useRef, useState } from "react";
import { createMap, Dataset, DatasetWithData, MapApi } from "@foursquare/map-sdk";
import { SampleDataItem, fetchSampleData } from "./sample-data";

const getFirstDataset = (map: MapApi): Dataset => {  
    const dataset = map.getDatasets()[0];  
    if (!dataset) {  
        throw new Error("No dataset.");  
    } else {  
        return dataset;  
    }  
};

export const App: FC = () => {  
    const containerRef = useRef<HTMLDivElement>(null);  
    const [map, setMap] = useState<MapApi | null>(null);  
    const [displayedDataset, setDisplayedDataset] = useState<DatasetWithData | null>(null);  
    const [sampleData, setSampleData] = useState<[SampleDataItem, SampleDataItem] | null>(null);

useEffect(() => { 
        // logic here
    }, []);
};

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.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Basic HTML and JS example</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map-container {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import { createMap } from "https://cdn.jsdelivr.net/npm/@foursquare/map-sdk@latest/dist/index.js";
      const map = await createMap({
        apiKey: "<api-key>",
        container: document.getElementById("map-container"),
      });
    </script>
    <div id="map-container"></div>
  </body>
</html>

Python

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

Notebook	Preview
### Local Maps Use local Studio maps to visualize Dataframes, GeoJSON, and CSV.

Updated 5 months ago.