Map SDK Annotation

The Map SDK allows you to programmatically apply labels, optionally featuring pointers and circles, to your map.

Currently, only one annotation can be added to the map. In future versions, enterprise users will be able to add several annotations.

See more examples in our product documentation for annotations.

JavaScript

This example features a single annotation with a variety of formatted text, described via the editorContent object.

import { FC, useEffect, useRef } from "react";
import { createMap } from "@foursquare/map-sdk";
import { editorContent } from "./editor-content";

export const App: FC = () => {
    const containerRef = useRef<HTMLDivElement>(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!,
            });
            map.addAnnotation({
                id: "my-annotation",
                kind: "POINT",
                isVisible: true,
                autoSize: true,
                autoSizeY: true,
                anchorPoint: [-122.4194, 37.7749],
                label: "Richtext annotation"
            });
        };
        initMap();
    }, []);

return <div ref={containerRef} style={{ height: "100%" }} />;
};