---
schema_version: "1"
id: 9e77d62b4271c339d178fe360118e3feddebd6645b5d4f013b567a77d2094089
title: Create an Earthquake Data Connector
collection: tableau
version: current
locale: en-us
portal_url: https://docs.salesforce.com/tableau/current/en-us/api/webdataconnector/docs/wdc_create_earthquake_data_connector.md
canonical_url: https://help.tableau.com/current/api/webdataconnector/en-us/docs/wdc_create_earthquake_data_connector.html
source_site: help.tableau.com
content_type: documentation
content_hash: bbc15a9867f11fb0dfee3f7c3f263263aa3ccaf699d0bdb34031b9e062b3e1e8
description: Documentation for the Tableau Web Data Connector
---
**Deprecated** - This repository will be removed with the Tableau 26.3 release.

The Web Data Connector 3.0 framework is deprecated and will not receive further updates. Migrate to the [REST API Connector on Tableau Exchange](https://exchange.tableau.com/products/1111)—built by Tableau, supports JSON and CSV over HTTP GET, Basic/Bearer/OAuth authentication, and runs on Tableau 2023.3 and later. Note: this connector is extract-only and requires a JDBC driver installation.

# Create an Earthquake Data Connector

  

🕐 _4 min read_

The earthquake data JavaScript boilerplate is a connector connecting to earthquake data and contains simple JavaScript and HTML.

## Use cases

- JSON
- Custom parsing
- TypeScript
- Good first connector

## Instructions

To create your connector, we recommend that you first create a sample earthquake data connector and edit the generated files. It’s easier to get all the files and directory structure your connector needs by just using an existing example.

To create your earthquake data connector, do the following steps.

### Step 1: Create a boilerplate earthquake data connector

1. Enter the following command to create the connector:
    
    ```
    taco create my-earthquake-data-connector --boilerplate earthquake-data 
    ```
    
    This creates a directory with the earthquake data boilerplate code, which is included with the toolkit.
2. Change directories to the `my-earthquake-data-connector` directory.
    
    ```
    cd my-earthquake-data-connector
    ```
3. Build the connector by entering the following command:
    
    ```
    taco build
    ```
    
    This command clears any previous or existing build caches, then installs the dependencies, then builds the frontend code and the backend code (handlers), then copies the connector.json file (the configuration file).

### Step 2: Configure your connector’s properties

In your new earthquake data connector directory, find and open the `connector.json` file.

```
{
  "name": "my-earthquake-data-connector",
  "displayName": "Earthquake Data Connector",
  "version": "1.0.0",
  "tableau-version": {
    "min": "2023.3"
  },
  "vendor": {
    "name": "vendor-name",
    "support-link": "https://vendor-name.com",
    "email": "support@vendor-name.com"
  },
  "permission": {
    "api": {
      "https://*.usgs.gov/": [
        "GET",
        "POST"
      ]
    }
  },
  "auth": {
    "type": "none"
  },
  "window": {
    "height": 800,
    "width": 600
  }
}
```

Make the following changes:

1. Change the general properties.
    
    | Name | Value |
    | --- | --- |
    | name | Your connector’s directory name |
    | displayName | Your connector’s name. This is the name that appears in the Tableau connectors area. |
    | version | Your connector’s version |
    | min | The earliest Tableau version your connector supports |
2. Change the company properties.
    
    | Name | Value |
    | --- | --- |
    | vendor.name | Your company name |
    | vendor.support-link | Your company’s URL |
    | vendor.email | Your company’s email |
3. Change the permissions.
    
    | Name | Value |
    | --- | --- |
    | permission.api | The URI for the API that the connector is allowed to access, along with the methods (POST, GET, PUT, PATCH, DELETE) that the connector is allowed to use. |
4. Verify the authentication type.
    
    | Name | Value |
    | --- | --- |
    | auth.type | Enter `none`. |
    
    For more information about authentication, see the Authentication section in the [Considerations for Building Your Connector](/current/api/webdataconnector/en-us/docs/wdc_dev_considerations.html) topic.
5. Change the HTML pane size.
    
    | Name | Value |
    | --- | --- |
    | window.height | The height of the connector HTML pane |
    | window.width | The width of the connector HTML pane |

### Step 3: Edit the user interface

When you open a web data connector in Tableau, the connector displays an HTML page that links to your JavaScript code and to your connector’s handlers. Optionally, this page can also display a user interface for your users to select the data that they want to download.

To create a user interface for your connector, open the `/app/index.html` file.

```
<!DOCTYPE html>
<html>

<head>
  <title>USGS Earthquake Feed</title>
  <meta http-equiv="Cache-Control" content="no-store" />
  <link rel="icon" href="data:,">
  <link href="index.css" rel="stylesheet" />
  <script src="index.ts" type="module" defer></script>
</head>

<body>
  <div class="box">
    <button type="button" id="submitButton" disabled>
      Please wait while settings load...
    </button>
  </div>
</body>

</html>
```

Let’s run through what the code is doing. Skipping over the standard markup for an HTML page, notice the following between the `head` tags:

- The `meta` tag prevents your browser from caching the page.
- The `index.css` file is used to simplify styling and formatting.
- The `index.ts` file is the code for your connector.

### Step 4: Edit the connector object

Now that you’ve created a user interface, it’s time to edit the TypeScript code for the connector’s button. First, open the `/app/index.ts` file.

```
function submit() {
  connector.handlerInputs = [
    {
      fetcher: 'MyFetcher',
      parser: 'MyParser',
      data: {
        url: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson',
      },
    },
  ]
  connector.submit()
}
```

### Step 5: Update the fetcher file

If your data is complex and needs preprocessing, use the TACO Toolkit library to prepare your data. The following is the default code that the `/handlers/MyFetcher.ts` files uses to get the data:

```
import { Fetcher, FetchUtils, FetchOptions } from '@tableau/taco-toolkit/handlers'

export default class MyFetcher extends Fetcher {
  async *fetch({ handlerInput }: FetchOptions) {
    yield await FetchUtils.fetchJson(handlerInput.data.url)
  }
}
```

### Step 6: Configure how the data is presented

Now you must define how you want to map the data to one or more or tables. This mapping of data is done in the schema.

To decide how to map your data, look at your data source. When you’re done looking at the summary of the JSON data source, make the necessary edits in the `/handlers/MyParser.ts` file to structure the returned data.

```
import { DataContainer, DataType, log, ParseOptions, Parser } from '@tableau/taco-toolkit/handlers'

interface FeatureRow {
  id: string
  properties: {
    mag: number
    title: string
  }
  geometry: {
    type: string
    coordinates: [number, number, number]
  }
}

interface FetcherResult {
  features: FeatureRow[]
}

export default class MyParser extends Parser<FetcherResult> {
  parse(fetcherResult: FetcherResult, { dataContainer }: ParseOptions): DataContainer {
    const tableName = 'My Sample Data'
    log(`parsing started for '${tableName}'`)

    const containerBuilder = Parser.createContainerBuilder(dataContainer)
    const { isNew, tableBuilder } = containerBuilder.getTable(tableName)

    if (isNew) {
      tableBuilder.setId('mySampleData')
      tableBuilder.addColumnHeaders([
        {
          id: 'id',
          dataType: DataType.String,
        },
        {
          id: 'mag',
          alias: 'magnitude',
          dataType: DataType.Float,
        },
        {
          id: 'title',
          alias: 'title',
          dataType: DataType.String,
        },
        {
          id: 'location',
          dataType: DataType.Geometry,
        },
      ])
    }

    tableBuilder.addRows(
      fetcherResult.features.map((row) => {
        return { id: row.id, mag: row.properties.mag, title: row.properties.title, location: row.geometry }
      })
    )

    return containerBuilder.getDataContainer()
  }
}
```

Some notes:

- You don’t need to write a custom parser for CSV data or for Excel data. The TACO Toolkit contains these parsers. For more information, see [Class CsvUtils](https://help.tableau.com/current/api/webdataconnector/en-us/reference/classes/handlers.CsvUtils.html) and [Class ExcelUtils](https://help.tableau.com/current/api/webdataconnector/en-us/reference/classes/handlers.ExcelUtils.html) in the SDK reference documentation.

### Step 7: Build your connector

Enter these commands to build, pack, and run your new connector:

```
taco build
```

```
taco pack
```

```
taco run Desktop
```