How to Integrate Airtable with an Interactive US Map

You’ll get:

• A working demo map embedded in this article
• Airtable table to control colors and content
• Full source code (downloadable ZIP)

How It Works

Step 1: Set Up Your Airtable Table

Create a table named "US Map Data" using Airtable with the following fields:

👉 You can duplicate this example table to get started faster:
US Map Data – Airtable Base (copyable)

Step 2: Download and Add the HTML5 Map Files

To get started, download the ready-to-use ZIP archive with the interactive US HTML5 map and demo integration files:

📦 Download ZIP example

Unpack the archive and upload the contents to your web server or project directory. The key files include:

• raphael.min.js – the SVG rendering engine
• map.js – the core script of the interactive map
• map.css – styles for the map and tooltips
• settings.js – contains the map configuration and default state data
• paths.js – vector shape definitions for each US state
• start-demo.html – an HTML example with full Airtable integration already included

You can use start-demo.html as a starting point or copy relevant code into your own page.

Make sure all files are located in the same folder or properly referenced.

Step 3: Connect the Map to Your Airtable Table

To power the map with live data, we’ll fetch records from Airtable using their API and apply the values to states by ID. This allows you to control colors, tooltips, links, and more — all from your Airtable table.

Update the code below with your actual values:

• YOUR_API_KEY — your Airtable API key (use a personal access token)

• YOUR_BASE_ID — the ID of your Airtable base

• US Map Data — the name of your table (you can keep this as is)

<!-- start Fla-shop.com HTML5 Map -->
  <div id="map-container">
    <div id="map-loader">Loading map data...</div>
  </div>

  <!-- Fla-shop map scripts -->
  <script src="raphael.min.js"></script>
  <script src="settings.js"></script>
  <script src="paths.js"></script>
  <script src="map.js"></script>
  <link href="map.css" rel="stylesheet">
  
  <!-- Airtable integration -->
  <script>
    const airtableApiKey = 'YOUR_API_KEY';
    const airtableBaseId = 'YOUR_BASE_ID';
    const airtableTableName = 'US Map Data';

    async function fetchAirtableData() {
      const url = `https://api.airtable.com/v0/${airtableBaseId}/${encodeURIComponent(airtableTableName)}?pageSize=100`;
      const res = await fetch(url, {
        headers: {
          Authorization: `Bearer ${airtableApiKey}`
        }
      });
      const data = await res.json();
      return data.records;
    }

    function applyMapData(mapInstance, records) {
      records.forEach(r => {
        const id = r.fields['ID'];
        if (!id || !map_cfg.map_data[id]) return;

        mapInstance.setStateAttr(id, {
          ...(r.fields['Name'] && { name: r.fields['Name'] }),
          ...(r.fields['Label'] && { shortname: r.fields['Label'] }),
          ...(r.fields['Color'] && { color: r.fields['Color'] }),
          ...(r.fields['Hover Color'] && { colorOver: r.fields['Hover Color'] }),
          ...(r.fields['Link'] && { link: r.fields['Link'] }),
          ...(r.fields['Comment'] && { comment: r.fields['Comment'] }),
          ...(r.fields['Image'] && { image: r.fields['Image'] })
        });
      });
    }

    // Draw map and load Airtable data
    const map = new FlaMap(map_cfg);
    map.drawOnDomReady('map-container', async function (mapInstance) {
      try {
        const records = await fetchAirtableData();
        applyMapData(mapInstance, records);
      } catch (e) {
        console.error('Airtable error:', e);
        document.getElementById('map-loader').textContent = 'Failed to load data.';
      } finally {
        document.getElementById('map-loader').style.display = 'none';
      }
    });
  </script>
  <!-- end HTML5 Map -->

Conclusion

Integrating your interactive US HTML5 map with Airtable allows you to manage map content visually — no coding required. Whether you're updating state colors, links, or tooltips, everything can be controlled from a simple spreadsheet. This setup is ideal for non-developers, marketers, and teams that want a flexible, low-maintenance solution for data-driven maps.