Location Intelligence apps take flight with Airship

When building new software applications  developers wrestle with doubts on whether their design decisions will deliver users the best possible experience. From interface layout to control and display element selection  developers must decide on a range of issues which directly impact the functionality of their apps. At CARTO we’re fortunate enough to work with a fantastic Design team who provides feedback on our projects  but most customers and partners don’t sit across from designers who can help them with these decisions.

So we decided to solve this problem by first building and over the last six months expanding our front-end library called Airship.

As a comprehensive CSS framework and Location Intelligence component library  Airship offers users ready-to-use layout elements  components  CSS styles  and icons featuring user-centric designs. As such Airship eliminates the guesswork and soul-searching involved in app design allowing developers to instead focus on what problem-solving features are likely to attract new business.

From maps to apps: starting with layout matters

After years of experience in building Location Intelligence products and solutions our product team knows a thing or two about what app layout to choose for specific use cases in different industries. The typical Airship app layout is structured like this:

As the code snippet reveals  maps are still the main attraction. However  in Airship this layout can be enhanced by adding content  charts  and other actions to the map’s sidebars or footer to facilitate viewer engagement with the information being presented.

Another highlight to note is that a toolbar can be added to the map header and also you can create panels for hosting common LI elements (legends  info panels  etc.) in any corner of the map  which can help developers attract users away from competing LI products and toward their app.

Airship is charting a new era of data storytelling

Unlike BI dashboards and GIS reporting tools  Location Intelligence equips users with interactive features for exploring and dynamically rendering the geospatial relations in their data. However  complex relations are sometimes best communicated with charts that reveal the data’s underlying structure and distribution. For these reasons and more Airship includes interactive charts--histograms  stacked-bar  category charts  etc.-- designed to process and present insights from various location data streams.

‍

This interactive design is made possible using a simple API connecting selected charts to their source in the map’s dataset. This means that when map zoom levels are adjusted Airship charts dynamically update so their information reflects the current data view.

All about the UI

Apps are more than maps and charts  but few people realize the amount of UI elements needed to support simple app interactions. In the past  developers had to maintain consistently styled and synchronized workflows for all the buttons  links  dropdowns  checkboxes  and countless other elements for the UI. Now the tedious task of identifying individual UI element issues is a thing of the past thanks to Airship’s predefined CSS styles and basic UI components. Mix and match different UI elements until you find the right look and feel with the certainty that these choices won’t cause your app to malfunction.

The speed at which exploratory apps  demos  and proofs of concept can be created with Airship is great  but when LI apps go into production you may need to modify certain style choices to align with brand guidelines or standards related to the specific use case.

Not a problem!

Simple CSS variable updates allow you to custom select colors and backgrounds to change  but you can also make more extensive changes by overriding any CSS style property. Learn more about styling Airship.

Airship works on any browser and is framework independent

Whether you’re a React diehard  or you favor new players on the scene like Vue  or you prefer javascript plain and simple  we’ve got you covered! Airship works with your javascript framework of choice.

The image below shows a recent app built with React and Airship.

Based on web components standard  Airship works seamlessly in modern browsers and can be easily packaged with any framework. In case the browser doesn’t support the needed requirements  polyfills are loaded on the fly. No need to worry about cross-browser issues with components.

And yes  if you stick to Airship layouts  then your app will work on mobile devices. All you need to do is specify which components are responsive by placing them inside an ‘as-responsive-content’ element  With this the selected components automatically rearrange themselves as tabs in mobile screens.

Learn more at the Developer Center

There’s a lot more to explore so make sure to visit the Developer Center for in-depth guides  references  and examples that highlight Airship’s exciting and extensive offers.