App Layout

How to set up your app layout and pages

Layouts & Pages

To begin building your application, you need to decide on your application layout. We use the Airship layout as described here.

You can add any layout component to the Page.js component. Below is an example of the Page.js layout:

import React from 'react';
import CARTOMap from './CARTOMap';
import Header from './layout/Header'
import RightBar from './layout/RightBar'
import LeftBar from './layout/LeftBar'
import BottomBar from './layout/BottomBar'
import Panel from './layout/Panel'
import '@carto/airship-style';

const Page = () => (
  <as-responsive-content>
    <body className="as-app">
      <Header />
      <div className="as-content">
        <main className="as-main">
          <div className="as-map-area">
            <CARTOMap />
            <Panel
              vertical='top'
              horizontal='left'
              background=''
              name='Controls'
            />
          </div>
          <BottomBar
            background=''
            name='Bottom'
          />
        </main>
        <RightBar
          size='l'
          background=''
          name='Right'
        />
        <LeftBar
          size='s'
          background=''
          name='Left'
        />
      </div>
    </body>
  </as-responsive-content>
);

export default Page;

Order is very important in this layout so please keep this in mind. We recommend using this layout as a starting point, then removing the components that you do not need.

There are several components that make up the layout elements:

Component

Description

CARTOMap

This component contains the actual map that is rendered on the

Header

The header component ties into the toolbar in Airship

RightBar

Ties into the Right Sidebar

LeftBar

Ties into the Left Sidebar

Panel

Contains the map panel(s)

Footer

Footer elements

Below is an overview from the Airship documentation of the labeled layout element types.

Components

Header

import Header from './layout/Header'

<Header />

The Header component takes no properties, but contains several other elements that can be used inside it which will be covered in the next section.

CARTOMap

import CARTOMap from './CARTOMap';

<CARTOMap />

The CARTOMap component takes no properties and is self contained, however you can make modifications within that file for more custom use cases.

Panel

import Panel from './layout/Panel'

<Panel
    vertical='top'
    horizontal='left'
    background=''
    name='Controls'
/>

The Panel component will add a map panel on top of the CARTOMap component and contains the following props:

Prop

Description

vertical

Vertical position of the panel. Options are top, middle, bottom

horizontal

Horizontal position of the panel. Options are left, center, right

background

Background color (optional) - see Airship color types, colors are added with the syntax

as-bg--[colorname]-[colorcode] i.e. as-bg--support-02

name

Title for the responsive tab

BottomBar

import BottomBar from './layout/BottomBar'

<BottomBar
    background=''
    name='Bottom'
/>

The BottomBar component is tied to the Footer element in Airship and takes two props:

Prop

Description

background

Background color (optional) - see Airship color types, colors are added with the syntax

as-bg--[colorname]-[colorcode] i.e. as-bg--support-02

name

Title for the responsive tab

RightBar

import RightBar from './layout/RightBar'

<RightBar
    size='l'
    background=''
    name='Right'
/>

The RightBar component will add a Right sidebar to the application. It has the following props:

Prop

Description

size

Changes the size of the sidebar. Options are 's', 'l', 'xl' - see more in the Airship documentation

background

Background color (optional) - see Airship color types, colors are added with the syntax

as-bg--[colorname]-[colorcode] i.e. as-bg--support-02

name

Title for the responsive tab

LeftBar

import LeftBar from './layout/LeftBar'

<LeftBar
    size='s'
    background=''
    name='Right'
/>

The RightBar component will add a Right sidebar to the application. It has the following props:

Prop

Description

size

Changes the size of the sidebar. Options are 's', 'l', 'xl' - see more in the Airship documentation​

background

Background color (optional) - see Airship color types, colors are added with the syntax

as-bg--[colorname]-[colorcode] i.e. as-bg--support-02

name

Title for the responsive tab

PreviousApplication StateNextApp Elements

Last updated