Intro
I recently finished up version 1.0 of a unique and exciting custom mapping app. The project helps a company automate pricing calculations based on geographic service areas. What follows is the detailed account of how it all went down!
About my client
Home to Heaven provides in-home pet hospice and euthanasia services. Dr. Kathleen Cooney founded the company in 2006 after realizing a need for compassionate and comfortable end-of-life care for families’ companion pets. Home to Heaven serves the majority of northern Colorado; an area spanning dozens of towns and cities and more than fifteen hundred square miles.
The problem
Serving such a huge expanse of Colorado requires Home to Heaven to break up the area into regions. Kathy and her team of veterinarians do almost exclusively house-call appointments, so customers pay a final price based on their location within one of these regions.
Previously, the company had to rely on looking up an address on a printed map. This method proved to be an effective way of calculating the charge for a client, but it wasn’t the most accurate or precise way of doing it for dozens of appointments each week.
The solution
Kathy had the idea to save a bit of time for her staff by creating a software tool that would take an address as input and return the price based on the service areas. The Care Coordinators, her employees at the call center who take customer inquiries and book them as appointments, would simply enter the address of the client to calculate how much to charge.
I was picturing a single-page app from the start. I would place a search box and large map, front and center. There would probably not need to be user accounts, but most likely we’d need some kind of password protection to keep the page semi-private.
I used a design app called Sketch to create this first set of wireframes. Producing these was a great starting point for discussion. The wireframes helped us realize that we would need to add a button to allow the user to set the time for the appointment, since time of day is also a factor in determining price. I went with a simple toggle switch for this, since the price changed based on whether the appointment was roughly AM or PM.
JavaScript is the primary language for the app’s code. I utilized the Google Maps API to handle all mapping functions. First, we built the service areas into a Google Map as shapes, using Google Maps “My Maps” feature.
Then, I exported the service areas into KML format, which is an XML-like format for map data. I used Ruby and Nokogiri to pull and format the data I wanted from the KML file.
The output I needed was a nicely formatted JavaScript file containing variables with a bunch of latitude/longitude pairs representing the boundaries of the service regions. This way I could import the service regions into my JavaScript code.
I used the lat/long data to build Google Maps Polygon objects. Once I had these Polygons established, I could use a Google Maps API function called containsLocation(…) to see if a given Address was contained within one of my Polygons. I could use the result to do a simple price lookup based on the rates provided by Dr. Cooney.
I used Material Design elements from the Polymer project to handle design and layout, with BASSCSS as a helper library and custom CSS where necessary. The whole thing runs locally in the browser since, at this time, there is no need for a database or heavy server-side processing.
I used PHP and cookies to handle login.
I also added a lookup history where users can see their most recent searches in the event that they need to recall a recent client address or price quote.
The result
The mapping app helps Home to Heaven save time and provide consistent pricing for its clients. We have plans to increase the functionality and usability through a follow-on project.
