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.
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
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 above.
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 above image shows the algorithm in action.
We are available in 5 cities and also on the world wide web making us reachable to anyone on the planet with an internet connection.
