Overview:

CartoLab Elements is a package of reusable and themeable React components designed for building user interfaces for map-based web applications. The motivation behind this project is to provide developers with a set of components that can be easily customized to match existing brands and allow them to focus more on the specific business logic of their applications. Unlike similar tools like Esri’s Web AppBuilder, which are primarily for non-developers, CartoLab Elements is meant for developers and can be used in any React-based web application. Currently, CartoLab Elements works with MapboxGL.js, but there are plans to expand support to other mapping libraries in the future.

Features:

• Reusable and Themeable Components: CartoLab Elements provides a set of components that can be reused across different map-based web applications and can be easily themed to match existing brands.
• Support for MapboxGL.js: CartoLab Elements currently works with MapboxGL.js, which is widely used and has a minimal set of UI elements or plugins available.
• Developer-Focused: Unlike similar tools for configuring mapping applications, CartoLab Elements is primarily intended for developers to use in their projects.

Installation:

To install CartoLab Elements, you need to run the following command using npm or yarn package managers:

npm install @cartolab/elements

or

yarn add @cartolab/elements

It’s important to note that when cloning the full source from GitHub, you need to add a src/config.js file that exports an object with your Mapbox token. This is necessary for running the Storybook in development mode. The src folder provides a config.template.js file that you can copy and modify. Additionally, your project should include the following peer dependencies: react, react-dom, and mapbox-gl.

To enable CartoLab Elements in your application, you need to import and wrap your app in the ElementsProvider. The ElementsProvider performs two functions: passing theme information and creating a shared map context for reading and controlling the map state used by the components. Here’s an example of how to enable CartoLab Elements in your application:

// index.js
import React from 'react';
import { ElementsProvider } from '@cartolab/elements';
import App from './App';

ReactDOM.render(
  <ElementsProvider>
    <App />
  </ElementsProvider>,
  document.getElementById('root')
);

// App.js
import React from 'react';

const App = () => {
  return (
    <div>
      {/* Your app content */}
    </div>
  );
};

export default App;

Summary:

CartoLab Elements is a collection of reusable and themeable React components designed specifically for developers building map-based web applications. It provides an efficient way to create customized user interfaces for mapping applications that can be easily integrated into any React-based project. With support for MapboxGL.js and plans for expanding to other mapping libraries in the future, CartoLab Elements offers a convenient solution for developers working with maps in their applications.