Post-processing effects can be applied to your map through the Map SDK.

To learn more about configuring effects, visit this page which contains configuration parameters and examples for each available effect.

JavaScript

This example has a dataset, layer, and map view set. Click the buttons to add effects to the map. Use the code editor to explore App.tsx, which contains all calls to the Map SDK.

App.tsx

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

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

useEffect(() => {
        const loadData = async () => {
            setSampleData(await fetchSampleData());
        };
        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.
                // For more details, see: https://docs.foursquare.com/developer/docs/studio-map-sdk-authentication
                apiKey: "fsq3CYDP77ybwoo1KtkJigGRj6g0uYyhWVw25jM+zN6ovbI=",
                container: containerRef.current!,
            });
            setMap(map);
        };
        loadData();
        initMap();
    }, []);

return <div ref={containerRef} />;
};

Python

This notebook shows how to apply effects to a map in Foursquare Studio.

Updated 5 months ago.