Real Estate

Property Capsule

Customized map solution for commercial properties

Overview

Ajackus Partnered with Property Capsule to develop an embeddable app that can display many near located retailer and property data on Google maps.
Property Capsule is a cloud-based technology platform that helps its users manage and present their property portfolio. It simplifies the centralization, automation, and publication of property information, keeps property data, such as property overviews, agent contacts, site plans, tenant lists, photography, maps, and demographics in a central repository. It enables its users to update property information in the system using a web-based interface. The company’s presentation modules provide for iPads, web, mobiles, tradeshows, and laptops.

Project Name

Property Capsule

Services

Web App development
Staff Augmentation

Domain

domain

Real estate

Problem

Property Capsule needed a customized map solution on top of Google maps to visualize commercial property data. They also wanted this solution to be embeddable in multiple platforms as presentation modules are available on various devices like iPads, mobiles & laptops.

Process

The requirements were to address two problems mainly,

Develop an app that will be tightly consumed by a parent app. Also, it can be independently finished as a light-weight embeddable component by any other web or mobile apps to ensure support across various devices

Implement different views for property data on different zoom levels. On the rooftop zoom level (zoom level of 18), retailer data needs to show along with property data. There should be no overlap between a large amount of nearly located retailers.

As part of addressing the first requirement, we carried out the careful drafting of product features and determined where they lie, whether in a parent app or an embeddable app.

Embeddable App

Parent App

Google Maps API

User registration & authentication

Markers, polygons, lines, etc

Saving user data

Integration with data points that shows data in embed mode

Premium features like Sharing with collaborators

We chose not to use any JS framework for developing the embeddable app. It helped us keep it light-weight. It came with complex state management, but the light-weightedness of the app was of higher priority. For the parent app, we chose to use Angular. Angular as a framework with extensive community and fair build process (available via Angular CLI) turned out to be more appropriate for our use case than what other frameworks had to offer at that time.

We needed to take a custom approach for the second requirement as Google maps do not provide any solution to handle near located location data. The primary aspect that we wanted to address was how to keep data from overlapping with each other. After a lot of consideration, we decided to use the spiral algorithm to distribute nearby located retailers.

The algorithm will start from the central location and start spiraling outward until it finds an open position that it can occupy. It continues at multiple levels.

Results

The embed functionality allowed custom maps to use various devices, Property Capsule supports, and any website using iFrame functionality. Also, the responsive nature of plans resulted in maps embedded in any sizes. One needs to copy a small snippet of code, and they are ready to embed it.

Initial product designs did not account for very near located large numbers of retailers, as shown below.

We did not stop here. We continue to add enhancements to this app even today. You can check it in its full glory at https://maps.propertycapsule.com.

However, due to the scalable implementation of a spiral algorithm, we could handle more than what even most massive screen can take. The below image shows the algorithm in action.

You may also like

Let's Work Together

Get in touch to let us know what you’re looking for, and one of our solution architects will get back to you soon.

Contact Us