Basic Example

JavaScript

This basic example is made with React, importing the map and inserting it into a container.

import { FC, useEffect, useRef, useState } from "react";
import { createMap, MapApi } from "@foursquare/map-sdk";

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

useEffect(() => {
        const initMap = async () => {
            const map = await createMap({
                // This is an API Key that only works for these examples.
                // Provide your own Map SDK API Key instead.
                apiKey: "fsq3CYDP77ybwoo1KtkJigGRj6g0uYyhWVw25jM+zN6ovbI=",
                container: containerRef.current!,
            });
            setMap(map);
        };
        initMap();
    }, []);
};

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.

<body>
  <!--
      type="module" makes it possible to work with JS modules
      see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
    -->
  <script type="module">
    // we import a bundled version of Map SDK from unpkg CDN
    import { createMap } from "https://cdn.jsdelivr.net/npm/@foursquare/map-sdk@latest/dist/index.js";
    
    // we now can call functions as we would anywhere else
    const map = await createMap({
      apiKey: "<api-key>",
      container: document.getElementById("map-container"),
    });
  </script>

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

Python

This example notebook shows how to create a map, add a dataset, and set the map view -- three simple functions of the Map SDK.

Notebook	Preview
### Introduction Create Studio map, add a dataset, and set the map view.