MapLists for Android

MapLists allows you to attach data to Google Map markers. The idea came from a buddy of mine who works in construction. Every day his crews organize themselves around constantly changing locations, and keeping track of where certain people and equipment are is challenging with so many moving targets. MapLists addresses this through providing a visual geographical representation of such assets.

MapLists takes a NoSQL approach for its back-end storage (using Couchbase Mobile). This essentially means that you can add any data types to Map markers that you want without being forced to follow standardized patterns or schemas.

As users enter an address, MapLists connects with the new Google Places API via an IntentService for autofilling.

I often wonder what life would’ve been like growing up as a kid while enjoying the advantages of modern technology. The practical real-world benefits of using a geographical interface for data representation are endless, but I’ll try to cover most of MapLists’ current functionality within one example as I provide a synopsis of the client-side application.

Out of nostalgia for one of my favorite childhood movies, I’ll be applying MapLists to a situation encountered in Home Alone (1990). If you’ve seen the movie, you’ll recall that at several points Kevin orders pizza from a shop called Little Nero’s – I’ll be using the pizza delivery guy to illustrate how MapLists might be used by somebody delivering pizzas (in the movie, the character never had any official name, so we’ll call him Dan the pizza man).


Rrrring!!! Dan’s newly acquired Android device rings with an anachronistic enthusiasm. He answers it – it’s Kevin McCallister again, and he needs a pizza delivered to him pronto! Now that he’s equipped with modern technology, Dan is determined to maintain a digital record of all his business orders and deliveries, and he opens a fresh MapLists installation which in the beginning simply shows an empty Google map.

To place a map Marker, Dan either drops the marker manually and drags it to the appropriate location (by clicking the red marker button in the top Toolbar), or he enters an address and MapLists places a marker at that location automatically (by clicking the smiley-face). Through either approach, MapLists uses Geocoder for converting between physical addresses and map coordinates.

Within this marker’s info-window we see the little droid robot icon (which we’ll replace momentarily with a thumbnail of Kevin’s house) along with some space on the right for text. You’ll also notice that the marker here is colored indigo which, if you’ve worked with Google maps on Android before, you’ll know isn’t one of the restricted predefined hues for map markers. I got around this by using a custom white png for the marker bitmap, then painting it on the fly.

Once a marker is selected, several new buttons appear within the bottom toolbar. Moving from right to left we can delete this marker and all of its associated data (trashcan), edit the primary list of data attached to this marker (pencil), re-position the marker by dragging it to another location (directional pad), center the screen onto the marker if it’s currently out of view (binoculars), or enter list mode where we can assign additional lists of data to this marker beyond just the primary list (clipboard).

The zoom buttons (magnifying glasses) directly above the toolbar are just FloatingActionButtons, the doubling of which I haven’t seen outlined in the new Material Design guidelines but I thought they looked neat.

Every marker in MapLists has a primary list attached to it comprised of atleast two associated text fields and a photo field for an image. Images may either be captured via the camera if present, or loaded from any photo-gallery application installed on the device. These default fields simply represent the contents of the marker’s info-window when viewed on the map – Dan can also add more fields as we’ll see in a moment.

In addition to entering field information, users may also change the field titles themselves, in this case “Name” and “Snippet”, to whatever they wish via the corresponding edit buttons (pencil). Moreover, the marker color itself may be adjusted via the color button (rainbow).

MapLists uses a modified version of AndroidColorPicker by jbruchanov for color selection.

After selecting a new marker color (orange), Dan then goes about entering a name and address, and finally loads an image of the McCallister house to be used as thumbnail.

Dan can now visualize this entry on the map. That’s peachy and all, but it would be nice to store more data about this location than simply a name, address and image. Clicking once again to edit this location, Dan then presses on the green ‘+’ button, bringing up a Dialog where he then selects from a list of different data fields to add to this marker.

In addition to accepting text-based input via EditTexts, some of these fields also include CheckBoxes, Spinners, and RatingBars. In future I also plan to incorporate sound and video files as well.

Every field by default (with the exception of photos for the moment) comes with one editable title and one input entry; however some fields provide for extra options such as consolidating multiple input entries under one title. In addition, some fields provide different display options, and every field intended for text-based input recognizes HTML (so for instance you can change the font color and add boldface/italics, etc. to text entries by using the appropriate tag).

In the above screenshot Dan has added 4 Name fields to keep track of family members living at the house. Dan also adds a phone number and a brief note. Any fields Dan adds can also be deleted via the corresponding ‘X’ button.

Furthermore, anytime that the structure for this list changes, Dan is prompted to save that structure (commonly known as a schema) and provide a name for it. This way Dan can use this same list structure for multiple markers without having to recreate it each time. In the screenshot above you’ll see this form constitutes Schema01 (selectable from the top-left toolbar).

But while schemas may be useful, there’s no reason to ever feel confined by structure. As shown above, Dan went on to add a few more map markers. The green marker shows his Pizza shop, and its associated list would expectantly contain a much different format than the list attached to the McCallister marker. I don’t yet have a server up and running, but the ultimate objective here is to enable users to share map lists with each other.

This would come in handy if for example there were multiple delivery drivers all coordinating their deliveries with one another, or if an employer needed to keep tabs on where their drivers were at any given moment. It would also be useful in coordinating events at certain locations – the purple marker above denotes a future golf appointment for Dan and his friends which we’ll check out in further detail a bit later on.

You also now see a few more FloatingActionButtons above the zoom options. These buttons show up only after multiple markers exist on the map and can be used to quickly cycle to the next nearest map marker on either side of the currently selected marker.

To assist with tracking orders, Dan wants a record of every order placed by the McCallister household, and for that he’ll want to create a new list. Pressing the clipboard button on the bottom toolbar brings up list-mode, essentially allowing Dan to add any number of extra lists to any marker.

For delivery orders, Dan plans to keep track of several criteria, namely who phoned in the order, the dates and times when the order was both placed and delivered, a receipt, and maybe a picture of the food just for good measure. Determining orders themselves should be grouped together according to who placed the order, Dan enters “Kevin” as the Subject field, then adds two Date-Time fields, a Price-list field for the receipt, and a photo field for the picture.

As Dan adds future orders, each order is displayed within its own custom CardView and added to the RecyclerView.

The orange card in the above screenshot is the list Dan just created to detail Kevin’s delivery order. Below that is a second list detailing a take-out order, which understandably would follow a much different structure than delivery orders.

After delivering his pizzas, Dan is finally off work and ready to attend a golf match with his friends. Once the server is set up, all of Dan’s friends will see this appointment marker on their Android devices. Users could potentially make their present locations appear visibly on each other’s maps, thereby enabling users with a graphical means of disclosing where they currently are, along with providing a time estimate for arrival at their currently selected destination.

Because appointment markers are shared among multiple users, they may serve as a record for what occurs during that appointment. Once at the golf-course, if Dan decides to perhaps take a few pictures or record some other content like golf scores, he need only attach them to the map marker in order to share them in real-time with his friends.

I hope that this app may serve as an example for how to implement the illustrated functionality and hopefully will assist in promoting map-orientated interfaces as a viable method for data collection, storage and display. If you’d like to help out in any way please feel free to contact me or just open an issue/create a pull request. Thanks for reading!