A customized map solution on top of Google maps to visualize commercial properties data

For Property Capsule (acquired by VTS in October 2019), we developed an embeddable app that can display a large amount of closely located retailer and property data on Google maps.

About Property Capsule

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. Its platform keeps property data, such as property overviews, agent contacts, site plans, tenant lists, photography, maps, and demographics in a central repository; and enables its users to update property information in the system using a web-based interface. The company’s presentation modules are provided for iPads, web, mobiles, tradeshows, and laptops.

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,

1. Develop an app that will be tightly consumed by a parent app. Also, it can be independently consumed as a light-weight embeddable component by any other web or mobile apps to ensure support across various devices.
2. Implement different views for property data on different zoom levels. On the rooftop zoom level (zoom level of 18), retailer data needs to be shown along with property data. There should be no overlap between a large amount of closely 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

• Google Maps API
• Markers, polygons, lines, etc
• Integration with data points that shows data in embed mode

Parent App

• User registration & authentication
• Saving user data
• Premium features like Sharing with collaborators

We chose not to use any full-featured JS framework for developing the embeddable app. This helped us keep it light-weight. It came with a problem of complex state management but light-weightedness of the app was of higher priority. For the parent app, we chose to use Angular. Angular as a framework with a large community and good 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.

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

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

Results

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

Initial product designs did not account for very closely 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 were able to handle more than what even largest screen can handle. The below image shows the algorithm in action.