Import

Guide to using the Import widget in Isthmus

Importing data is a common workflow for users of a location intelligence application. Isthmus includes an importing feature to Import data and render it in your app. This requires a method of adding it from the client as well as customizations on the server as well.

Client

import Import from '.././widgets/Import'

const cartocss = `#layer {
        marker-width: 15;
        marker-fill: #EE4D5A;
        marker-fill-opacity: 0.9;
        marker-line-color: #FFFFFF;
        marker-line-width: 1;
        marker-line-opacity: 1;
        marker-placement: point;
        marker-type: ellipse;
        marker-allow-overlap: true;
      }`

const sql = `SELECT * from a WHERE railroad = 'UP'`

<Import
    title="Import Data Layer"
    description="Import data to add to the map"
    page="/"
    cartocss={cartocss}
    sql={sql}
    back={true}
/>

Prop	Description
title	Widget heading title
description	Widget description title
page	Page on which the POST request will take place
cartocss	Style of the layer that will be applied on the import success. Must be defined as a variable
sql	SQL statement that will be applied to the dataset on import. Must use table name as a (i.e. SELECT * FROM a WHERE condition IS true). Must be defined as a variable. If no query is to be applied, set the prop to sql={false}
back	If true, will add the layer to the back of the layer stack

Import starting state

With a file submitted

With a file that has been posted

Import on success

Failed import

Redux will also dispatch an action that will save the new file to the application state so it can be used further. It can be accessed through this.props.layers.{TABLE_NAME} with the same set of properties as any other layer.

Redux state with the new layer and existing layer

Server

You must also make some modifications to the server/server.js file. First you will need to add you credentials to the importer:

const importer = new CartoDB.Import({user:'USERNAME', api_key:'API_KEY'});

Next, you will have to designate the page and privacy of the imported file in this section of code:

app.post('/', 

/* Designate the page path that the import will work on above, i.e. '/' or '/import' */

upload.single('selectedFile'), (req, res) => {

  const fileName = req.file.filename;

  importer
   .file(path.join(__dirname + '/files', `${fileName}`), {
     privacy: 'public'
  
/* Designate the privacy of the imported file - private, link or public */
     
   })
   .error((error) => {
     res.send(error)
   })
   .done((table_name) => {
     res.status(200).json({ success: true, table: table_name, error: null })
     res.send()
   });
});

This will set up the importer to work on the page that you have designated.

Testing

To test the import, you first need to create a compiled version of your application.

You can use yarn run build or yarn run prod to do this.

Next, run yarn run start to run the server. You can also use yarn run start-dev to use Nodemon to test if you are making modifications to the server file. Modifications to the client side code will not take effect.

Customization

You can customize what happens to the file in the .../Import.js file for more specific use cases. The app uses Axios to post the file to the server.