> For the complete documentation index, see [llms.txt](https://developers.felt.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.felt.com/js-sdk/sample-application.md).

# Sample application

This is a sample application showing how to use the Felt SDK to build an app with the following features:

* listing the map's layers
* toggling layer visibility
* moving the viewport to center it on predefined city locations

<figure><img src="/files/F31GsGl9aNC0dQL9ZMx5" alt=""><figcaption><p>The sample Felt SDK Application</p></figcaption></figure>

The commented code in its entirety is shown below.

```html
<!doctype html>
<html lang="en">
  <head>
    <title>Felt JS SDK</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        font-size: 13px;
      }

      .container {
        display: grid;
        grid-template-columns: 1fr 240px;
        height: 100vh;
      }

      iframe {
        display: block;
      }

      #sidebar {
        padding: 1rem;
        user-select: none;
      }

      #markers {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #ccc;
      }

      .marker {
        cursor: pointer;
        padding: 0.25rem 0;
      }

      .layer-toggles_toggle {
        padding: 0.25rem 0;
        margin-left: -4px;
        display: flex;
        align-items: center;
        gap: 0.25rem;
      }

      h3 {
        margin: 0;
        margin-bottom: 0.5rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="mapContainer"></div>
      <div id="sidebar">
        <div id="markers">
          <h3>Cities</h3>
        </div>
        <div id="layers">
          <h3>Layers</h3>
        </div>
      </div>
    </div>

    <script type="module">
      // Load the Felt SDK from the jsDelivr CDN
      import { Felt } from "https://esm.run/@feltmaps/js-sdk";

      // Get the map and sidebar elements
      const container = document.getElementById("mapContainer");
      const markerContainer = document.getElementById("markers");
      const layerContainer = document.getElementById("layers");

      // Embed the map — replace this ID with your own map's ID
      const felt = await Felt.embed(container, "u49BWs5EtSI29CpwuwB9CzRiC", {
        uiControls: {
          showLegend: false,
          cooperativeGestures: false,
          fullScreenButton: false,
        },
      });

      // Add some cities to the sidebar
      const locations = [
        { name: "Oakland", lat: 37.8044, lng: -122.271 },
        { name: "New York", lat: 40.7128, lng: -74.006 },
        { name: "Los Angeles", lat: 34.0522, lng: -118.2437 },
        { name: "Chicago", lat: 41.8781, lng: -87.6298 },
        { name: "Houston", lat: 29.7604, lng: -95.3698 },
        { name: "Phoenix", lat: 33.4484, lng: -112.074 },
      ];

      locations.forEach((location) => {
        // create a DOM element with the city name
        const marker = document.createElement("div");
        marker.classList.add("marker");
        marker.innerText = location.name;

        // center the viewport on the city when the marker is clicked
        marker.addEventListener("click", () => {
          felt.setViewport({
            center: {
              latitude: location.lat,
              longitude: location.lng,
            },
            zoom: 10,
          });
        });

        // add the marker to the sidebar
        markerContainer.appendChild(marker);
      });

      // get all the layers
      felt.getLayers().then((layers) => {
        layers.forEach((layer) => {
          // create a DOM element to represent the layer
          const layerElement = document.createElement("div");
          layerElement.classList.add("layer-toggles_toggle");
          layerElement.innerHTML = `
            <input type="checkbox" id="${layer.id}" ${
              layer.visible ? "checked" : ""
            }>
            <label for="${layer.id}">${layer.name}</label>
          `;

          // toggle the layer's visibility when the checkbox changes
          const checkbox = layerElement.querySelector("input");
          checkbox.addEventListener("change", () => {
            felt.setLayerVisibility(
              checkbox.checked ? { show: [layer.id] } : { hide: [layer.id] },
            );
          });

          // let the map be the source of truth: keep the checkbox in
          // sync if the layer's visibility changes for any other reason
          felt.onLayerChange({
            options: { id: layer.id },
            handler: ({ layer }) => {
              if (layer) checkbox.checked = layer.visible;
            },
          });

          // add the layer element to the container
          layerContainer.appendChild(layerElement);
        });
      });
    </script>
  </body>
</html>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://developers.felt.com/js-sdk/sample-application.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
