Flamingo: The Central Mapping — Revolutionizing Our Annotation Process

Efficiency and speed are everything when it comes to data annotation and mapping. Let’s start by clarifying what Data annotation really means and what I mean by mapping as well.

So, what’s the problem?

In simple terms, mapping refers to an area covered by specific latitudes and longitudes. Different functionalities, such as drawing a polygon on the map or adding a comment to a specific location, are known as data annotation.

In our company, we faced an issue of providing similar functionality across different products for our customers. Each time we needed these features, we started from scratch, copying and pasting the same code into different repositories. When a new feature was released in one product, we had to rebuild it for the others, which required additional effort.

Additionally, we encountered significant architectural issues. As the number of coordinates on the map increased, the application started lagging.

Data management throughout the app was inconsistent and inefficient, with everyone defining their own states and stores. This led to problems such as browser hangs and data leakage.

Solution

That’s why our team built a package to streamline these processes: Flamingo: The Central Mapping.

Flamingo is a package that integrates various tools and functionalities into a cohesive system, enabling our team to annotate, manage, and manipulate data layers easily. It is built on top of the existing open-source package Open Layers. Specifically, Flamingo addresses several key challenges:

1. Visualization of Property Features Over Maps: Our existing problem was that the browser would hang when the number of coordinates increased. To address this in Flamingo, we implemented a clustering functionality. This feature loads only the coordinates within your current view. If the number of coordinates exceeds the allowed limit, it clusters them together. When you zoom in, the individual coordinates become visible. Additionally, clicking on a cluster will automatically zoom in to display the individual coordinates.
2. Efficient Data Management: Our existing problem was that everyone defined their own data states, leading to inconsistencies. With Flamingo, we created a global data store for the map, using Zustand behind the scenes. This approach helps avoid unnecessary re-renders of components and provides easy access to data wherever it is required. It offers functionalities for organizing, sorting, and filtering data, making it easier to handle complex datasets without compromising performance.
3. Annotation and Markup: Our existing problem was the lack of a base layer or architecture for creating new packages. With Flamingo, we now provide a base class that can be extended to create new tools. Flamingo also offers multiple tools, such as adding polygons, notes, markers, and other annotations directly onto maps and data layers. This is particularly useful for different projects. Previously, we had to invest time in creating these tools for every new project we developed.
4. Data Manipulation: Our existing problem was that the browser would hang when performing complex calculations, such as merging because it was blocking the main thread. Flamingo solves this by allowing sophisticated data manipulation, including the ability to merge, split, and transform data layers. These complex calculations are moved to a worker thread, which unblocks the main Js thread.
5. Integration with Other Tools: Our existing problem was that whenever we created a new functionality, we had to develop it again for other products. With Flamingo, it’s a centralized package, and if anyone develops a new functionality, it can be easily extended to other products. This integration capability reduces the time and effort needed for integration.

This blog post will provide an overview of Flamingo’s architecture and its key features.

Please check the deployed version of Flamingo at http://flamingo.attentive.ai/

Understanding the Basics of Mapping Before Diving into Flamingo

Before we delve into what our package, Flamingo, does, it’s essential to understand how maps work in real life. Let’s look at how Google Maps operates as an example.

When you use Google Maps, you first see a base layer. This base layer is typically low-resolution, allowing it to load quickly. It provides a foundational view of the area you’re exploring.

Upon this base layer, Google Maps adds multiple layers of information sequentially. Each layer contains specific details, such as different types of roads, pathways, and highways. These layers are overlaid individually, each enriching the map with more detailed information.

Following the road and pathway layers, additional layers include extra information like the locations of businesses, petrol stations, restaurants, and other points of interest. Each element is placed in distinct layers, making the map more informative and useful.

This layered approach is what makes modern mapping tools so powerful and user-friendly. They enable users to access a wealth of information in a structured and efficient manner.

Why we needed Flamingo

To provide our users with a detailed view of different types of layers, we need functionality similar to what we see with tools like Google Maps. For instance, layers could include elements such as driveways, lawns, and mulch beds. Users should be able to annotate or draw these features on the map using various tools.

Moreover, this functionality should not only be available for maps based on coordinates but also for blueprint takeoff files, typically in PDF format.

By breaking down these requirements, we can organize them into four main categories:

