Google Maps with MQTT Demo

I wanted to write a quick demo, where I could have everyone in the audience click locations on a map, and send those locations to a central server where I could process them and show aggregations, analytics, event processing, and some aspects of mobile.

The basic idea is to show a map of the U.S.  Then let my customers/friends/coworkers/wife click on it.  Each click, I will tell them, represents a transaction at a store.  My back end server will collect all of the clicks as map locations from all of the people in the room.  And from that information I will start to draw interesting stuff on the projector, from my computer.

To start with I will need some place to host the application, and for that I hope to use IBM's Cloud, possibly BlueMix or Maybe on my desktop using some flavor of WAS.

I'll need a source repository, and for that I hope to use Git.

I'll need to display maps on a browser, and for that I'll use Google Map API.

To gather all of those mouse clicks I will use MQTT, which can scale up to hundreds of thousands of clicks per second, if it is run on IBM hardware.

I'm going to add AngularJS, and Twitter BootStrap, as I will probably need them at some point.

WebSphere Liberty App Server --
This is just a great App Server.  It starts in a couple seconds, and it has full fidleity with its big brother WAS ND, should I ever what high availability and failover.  I downloaded it from WASDev, and configured a server tu run on port 19080.  In my eclipse tooling (I'm actually using IBM ODM Rule Designer for this because I happen to have it already set up) I just create a dynamic web project, and do an export of the WAR file to the DropIns folder of WebSphere Liberty.  It deploys immediately.

Map Pinner --
I started with Google Maps in an html file. Really simple, they provide a lot of examples.  You need to sign up for a API_KEY so they can track your map usage.

Relatively quickly I was able to put up a map that responds to mouse clicks, and draw markers where the mouse was clicked.  Next I just have to send those events to the server, and from there feed them into the magic software layer.  So far, because everything is client side.  HTML5. I just have all of this in my index.html.

To set markers, you need to add an event listener to the map, and in the callback function, that's where you place the markers, and call MQTT with their location.

I added approximately the following JavaScript  

var mapOptions = {
center: { lat: 41.748789, lng: -72.543329 },
zoom: 8 };

var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});

function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
title: "Marker #"+markerCounter ,
map: map
});
}

MQTT --

I'm using the opensource Paho MQTT client, which was originally developed by IBM.  There's a decent code sample, which I'll just add to the init code and then send location information in the placeMarker function.

So I just copy and paste the Paho file into a javascript include called mqttws31.js  and set some init variables.  I'll use localhost for now.  And the functions onConnectionLost and onMessageArrived are just straight out of the sample code.  I'll need to include those as well.

        var hostname = "localhost";
        var port = 8000; // the mqtt port is 1883, but we'll be using websockets to get there on 8000
        var clientid = "mapDemo_" + parseInt(Math.random() * 100, 10);
     
        //

        client = new Paho.MQTT.Client(hostname, Number(port), clientid);
        client.onConnectionLost = onConnectionLost;
        client.onMessageArrived = onMessageArrived;

MQTT Server --

I happen to have IBM MQ 7.5.0.1 on my desktop already, part of my IBM Integration Bus installation, so I'll use that.  I need to modify my MQ install in order to add MQTT functionality.  This is well documented in the Knowledge Center and takes a few minutes.  Acquiring WebSphere MQ requires licensing, beyond what a casual web developer might have access to.

But once you've done that, there's just a simple script to create an MQTT and WebSocket ports, MQ apps can access the data in the MQTT queues, which is kind of neat.

If you don't need to integrate with things outside of MQTT, then HiveMQ is a simple, no-cost for limited use, MQTT server.  Pull it down, unzip it, edit the configuration.properties files and set websockets.enabled=true.  Then start it from the bin folder.  Could not be simpler.  You still need to configure the WEbSocket port though, but it's simple.

Map Listener --
Again, this is a simple Google Maps API, running in html5.  The difference between the this and the Map Pinner, is that it listens for MQTT messages from the Map Pinner, and drops pins in it's own map, taking input from everyone who's dropping pins.  It makes a nice little MQTT demo.

Map Analytics --
Once we're getting a stream of map data we can do some Map Analytics.

Map Event Rules --
Once we're getting a stream of map data we can do some Map Event Rules, and looks for events that take place outside for the norm.

More to come...