Build responsive, mobile-first location intelligence apps on the web with our front-end component library.
This library is still under support but it will not be further developed. We don’t recommend starting new projects with it as it will eventually become deprecated. Instead, learn more about our current CARTO for React library here
Airship is a set of tools designed to facilitate the development of location intelligence apps by offering layouts, basic patterns, templates, CSS classes, components, widgets and much more. Apps created with Airship will have a consistent UI and an proper UX validated and tested by CARTO.
Airship is currently composed of three fundamental parts that can be used separately: A CSS framework, a series of web-components and a set of icons.
In a Location Intelligence application you can distinguish two parts: the map itself and everything else. Contrary to what you might think, Airship is not used to render maps, to do this you have to use one of our map rendering libraries CARTO.js or CARTO-VL.
Airship is responsible for the layout and UI of the application. Once you have the map, Airship is used to generate, for instance, a sidebar and its contents or the map’s legends.
Read our getting started guide for a detailed explanation
The easiest way to include Airship is through our CDN, adding the tags in the header of the web:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
<head>
<!-- Include CSS elements -->
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v2.4.1/airship.css">
<!-- Include icons -->
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v2.4.1/icons.css">
<!-- Include airship components -->
<script type="module" src="https://libs.cartocdn.com/airship-components/v2.4.1/airship/airship.esm.js"></script>
<script nomodule="" src="https://libs.cartocdn.com/airship-components/v2.4.1/airship/airship.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
</head>
<body class="as-app-body">
<div class="as-app">
<header class="as-toolbar"></header>
<nav class="as-tabs"></nav>
<div class="as-content">
<aside class="as-sidebar as-sidebar--left"></aside>
<main class="as-main">
<div class="as-map-area">
<div id="map"></div>
<div class="as-map-panels">
<div class="as-panel as-panel--top as-panel--right">
<div class="as-panel__element as-p--32 as-bg--warning"></div>
</div>
</div>
</div>
<footer class="as-map-footer as-bg--complementary" style="height: 100px;"></footer>
</main>
<aside class="as-sidebar as-sidebar--right"></aside>
</div>
</div>
<!-- CARTO basemap -->
<script>
const map = new mapboxgl.Map({
container: 'map',
style: 'https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json',
center: [0, 30],
zoom: 2
});
</script>
</body>
</html>