Js Layer: It allows you to integrate the Flamingo package with any other language. Currently, it’s built for React, but it can be easily extended to other frameworks.

Map/Feature Layer: This layer sets up the base layer and different layers, such as images for blueprints (BPT) or Google Maps for coordinates-based aerial mapping. It also provides functionality to add various layers with different types of geometries (basically drawings), each with its own properties, such as color, size, and shape.

Store Layer: This layer provides easy access to the data stored in the map and offers multiple functions to retrieve data easily. One example is retrieving data based on layer type and layer ID.

Tool Layer: This layer would house various tools for creating features and annotating them on the map, such as the Add Polygon and Merge tool.

Overview of Flamingo’s Architecture

Flamingo is built on a robust framework that allows for the seamless integration of different components. It’s an extended version of open-source package open-layers. The architecture is designed to be modular, ensuring that each part of the system can be developed, tested, and maintained independently.

basic view of flamingo architecture

Here’s a detailed look at the main components of Flamingo:

Consumer Hub

• Web Annotation (Features/Fusion/Advancement): This is the central interface where users can annotate web data, access various features, and utilize advanced functionalities.

Js Layer

• This layer provides different ways to integrate the Flamingo package into your codebase. If you want to install it from npm, you can do so with npm install flamingo. We are also working on providing it as a CDN, so you can add it directly in your script header.

Map/Feature Layer

• Map Annotation Methods: These methods (loadMapLayer, updateLayer, removeLayer, addNewLayer) are pivotal for the manipulation of map layers.
• It also provides functionality for adding different base layers. For example, if you want to add an image at specific coordinates, you can use the addBaseLayer method provided by this layer.

Store Layer (cache it)

• This component is responsible for data storage, managing cache, and ensuring data persistence across sessions. If you want to grab the data for a particular, you can do it by using getLayerById method provided by this layer.

Tool Layer

• AI Tools: Advanced tools leveraging artificial intelligence for smarter annotations.
• Basic Tools: Fundamental tools required for basic annotation tasks.
• Shape Tools: Tools for adding various shapes like polygons, rectangles, polylines, and circular arcs.

Codebase

import React from 'react';
import Flamingo from 'flamingo';
import { MAP_TYPE } from "woodpecker";
import useMapStore, { mapStore } from "flamingo/mapStore";

// add base layer to the map
const dummyLayer = {
  name: "dummy-layer",
  layer_type: "dummy-layer",
  id: "dummy-layer",
  original_json: null,
  style: {
    color: "green",
    geometry_type: 3,
    z_index: 100,
  },
};

const Map = () => {
  const setTool = useMapStore((state: mapStore) => state.setTool);

  const getLayers = () => {
    const layers = new Map();
    layers.set(dummyLayer.id, dummyLayer.style);
    return layers;
  };

  useEffect(() => {
    // this set default tool to add polygon after 1 sec
    setTimeout(() => {
      setTool({
        tool_id: "add_polygon",
        is_action: false,
        title: "Add Polygon",
      });
    }, 1000);
  }, []);

  // mount flamingo on the map and load it.
  return <Flamingo
      selectedLayer={dummyLayer}
      layers={getLayers()}
      overlayLayers={[]}
      data={{
        layers: [dummyLayer],
      }}
      mapType={MAP_TYPE.AERIAL}
    />  
}


export default Map;

Deploy link: http://flamingo.attentive.ai/

Key Features of Flamingo

• Modular Design: Flamingo’s architecture is highly modular, allowing for easy integration and extension of functionalities.
• User-Friendly Interface: The UI components are designed to provide an intuitive and efficient user experience.
• Comprehensive Toolset: From basic annotation tools to advanced AI-powered functionalities, Flamingo offers a wide range of tools to cater to all annotation needs.
• Efficient Data Management: Flamingo's robust backend store ensures efficient data management, including storage, caching, and retrieval.

Conclusion

In how data annotation and mapping are dealt with, the Central Mapping of Flamingo comes into play. The team requires this tool due to its modular structure, friendly interface, and complete set of tools that it has.

Data annotation tasks that are done inaccurately will be enhanced when we start using Flamingo; therefore, we will save time and become more productive.

Stay tuned for more updates and tutorials on how to make the most of Flamingo’s features!