#Introduction

In this lab, you'll generate a starter app, then modify it to use a table to
show earthquakes in Iceland.

#Steps

??Create the application

Use a terminal window to navidate to the root of your Neo project, and run the _create-app-training_
scrip. Name the app _Earthquakes_. **Important:** Rather than taking all defaults, you _must_ choose the GoogleMaps main thread addon.

    npm run create-app-training

When you run the app you should get a runtime error telling you the api key is missing.

    Google Maps JavaScript API warning: NoApiKeys

??Add the Google Maps API key

Edit `apps/earthquakes/neo-config.json` and add an entry for _googleMapsApiKey_.
<pre style="color:lightgray;">
{
    "appPath": "../../apps/earthquakes/app.mjs",
    "basePath": "../../",
    "environment": "development",
    "mainPath": "../node_modules/neo.mjs/src/Main.mjs",
    "mainThreadAddons": [
        "DragDrop",
        "GoogleMaps",
        "Stylesheet"
    ],
    <span style="font-weight:bold;color:blue">"googleMapsApiKey": "AIzaSyCRj-EPE3H7PCzZtYCmDzln6sj7uPCGohA",</span>
    "workerBasePath": "../../node_modules/neo.mjs/src/worker/"
}
</pre>

Refresh your browser window and you should see the starter app without any warnings.

??Add the table and store to the `MainView` 

Look the main view. It has an empty `items:[]`. Change it so it has one item, which
is the config for a table and store

<pre class="runnable readonly">
{
    module: Table,
    flex: 1,
    store: {
        module: Store,
        model: {
            fields: [{
                name: "humanReadableLocation",
            }, {
                name: "size",
                ntype: "data-field-float",
            }, {
                name: "timestamp",
                type: "Date",
            }, {
                name: "title",
                calculate: (data, field, item) => item.humanReadableLocation,
            }, {
                name: "position",
                calculate: (data, field, item) => ({
                    lat: item.latitude,
                    lng: item.longitude,
                }),
            },
            ],
        },
        url: "https://apis.is/earthquake/is",
        responseRoot: "results",
        autoLoad: true,
    },
    columns: [{
        dataField: "timestamp",
        text: "Date",
        renderer: (data) =>
            data.value.toLocaleDateString(undefined, {
                weekday: "long",
                year: "numeric",
                month: "long",
                day: "numeric",
            }),
    }, {
        dataField: "humanReadableLocation",
        text: "Location",
    }, {
        dataField: "size",
        text: "Magnitude",
        align: "right",
        width: 100,
        renderer: (data) => data.value.toLocaleString(),
    }],
}
</pre>

If you were to save and refresh you'll get a runtime error 

    ReferenceError: Table is not defined

That's beause the new code references two classes: _Store_ and _Table_, and those haven't been imported. 

??Add imports for `Store` and `Table`

At the top of `MainView.mjs` add two imports:

    import Table from "../../../node_modules/neo.mjs/src/table/Container.mjs";
    import Store from "../../../node_modules/neo.mjs/src/data/Store.mjs";

Save and refresh and the app should run.