openstmap: display waypoints

If waypoints module is available, display the waypoints on the
map. Also update the documentation and fix some english in the
documentation.

apps/openstmap/README.md

@@ -17,20 +17,20 @@ To add a map:
 * Scroll and zoom to the area of interest or use the Search button in the top left
 * Now choose the size you want to upload (Small/Medium/etc)
 * On Bangle.js 1 you can choose if you want a 3 bits per pixel map (this is lower
-quality but uploads faster and takes less space). On Bangle.js 2 you only have a 3bpp
+quality, but uploads faster and takes less space). Bangle.js 2 is limited to 3bpp.
-display so can only use 3bpp.
 * Click `Get Map`, and a preview will be displayed. If you need to adjust the area you
 can change settings, move the map around, and click `Get Map` again.
 * When you're ready, click `Upload`
 
 ## Bangle.js App
 
-The Bangle.js app allows you to view a map - it also turns the GPS on and marks
+The Bangle.js app allows you to view a map. It also turns the GPS on
-the path that you've been travelling (if enabled).
+and marks the path that you've been travelling (if enabled), and
+displays waypoints in the watch (if dependencies exist).
 
 * Drag on the screen to move the map
-* Press the button to bring up a menu, where you can zoom, go to GPS location
+* Press the button to bring up a menu, where you can zoom, go to GPS location,
-, put the map back in its default location, or choose whether to draw the currently
+put the map back in its default location, or choose whether to draw the currently
 recording GPS track (from the `Recorder` app).
 
 **Note:** If enabled, drawing the currently recorded GPS track can take a second

apps/openstmap/app.js

@@ -10,6 +10,7 @@ var settings = require("Storage").readJSON("openstmap.json",1)||{};
 function redraw() {
   g.setClipRect(R.x,R.y,R.x2,R.y2);
   m.draw();
+  drawPOI();
   drawMarker();
   // if track drawing is enabled...
   if (settings.drawTrack) {
@@ -25,6 +26,23 @@ function redraw() {
   g.setClipRect(0,0,g.getWidth()-1,g.getHeight()-1);
 }
 
+// Draw the POIs
+function drawPOI() {
+  var waypoints = require("waypoints").load();
+  if (!waypoints)
+    return;
+  g.setFont("Vector", 18);
+  waypoints.forEach((wp, idx) => {
+    var p = m.latLonToXY(wp.lat, wp.lon);
+    var sz = 2;
+    g.setColor(0,0,0);
+    g.fillRect(p.x-sz, p.y-sz, p.x+sz, p.y+sz);
+    g.setColor(0,0,0);
+    g.drawString(wp.name, p.x, p.y);
+    print(wp.name);
+  })
+}
+
 // Draw the marker for where we are
 function drawMarker() {
   if (!fix.fix) return;