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

To learn more about configuring effects, [visit this page](https://docs.foursquare.com/developer/docs/studio-effect-configuration) 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

```javascript
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.

| **Notebook** | **Preview** |
| --- | --- |
| ### Effects <br> Create a Studio map, then apply post-processing effects to an artistic touch. <br> |  |

Updated 5 months ago.