diff --git a/apps.json b/apps.json
index eba048112..a4e20521d 100644
--- a/apps.json
+++ b/apps.json
@@ -95,5 +95,17 @@
       {"name":"+qrcode"},
       {"name":"=qrcode"}
     ]
+  },
+  { "id": "beer",
+    "name": "Beer Compass",
+    "icon": "beercompass.png",
+    "description": "Uploads all the pubs in an area onto your watch, so it can always point you at the nearest one",
+    "tags": "",
+    "custom": "beercompass.html",
+    "storage": [
+      {"name":"-beer"},
+      {"name":"+beer"},
+      {"name":"=beer"}
+    ]
   }
 ]
diff --git a/apps/beercompass.html b/apps/beercompass.html
new file mode 100644
index 000000000..b70f1b9ca
--- /dev/null
+++ b/apps/beercompass.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html>
+  <head>  
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
+    <link rel="stylesheet" href="../css/spectre.min.css">
+  </head>
+    <style>
+      body {
+        padding: 0;
+        margin: 0;
+      }
+      html, body, #map {
+        height: 100%;
+        width: 100%;
+      }
+      #map { z-index: 1; }
+      #controls {
+        padding: 10px;
+        margin: 10px;
+        border: 1px solid black;
+        position:absolute;
+        right:0px;top:0px;
+        background-color: rgb(255, 255, 255);
+        z-index: 100;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map">
+    </div>
+    <div id="controls">
+      <p>Find the area of interest</p>
+      <p>Click <button id="pubfinder" class="btn btn-primary">Find Pubs</button></p>
+      <p>If ok, Click <button id="upload" class="btn btn-primary">Upload</button></p>
+    </div>
+
+    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+    <script src="https://unpkg.com/osmtogeojson@2.2.12/osmtogeojson.js"></script>
+
+    <script>
+ /*
+
+      https://overpass-turbo.eu/ to check queries.
+      Run:
+
+      node
+        ({{bbox}});
+      out;
+
+      Over the area you're interested in, click on the POI and find out
+      what you need to search for, eg.
+
+        node
+        [amenity=pub]
+        ({{bbox}});
+      out;
+
+*/
+
+      var map = L.map('map').locate({setView: true, maxZoom: 16});
+      var features = [];
+      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors</a>'
+      }).addTo(map);
+      function buildOverpassApiUrl(map, overpassQuery) {
+        var bounds = map.getBounds().getSouth() + ',' + map.getBounds().getWest() + ',' + map.getBounds().getNorth() + ',' + map.getBounds().getEast();
+        var nodeQuery = 'node[' + overpassQuery + '](' + bounds + ');';
+        var wayQuery = 'way[' + overpassQuery + '](' + bounds + ');';
+        var relationQuery = 'relation[' + overpassQuery + '](' + bounds + ');';
+        var query = '?data=[out:json][timeout:15];(' + nodeQuery + wayQuery + relationQuery + ');out body geom;';
+        var baseUrl = 'http://overpass-api.de/api/interpreter';
+        var resultUrl = baseUrl + query;
+        return resultUrl;
+      }
+
+      document.getElementById("pubfinder").addEventListener("click", function() {
+        //var overpassApiUrl = buildOverpassApiUrl(map, "highway=bus_stop");
+        var overpassApiUrl = buildOverpassApiUrl(map, "amenity=pub");
+        var req = new XMLHttpRequest();
+        req.responseType = 'json';
+        req.onreadystatechange = function() {
+          console.log("XMLHttpRequest", this.readyState);
+          if (this.readyState == 4) {
+            var osmDataAsJson = req.response;
+            features = [];
+            if (osmDataAsJson.elements) {
+              osmDataAsJson.elements.forEach(function(el) {
+                if (el.type!="node") return;
+                features.push({lat:el.lat, lon:el.lon,name:el.tags.name});
+              });
+            }
+
+            var resultAsGeojson = osmtogeojson(osmDataAsJson);
+            var resultLayer = L.geoJson(resultAsGeojson, {
+              style: function (feature) {
+                return {color: "#ff0000"};
+              },
+              filter: function (feature, layer) {
+                var isPolygon = (feature.geometry) && (feature.geometry.type !== undefined) && (feature.geometry.type === "Polygon");
+                if (isPolygon) {
+                  feature.geometry.type = "Point";
+                  var polygonCenter = L.latLngBounds(feature.geometry.coordinates[0]).getCenter();
+                  feature.geometry.coordinates = [ polygonCenter.lat, polygonCenter.lng ];
+                }
+                return true;
+              },
+              onEachFeature: function (feature, layer) {
+                var popupContent = "";
+                popupContent = popupContent + "<dt>@id</dt><dd>" + feature.properties.type + "/" + feature.properties.id + "</dd>";
+                var keys = Object.keys(feature.properties.tags);
+                keys.forEach(function (key) {
+                  popupContent = popupContent + "<dt>" + key + "</dt><dd>" + feature.properties.tags[key] + "</dd>";
+                });
+                popupContent = popupContent + "</dl>"
+                layer.bindPopup(popupContent);
+              }
+            }).addTo(map);
+          }
+        };
+        req.open("GET", overpassApiUrl, true);
+        req.send();
+      });
+      document.getElementById("upload").addEventListener("click", function() {
+        var app = `var features = ${JSON.stringify(features)};
+var img_nofix = require("heatshrink").decompress(atob("mUyxH+ACYhJDygtYGsqLVF8u02gziGBoyhQ5gwDGRozRGCQydGCgybGCwyZC5gAaGPQwnGRAwpGQ4xwGFYyFDKsrlYxYDCsBmUyg4yXLyUsFwMyq1WAgUsNCRjUmVXroAEq8yMbcllkskwCEkplDmQwDq0sC54xEHQ9RqQAGqIwCFgOBAASYBSgMBltRAA0sgJsOGJeBxAAGwMrgIXIloxOJYNSvl8CwIDCqMBlYxNC4wxQDIOCwVYDIIDBGJ9YwV8rADBwRJCSqAVCAYaVMC4oxCPYYxQSo4xMSpIxPY4T5HY54XIMbIxKgwXKfKjhEllWGJNWlgXJGLNXruCGI+CrtXGKP+GJB9HMZ6VO/wxJcI8lfJclfKAxKfJEAGJIXLGKSvBWYQZCMZbfEqTHBGJYyFfIo1DGJ4tDGJQwCGJB9IMZyVNGIYyEfJQxPfJgwEMgoZJgAxMltRAA0tGJQyEksslkmAQklGINXxDTBFwIDCq8rC4YACC4gwJMowAJldWAAwwBABowIGJ4AYGJIymGBQylGBgyjGBwyhGCAzeF6YycGCwzYF7IzVF7o1PDqYA=="));
+var img_fix = require("heatshrink").decompress(atob("mUyxH+ACYhJDygtYGsqLVF94zaDYkq6wAOlQyYJo2A63VAAIoC2m0GI16My5/H5/V64ABGQIwBGQ+rTKwWHkhiBGIYwDGQ3VZioVIqoiBGAJhEGRFPGSYTIYwQxCGA4yFqodJGKeqSgQwJGQmkGKQSJfAYwLGQfPDxQwRgHVfAi/EAA4xLGQwRLYwb5BABoxQCBcA43G5wABAgIAMEBgxQ0QxB54xB5gAG4xgBBYOiGJ4PMGInPGIhcCGIt4EJoxPvHM5oxBGAnO6xrCGoXMqgxdpwxD5qQFL4QADlQxdgAhBGILIDMYoADEBwwPgCHBfQzHDAAb4NACTIIAA74OACLIIMo7GOACQoBZAoHBHQPNA4QwggGiZBA5B54HBY0DIKMYtUGMMqFYLIGY4jGhZAr6FAAYwiZAgxIY0TIFfQgADvAfR/zISGJTGR/wxRkj6CGJBiSGKL6DGP4xOGSKVDGAwxRGAQxU5oxcGR75DGJEkGCYxPlXM5vPGA/MlQxUGR1OGIL4I5lOGCgyOqgxBShHMqgwVGJt4GJd4GKwyMvHG5vGABAxMGBQyM1mtABWsGC4yLGBYABGDAyKGKwwQGZKVUF6b/OABowWGbAvZGaovdGp4dTA"));
+
+// https://github.com/Leaflet/Leaflet/blob/master/src/geo/projection/Projection.SphericalMercator.js
+function project(latlong) {
+  var d = Math.PI / 180,
+      max = 85.0511287798,
+      R = 6378137, // earth radius in m
+      lat = Math.max(Math.min(max, latlong.lat), -max),
+      sin = Math.sin(lat * d);
+  return {x:R * latlong.lon * d,
+          y:R * Math.log((1 + sin) / (1 - sin)) / 2};
+}
+
+features.forEach(function(f) {
+  f.p = project(f);
+});
+var fix = {fix:false,satellites:0};
+var nearest = undefined;
+var nearestangle = 0;
+var nearestdist = 0;
+
+Bangle.on('GPS', function(f) {
+  fix = f;
+  fix.p = project(fix);
+  nearest = undefined;
+  nearestangle = 0;
+  nearestdist = 5000; // 5km
+  features.forEach(function(f) {
+    var dx = f.p.x - fix.p.x;
+    var dy = f.p.y - fix.p.y;
+    var d = Math.sqrt(dx*dx + dy*dy);
+    if (d<nearestdist) {
+      nearestdist = d;
+      nearest = f;
+    }
+  });
+  if (nearest) {
+    var dx = nearest.p.x - fix.p.x;
+    var dy = nearest.p.y - fix.p.y;
+    nearestangle = Math.atan2(dy,dx);
+  }
+});
+
+Bangle.on('mag', function(m) {
+  if (!Bangle.isLCDOn()) return;
+  var headingrad = m.heading*Math.PI/180; // in radians
+  if (!isFinite(headingrad)) headingrad=0;
+  if (nearest)
+    g.drawImage(img_fix,120,120,{
+      rotate: (Math.PI/2)+headingrad-nearestangle,
+      scale:3,
+    });
+  else
+    g.drawImage(img_nofix,120,120,{
+      rotate: headingrad,
+      scale:2,
+    });
+  g.clearRect(60,0,180,24);
+  g.setFontAlign(0,0);
+  g.setFont("6x8");
+  if (fix.fix) {
+    g.drawString(nearest ? nearest.name : "---",120,4);
+    g.setFont("6x8",2);
+    g.drawString(nearest ? Math.round(nearestdist)+"m" : "---",120,16);
+  } else {
+    g.drawString(fix.satellites+" satellites",120,4);
+  }
+});
+Bangle.setCompassPower(1);
+Bangle.setGPSPower(1);
+g.clear();`;
+  var json = JSON.stringify({
+  name:"Beer Compass",
+  icon:"*beer",
+  src:"-beer"
+});
+var icon = `require("heatshrink").decompress(atob("mEwghC/AB0O/4AG8AXNgYXHmAXl94XH+AXNn4XH/wXW+YX/C6oWHAAIXN7sz9vdAAoXN9sznvuAAXf/vuC53jC4Xd7wXQ93jn3u9vv9vt7wXT/4tBAgIXQ7wvCC4PgC5sO6czIQJfBC6PumaPDC6wwCC50NYAJcBVgIDBCxrAFbgYXP7yoDF6TADL4YXPVAIXCRyAXC7wXW9zwBC6cNC9zABC4gWQC653CR4fQC6x3TF6gXXI4M9d6wAEC9EN73dAAZfQgczAAkwC/4XXAH4"))`;
+
+
+        window.postMessage({
+          id : "beer",
+
+          storage:[
+            {name:"-beer", content:app},
+            {name:"+beer", content:json},
+            {name:"*beer", content:icon, evaluate:true},
+          ]
+        });
+      });
+
+    </script>
+  </body>
+</html>
diff --git a/apps/beercompass.png b/apps/beercompass.png
new file mode 100644
index 000000000..65d4cb8c6
Binary files /dev/null and b/apps/beercompass.png differ
diff --git a/apps/qrcode.html b/apps/qrcode.html
index 933b61083..8e98aec99 100644
--- a/apps/qrcode.html
+++ b/apps/qrcode.html
@@ -55,7 +55,7 @@ g.setColor(1,1,1);
           storage:[
             {name:"-qrcode", content:app},
             {name:"+qrcode", content:json},
-            {name:"*qrcode", content:icon, "evaluate":true},
+            {name:"*qrcode", content:icon, evaluate:true},
           ]
         });
       });
