theThingsNetwork LoRaWan messages on a map

Yesterday and today I was at a joint Gopher Gala meetup from the Golang Amsterdam meetup and theThingsNetwork at the Rockstart office in Amsterdam. Most people were playing around with Lorawan hardware (sending packets) and writing Go code. Exactly as planned!

Do

I wanted to produce something tangible. The idea of building a map and displaying the Lorawan messages on it as they arrived, in real-time, occurred to me last week. At the meetup I learned about the existence of ttntool, which connects to the MQTT server from theThingsNetwork. This was proof getting all the packets on the (demo) network was possible, and even easy. So I decided to build the map.

Example

To give you an idea of what it looks like, here is a screenshot:

It’s also running for real, you can see it in action at https://ttnmsgmap.irias.nl/ (it may be down by the time you read this).

Caveat: It doesn’t work on Internet Explorer. This is because it uses server-sent events which aren’t implemented in IE. Server-sent events are a very simple way to get events from a webserver to a browser.

How

The code consists of the frontend in HTML/CSS/JavaScript, and the backend in Go.

The frontend is mostly the map, created with the OpenLayers map library with the beautiful Stamen tiles. It connects to the Go webserver to fetch a list of known gateways (the Go code is just a (fast) cache for the (rather slow, plain-http-only) theThingsNetwork gateways API call). It also opens server-sent events connections for gateway keepalives and data packets.

New gateways are drawn on the map. For new packets, we find the gateway it arrived on, and display a popup with the message details at the location of the gateway.

Code

You can check it out for yourself. The code is at https://bitbucket.org/mjl/ttnmsgmap/.