CouchDB on Suse VM in Azure For Less Than $100/month (Part 5 of 5)

In this final post of the series, the design views in CouchDB will be used to populate heat maps and show near real-time device location. The code for the maps is hosted at GitHub (https://github.com/markfennell/couchdb_heatmap).

The mapping code uses the following libraries:

• heatmap.js v2.0.0 by Patrick Wied (http://www.patrick-wied.at/static/heatmapjs/),
• LeafletJS (http://leafletjs.com/)
• SimpleHeat (https://github.com/mourner/simpleheat)
• jQuery

This post will not discuss the code used to produce the heat maps but will show how the pages render in the browser.

1. Introduction
   1. Goals
   2. Cheap, Fast, Reliable
   3. Eventual Consistency
2. Installation
   1. Create VM
   2. Installs
   3. SSH Security
   4. Capture VM
3. Client Code
   1. Create Databases
   2. Create Benchmark/Testing Code
   3. Create Views
   4. Start Replication
   5. Cron Jobs
4. Performance Tweaks
   1. stale=update_after
   2. CouchDB local.ini mods
5. Mapping Data
   1. Aggregate Heat Map
   2. Live Map

 

5. Map Code

 

The Code

https://github.com/markfennell/couchdb_heatmap

 

Aggregate Heat Map

The Aggregate Heat Map uses the map-reduce view to summarize hot spots or (x,y) coordinates to occur frequently in the data. Using Leaflet, the code allows for panning and zooming.

https://youtu.be/byYcdrqQkuk

 

 

Live Map

The Live Map shows data points as they are recorded in the database using the map design view. The Live Map has also been called a Marauder Map based on the map used in the Harry Potter series. The map design view serves a timestamp and coordinate pair for a requested time frame. Every five seconds, the data is drawn on a canvas layer that is discarded as time passes and each new layer is drawn on top of older layers with 60% transparency. By using the HTML5 canvas, data and DOM layers do not accumulate over time and reduce the resources required by the browser.

https://youtu.be/-YWCXFpctbA