diff --git a/apps/wpmoto/README.md b/apps/wpmoto/README.md
index 96c72ff55..42afa12b9 100644
--- a/apps/wpmoto/README.md
+++ b/apps/wpmoto/README.md
@@ -52,7 +52,8 @@ where "*n*" is the next unused number.
 
 Select a waypoint using the menu. Once the waypoint is selected and you're
 back on the main screen, press either the top or bottom button (`BTN1` or
-`BTN3`). Confirm that you want to delete the waypoint with the middle
+`BTN3`), or, on Bangle.js 2, scroll the screen up or down.
+Confirm that you want to delete the waypoint with the middle
 button (`BTN2`).
 
 ## Waypoint editor
@@ -68,27 +69,43 @@ This will load up the waypoint editor:
 
 ### Add a waypoint
 
-Use the map to find your destination. Clicking on the map will
-populate the latitude/longitude input boxes with the coordinates
-of the point you clicked on. Type in a name for the waypoint and
-click "Add Waypoint". Click "Upload" to send the updated list of
-waypoints to the watch.
+Click on the map to add a waypoint. You'll be prompted to give it
+a name.
 
 ### Edit a waypoint
 
-Click on the pencil icon next to the waypoint you wish to edit.
-This will remove the waypoint from the list and populate the
-input boxes.
-Edit the coordinates by hand, or by clicking on the map. Edit
-the name if you want. Click "Add Waypoint" to save the waypoint
-back to the list. Click "Upload" to send the updated list of
-waypoints to the watch.
+Click on the map marker of the waypoint you wish to edit. You
+can then click on the blue pencil icon to edit the name of the
+waypoint. If you want to move the waypoint to a new location then
+you need to delete it and re-add it.
 
 ### Delete a waypoint
 
-Click on the pencil icon next to the waypoint you wish to edit.
-This will remove the waypoint from the list.
-Click "Upload" to send the updated list of waypoints to the watch.
+Click on the map marker of the waypoint you wish to delete. You
+can then click on the red bin icon to delete the waypoint.
+
+### Add a route
+
+![](newroute.png)
+
+Click on the map to place the first waypoint. The name of the first
+waypoint will become the name of the route.
+
+Click on the map marker for the new waypoint and click "Make route".
+Now every time you click on the map it will add another point
+on this route. When you're done either right click or click the
+"Close route" button above the map.
+
+Points along the route don't have names by default, but if you wish
+to add one you can click on the waypoint and use the blue pencil icon
+to give it a name.
+
+![](editroute.png)
+
+### Delete a route
+
+Click on the map marker for any point on the route, and select
+"Delete entire route".
 
 ## Mounting the watch on the bike
 
@@ -123,6 +140,7 @@ Compared to the original Way Pointer app, Waypointer Moto:
  * can add new waypoints from inside the app without requiring a blank slot
  * can delete waypoints from inside the app without needing the PC
  * still uses the same `waypoints.json` file
+ * supports "routes" which automatically step from one waypoint to the next
 
 ## Gotchas
 
@@ -144,8 +162,6 @@ turns white again.
 
 ## Possible Future Enhancements
 
- - "routes" with multiple waypoints; automatically step from one
-   waypoint to the next when you get near to it
  - some way to manually input coordinates directly on the watch
  - make the text & arrow more legible in direct sunlight
  - integrate a charging connector into the handlebar mount
diff --git a/apps/wpmoto/app.js b/apps/wpmoto/app.js
index 8a0e86ef6..7deacb6ca 100644
--- a/apps/wpmoto/app.js
+++ b/apps/wpmoto/app.js
@@ -1,10 +1,15 @@
 var loc = require("locale");
 
-var waypoints = require("Storage").readJSON("waypoints.json")||[{name:"NONE"}];
+var waypoints = require("Storage").readJSON("waypoints.json") || [];
 var wp = waypoints[0];
+if (wp == undefined) wp = {name:"NONE"};
 var wp_bearing = 0;
+var routeidx = 0;
 var candraw = true;
 
+const ROUTE_STEP = 50; // metres
+const EPSILON = 1; // degrees
+
 var direction = 0;
 var dist = 0;
 
@@ -15,138 +20,130 @@ var previous = {
   wp_name: '',
   course: 180,
   selected: false,
+  routeidx: -1,
 };
 
 /*** Drawing ***/
 
-var pal_by = new Uint16Array([0x0000,0xFFC0],0,1); // black, yellow
-var pal_bw = new Uint16Array([0x0000,0xffff],0,1);  // black, white
-var pal_bb = new Uint16Array([0x0000,0x07ff],0,1); // black, blue
-var pal_br = new Uint16Array([0x0000,0xf800],0,1); // black, red
-var pal_compass = pal_by;
+var W = g.getWidth();
+var H = g.getHeight();
+// layout (XXX: this should probably use the Layout library instead)
+var L = { // banglejs1
+  arrow: {
+    x: 120,
+    y: 80,
+    r1: 79,
+    r2: 69,
+    bufh: 160,
+    bufy: 40,
+  },
+  text: {
+    bufh: 40,
+    bufy: 200,
+    largesize: 40,
+    smallsize: 15,
+    waypointy: 20,
+  },
+};
+if (W == 176) {
+  L = { // banglejs2
+    arrow: {
+      x: 88,
+      y: 70,
+      r1: 70,
+      r2: 62,
+      bufh: 160,
+      bufy: 0,
+    },
+    text: {
+      bufh: 40,
+      bufy: 142,
+      largesize: 40,
+      smallsize: 14,
+      waypointy: 20,
+    },
+  };
+}
 
-var buf = Graphics.createArrayBuffer(160,160,1, {msb:true});
+var pal_by = new Uint16Array([0x0000,0xffc0],0,1); // black, yellow
+var pal_bw = new Uint16Array([0x0000,0xffff],0,1); // black, white
+var pal_br = new Uint16Array([0x0000,0xf800],0,1); // black, red
+
+var buf = Graphics.createArrayBuffer(240,160, 1, {msb:true});
 var arrow_img = require("heatshrink").decompress(atob("vF4wJC/AEMYBxs8Bxt+Bxv/BpkB/+ABxcD//ABxcH//gBxcP//wBxcf//4Bxc///8Bxd///+OxgABOxgABPBR2BAAJ4KOwIABPBR2BAAJ4KOwIABPBR2BAAJ4KOwIABPBQNCPBR2DPBR2DPBR2DPBR2DPBR2DPBR2DPBR2DPBQNEPBB2FPBB2FPBB2FPBB2FPBB2FPBB2FPBB2FPBANGPAx2HPAx2HPAx2HPAx2HPAx2HPAx2HeJTeJB34O/B34O/B34O/B34O/B34O/B34O/B34O/B34OTAH4AT"));
 
-function flip1(x,y,palette) {
-  g.drawImage({width:160,height:160,bpp:1,buffer:buf.buffer, palette:palette},x,y);
+function flip(y,h,palette) {
+  g.drawImage({width:240,height:h,bpp:1,buffer:buf.buffer, palette:palette},0,y);
   buf.clear();
 }
 
-function flip2_bw(x,y) {
-  g.drawImage({width:160,height:40,bpp:1,buffer:buf.buffer, palette:pal_bw},x,y);
-  buf.clear();
-}
-
-function flip2_bb(x,y) {
-  g.drawImage({width:160,height:40,bpp:1,buffer:buf.buffer, palette:pal_bb},x,y);
-  buf.clear();
-}
-
-function drawCompass(course) {
+function draw(force) {
   if (!candraw) return;
 
-  previous.course = course;
-
-  buf.setColor(1);
-  buf.fillCircle(80,80, 79);
-  buf.setColor(0);
-  buf.fillCircle(80,80, 69);
-  buf.setColor(1);
-  buf.drawImage(arrow_img, 80, 80, {rotate:radians(course)} );
-  var palette = pal_br;
-  if (savedfix !== undefined && savedfix.fix !== 0) palette = pal_compass;
-  flip1(40, 30, palette);
-}
-
-function drawN(force){
-  if (!candraw) return;
-
-  buf.setFont("Vector",24);
+  var course = direction;
   var dst = loc.distance(dist);
 
-  // distance on left
-  if (force || previous.dst !== dst) {
+  if (force || previous.dst !== dst || previous.wp_name !== wp.name || previous.routeidx !== routeidx || Math.abs(course-previous.course)>EPSILON) {
+    previous.course = course;
+
+    var palette = pal_br;
+    if (savedfix !== undefined && savedfix.fix !== 0)
+      palette = isNaN(savedfix.course) ? pal_by : pal_bw;
+
+    buf.setColor(1);
+    buf.fillCircle(L.arrow.x,L.arrow.y, L.arrow.r1);
+    buf.setColor(0);
+    buf.fillCircle(L.arrow.x,L.arrow.y, L.arrow.r2);
+    buf.setColor(1);
+    buf.drawImage(arrow_img, L.arrow.x, L.arrow.y, {rotate:radians(course)} );
+    flip(L.arrow.bufy,L.arrow.bufh,palette);
+
+    // distance on left
     previous.dst = dst;
+    previous.wp_name = wp.name;
+    previous.routeidx = routeidx;
+
     buf.setColor(1);
     buf.setFontAlign(-1, -1);
-    buf.setFont("Vector",40);
+    buf.setFont("Vector",L.text.largesize);
     buf.drawString(dst,0,0);
-    flip2_bw(8, 200);
-  }
 
-  // waypoint name on right
-  if (force || previous.wp_name !== wp.name) {
-    previous.wp_name = wp.name;
+    // waypoint name on right
     buf.setColor(1);
     buf.setFontAlign(1, -1);
-    buf.setFont("Vector", 15);
-    buf.drawString(wp.name, 80, 0);
-    flip2_bw(160, 220);
+    buf.setFont("Vector", L.text.smallsize);
+    buf.drawString(wp.name, W, L.text.waypointy);
+
+    // if this is a route, draw the step name above the route name
+    if (wp.route) {
+      buf.drawString((wp.route[routeidx].name||'') + " " + (routeidx+1) + "/" + wp.route.length, W, 0);
+    }
+
+    flip(L.text.bufy,L.text.bufh,pal_bw);
   }
 }
 
-function drawAll(force) {
-  if (!candraw) return;
-
-  g.setColor(1,1,1);
-  drawN(force);
-  drawCompass(direction);
-}
-
 /*** Heading ***/
 
 var heading = 0;
-function newHeading(m,h){
-    var s = Math.abs(m - h);
-    var delta = (m>h)?1:-1;
-    if (s>=180){s=360-s; delta = -delta;}
-    if (s<2) return h;
-    var hd = h + delta*(1 + Math.round(s/5));
-    if (hd<0) hd+=360;
-    if (hd>360)hd-= 360;
-    return hd;
-}
-
-var CALIBDATA = require("Storage").readJSON("magnav.json",1)||null;
-
-function tiltfixread(O,S){
-  var start = Date.now();
-  var m = Bangle.getCompass();
-  var g = Bangle.getAccel();
-  m.dx =(m.x-O.x)*S.x; m.dy=(m.y-O.y)*S.y; m.dz=(m.z-O.z)*S.z;
-  var d = Math.atan2(-m.dx,m.dy)*180/Math.PI;
-  if (d<0) d+=360;
-  var phi = Math.atan(-g.x/-g.z);
-  var cosphi = Math.cos(phi), sinphi = Math.sin(phi);
-  var theta = Math.atan(-g.y/(-g.x*sinphi-g.z*cosphi));
-  var costheta = Math.cos(theta), sintheta = Math.sin(theta);
-  var xh = m.dy*costheta + m.dx*sinphi*sintheta + m.dz*cosphi*sintheta;
-  var yh = m.dz*sinphi - m.dx*cosphi;
-  var psi = Math.atan2(yh,xh)*180/Math.PI;
-  if (psi<0) psi+=360;
-  return psi;
-}
-
 function read_heading() {
-  if (savedfix !== undefined && !isNaN(savedfix.course)) {
+  if (savedfix !== undefined && savedfix.satellites > 0 && !isNaN(savedfix.course)) {
     Bangle.setCompassPower(0);
     heading = savedfix.course;
-    pal_compass = pal_bw;
   } else {
-    var d = tiltfixread(CALIBDATA.offset,CALIBDATA.scale);
     Bangle.setCompassPower(1);
-    heading = newHeading(d,heading);
-    pal_compass = pal_by;
+    var d = 0;
+    var m = Bangle.getCompass();
+    if (!isNaN(m.heading)) d = -m.heading;
+    heading = d;
   }
 
   direction = wp_bearing - heading;
   if (direction < 0) direction += 360;
   if (direction > 360) direction -= 360;
-  drawCompass(direction);
+  draw();
 }
 
-
 /*** Maths ***/
 
 function radians(a) {
@@ -218,23 +215,39 @@ function onGPS(fix) {
   savedfix = fix;
 
   if (fix !== undefined && fix.fix == 1){
-    dist = distance(fix, wp);
+    if (wp.route) {
+      while (true) {
+        dist = distance(fix, wp.route[routeidx]);
+        // step to next point if we're within ROUTE_STEP metres
+        if (!isNaN(dist) && dist < ROUTE_STEP && routeidx < wp.route.length-1)
+          routeidx++;
+        else
+          break;
+      }
+    } else {
+      dist = distance(fix, wp);
+    }
     if (isNaN(dist)) dist = 0;
-    wp_bearing = bearing(fix, wp);
+
+    if (wp.route) {
+      wp_bearing = bearing(fix, wp.route[routeidx]);
+    } else {
+      wp_bearing = bearing(fix, wp);
+    }
     if (isNaN(wp_bearing)) wp_bearing = 0;
-    drawN();
+    draw();
   }
 }
 
 function startTimers() {
   setInterval(function() {
-    Bangle.setLCDPower(1);
+    if (W==240) Bangle.setLCDPower(1); // keep banglejs1 display on
     read_heading();
-  }, 500);
+  }, 250);
 }
 
 function addWaypointToMenu(menu, i) {
-  menu[waypoints[i].name] = function() {
+  menu[waypoints[i].name + (waypoints[i].route ? " (R)" : "")] = function() {
     wp = waypoints[i];
     mainScreen();
   };
@@ -243,7 +256,9 @@ function addWaypointToMenu(menu, i) {
 function mainScreen() {
   E.showMenu();
   candraw = true;
-  drawAll(true);
+  g.setColor(0,0,0);
+  g.fillRect(0,0,W,H);
+  draw(true);
 
   Bangle.setUI("updown", function(v) {
     if (v === undefined) {
@@ -262,11 +277,13 @@ function mainScreen() {
       E.showMenu(menu);
     } else {
       candraw = false;
-      E.showPrompt("Delete waypoint: " + wp.name + "?").then(function(confirmed) {
+      var thing = wp.route ? "route" : "waypoint";
+      E.showPrompt("Delete " + thing + ": " + wp.name + "?").then(function(confirmed) {
         var name = wp.name;
         if (confirmed) {
+          var thing = wp.route ? "Route" : "Waypoint";
           deleteWaypoint(wp);
-          E.showAlert("Waypoint deleted: " + name).then(mainScreen);
+          E.showAlert(thing + " deleted: " + name).then(mainScreen);
         } else {
           mainScreen();
         }
@@ -281,7 +298,6 @@ Bangle.on('kill',()=>{
 });
 
 g.clear();
-Bangle.setLCDBrightness(1);
 Bangle.setGPSPower(1);
 startTimers();
 Bangle.on('GPS', onGPS);
diff --git a/apps/wpmoto/editor.png b/apps/wpmoto/editor.png
index 0d2f9841b..b8983d3ab 100644
Binary files a/apps/wpmoto/editor.png and b/apps/wpmoto/editor.png differ
diff --git a/apps/wpmoto/editroute.png b/apps/wpmoto/editroute.png
new file mode 100644
index 000000000..556dbfc8c
Binary files /dev/null and b/apps/wpmoto/editroute.png differ
diff --git a/apps/wpmoto/metadata.json b/apps/wpmoto/metadata.json
index 4e6c3497a..f562b23ba 100644
--- a/apps/wpmoto/metadata.json
+++ b/apps/wpmoto/metadata.json
@@ -2,11 +2,11 @@
   "id": "wpmoto",
   "name": "Waypointer Moto",
   "shortName": "Waypointer Moto",
-  "version": "0.01",
+  "version": "0.02",
   "description": "Waypoint-based motorcycle navigation aid",
   "icon": "wpmoto.png",
   "tags": "tool,outdoors,gps",
-  "supports": ["BANGLEJS"],
+  "supports": ["BANGLEJS","BANGLEJS2"],
   "screenshots": [{"url":"screenshot.png"},{"url":"screenshot-menu.png"},{"url":"screenshot-delete.png"}],
   "readme": "README.md",
   "interface": "wpmoto.html",
diff --git a/apps/wpmoto/newroute.png b/apps/wpmoto/newroute.png
new file mode 100644
index 000000000..9f57cd11e
Binary files /dev/null and b/apps/wpmoto/newroute.png differ
diff --git a/apps/wpmoto/wpmoto.html b/apps/wpmoto/wpmoto.html
index 2fb7c9455..9966f51f6 100644
--- a/apps/wpmoto/wpmoto.html
+++ b/apps/wpmoto/wpmoto.html
@@ -1,198 +1,352 @@
-<html>
-  <head>
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
     <link rel="stylesheet" href="../../css/spectre.min.css">
     <link rel="stylesheet" href="../../css/spectre-icons.min.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css" type="text/css">
-    <link href="https://cdn.jsdelivr.net/npm/ol-geocoder@latest/dist/ol-geocoder.min.css" rel="stylesheet">
-  </head>
-  <body>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css">
 
-    <h4>List of waypoints</h4>
-    <table class="table">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Lat.</th>
-          <th>Long.</th>
-          <th>Actions</th>
-        </tr>
-      </thead>
-      <tbody id="waypoints">
-        
-      </tbody>
-    </table>
-    <br>
-    <h4>Add a new waypoint</h4>
-    <form id="add_waypoint_form">
-      <div class="columns">
-        <div class="column col-3 col-xs-8">
-          <input class="form-input input-sm" type="text" id="add_waypoint_name" placeholder="Name">
+    <style type="text/css">
+        html, body { height: 100% }
+        .flex-col { display:flex; flex-direction:column; height:100% }
+        #map { width:100%; height:100% }
+
+        /* https://stackoverflow.com/a/58686215 */
+        .arrow-icon {
+            width: 14px;
+            height: 14px;
+        }
+        .arrow-icon > div {
+            margin-left: -1px;
+            margin-top: -3px;
+            transform-origin: center center;
+            font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+        }
+    </style>
+</head>
+<body>
+    <div class="flex-col">
+        <div id="statusarea">
+            <button id="download" class="btn btn-error">Reload</button> <button id="upload" class="btn btn-primary">Upload</button>
+            <span id="status"></span>
+            <span id="routestatus"></span>
         </div>
-        <div class="column col-3 col-xs-8">
-          <input class="form-input input-sm" value="0.0000" type="number" step="any" id="add_latitude" placeholder="Lat">
+        <div style="flex: 1">
+            <div id="map"></div>
         </div>
-        <div class="column col-3 col-xs-8">
-          <input class="form-input input-sm" value="0.0000" type="number" step="any" id="add_longitude" placeholder="Long">
-        </div>
-      </div>
-      <div class="columns">
-        <div class="column col-3 col-xs-8">
-          <button id="add_waypoint_button" class="btn btn-primary btn-sm">Add Waypoint</button>
-        </div>
-      </div>
-    </form>
-    <br>
-    <button id="Download" class="btn btn-error">Reload</button> <button id="Upload" class="btn btn-primary">Upload</button>
-    <br>
-    <div id="map" class="map" style="width:100%; height:400px"></div>
-    
-    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/ol-geocoder"></script>
+    </div>
+
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
+    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
     <script src="../../core/lib/interface.js"></script>
 
     <script>
-      var map = new ol.Map({
-        target: 'map',
-        layers: [
-          new ol.layer.Tile({
-            source: new ol.source.OSM()
-          })
-        ],
-        view: new ol.View({
-          center: ol.proj.fromLonLat([37.41, 8.82]),
-          zoom: 4
-        })
-      });
+        var map;
+        var waypoints = [];
+        var mapmarkers = L.layerGroup();
+        var searchresult = L.layerGroup();
+        var dynamicarrow = L.layerGroup();
+        var editingroute = null;
+        var lastroutepoint;
 
-      var geocoder = new Geocoder('nominatim', {
-        provider: 'osm',
-        lang: 'en-GB',
-        placeholder: 'Search...',
-        targetType: 'text-input',
-      });
-      map.addControl(geocoder);
-      geocoder.on('addresschosen', function(e) {
-        map.getView().animate({
-            center: e.coordinate,
-            zoom: Math.max(map.getView().getZoom(),16)
+        /*** map ***/
+
+        map = L.map('map').setView([51.505, -0.09], 8);
+
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            subdomains: ['a','b','c'],
+        }).addTo(map);
+
+        L.Control.geocoder({defaultMarkGeocode: false}).addTo(map).on('markgeocode', function(e) {
+            searchresult.clearLayers();
+            var bbox = e.geocode.bbox;
+            var poly = L.polygon([
+                bbox.getSouthEast(),
+                bbox.getNorthEast(),
+                bbox.getNorthWest(),
+                bbox.getSouthWest()
+            ], {fill:false}).addTo(searchresult);
+            map.addLayer(searchresult);
+            map.fitBounds(poly.getBounds());
         });
 
-        var lonlat = ol.proj.toLonLat(e.coordinate);
-        $longitude.value = lonlat[0];
-        $latitude.value = lonlat[1];
-      });
+        map.on('click', function(e) {
+            if (editingroute != null) {
+                searchresult.clearLayers();
+                addWaypoint(waypoints[editingroute].route, e.latlng.lat, e.latlng.lng, "");
+            } else {
+                swal({
+                    icon: 'info',
+                    text: "Enter a name for the waypoint:",
+                    buttons: true,
+                    content: 'input',
+                }).then((name) => {
+                    if (name != null && name != "") {
+                        searchresult.clearLayers();
+                        addWaypoint(waypoints, e.latlng.lat, e.latlng.lng, name);
+                    }
+                });
+            }
+        });
+        map.on('mousemove', function(e) {
+            if (editingroute == null) return;
+            let latlngs = [lastroutepoint, [e.latlng.lat, e.latlng.lng]];
+            dynamicarrow.clearLayers();
+            L.polyline(latlngs, { color:'black'}).addTo(dynamicarrow);
+            L.featureGroup(getArrows(latlngs, 'black', 2, map)).addTo(dynamicarrow)
+            map.addLayer(dynamicarrow);
+        });
+        clean();
+        renderAllWaypoints();
 
-      var waypoints = []
+        /*** status ***/
 
-      var $name = document.getElementById('add_waypoint_name')
-      var $form = document.getElementById('add_waypoint_form')
-      var $button = document.getElementById('add_waypoint_button')
-      var $latitude = document.getElementById('add_latitude')
-      var $longitude = document.getElementById('add_longitude')
-      var $list = document.getElementById('waypoints')
-
-      map.on('click', function(e) {
-        var lonlat = ol.proj.toLonLat(e.coordinate);
-        $longitude.value = lonlat[0];
-        $latitude.value = lonlat[1];
-      });
-
-      function compare(a, b){
-            var x = a.name.toLowerCase();
-            var y = b.name.toLowerCase();
-            if (x=="none") {return -1};
-            if (y=="none") {return 1};
-            if (x < y) {return -1;}
-            if (x > y) {return 1;}
-            return 0;
+        function clean() {
+            $('#status').html('<i class="icon icon-check"></i> No pending changes.');
+            routestatus();
         }
 
-      $button.addEventListener('click', event => {
-        event.preventDefault()       
-        var name = $name.value.trim()
-        if(!name) return;
-        var lat = parseFloat($latitude.value).toPrecision(8);
-        var lon = parseFloat($longitude.value).toPrecision(8);
+        function dirty() {
+            $('#status').html('<b><i class="icon icon-edit"></i> Changes have not been sent to the watch.</b>');
+            routestatus();
+        }
 
-        waypoints.push({
-          name, lat,lon,
-        });
-        
-        waypoints.sort(compare);
+        function routestatus() {
+            if (editingroute == null) {
+                $('#routestatus').html('');
+                dynamicarrow.clearLayers();
+            } else {
+                $('#routestatus').html('Editing route: ' + escapeHTML(waypoints[editingroute].name) + ' <button class="btn btn-sm btn-primary" onclick="closeRoute()">close route</button>');
+            }
+        }
 
-        renderWaypoints()
-        $name.value = ''
-        $latitude.value = (0).toPrecision(8);
-        $longitude.value = (0).toPrecision(8);
-      });
+        /*** waypoints ***/
 
-      function removeWaypoint(index){
-        $name.value = waypoints[index].name
-        if (waypoints[index].lat !== undefined && waypoints[index].lon !== undefined
-                && !isNaN(waypoints[index].lat) && !isNaN(waypoints[index].lon)) {
-            $latitude.value = waypoints[index].lat
-            $longitude.value = waypoints[index].lon
-            map.getView().animate({
-                center: ol.proj.fromLonLat([waypoints[index].lon, waypoints[index].lat]),
-                zoom: Math.max(map.getView().getZoom(),16)
+        function addWaypoint(arr, lat, lon, name) {
+            arr.push({lat:lat, lon:lon, name:name});
+            renderAllWaypoints();
+            dirty();
+        }
+
+        function deleteWaypoint(arr, i) {
+            arr.splice(i, 1);
+            if (editingroute != null) {
+                // XXX: ugly: fix editingroute index
+                if (editingroute == i) editingroute = null;
+                else if (editingroute > i) editingroute--;
+            }
+            renderAllWaypoints();
+            dirty();
+        }
+
+        function renameWaypoint(arr, i) {
+            var name = prompt("Enter new name for the waypoint:", arr[i].name);
+            if (name == null || name == "" || name == arr[i].name)
+                return;
+            arr[i].name = name;
+            renderAllWaypoints();
+            dirty();
+        }
+
+        function renderWaypoints(wps, isroute, parentidx) {
+            var latlngs = [];
+            for (var i = 0; i < wps.length; i++) {
+                if (wps[i].route) {
+                    renderWaypoints(wps[i].route, true, i);
+                    continue;
+                }
+                if (wps[i].lat == null || wps[i].lon == null)
+                    continue;
+
+                if (isroute) {
+                    L.marker([wps[i].lat, wps[i].lon], {title: wps[i].name})
+                        .bindPopup(`<h4><b>${wps[i].name}</b> <a class="btn btn-primary" href="javascript:renameWaypoint(waypoints[${parentidx}].route,${i})"><i class="icon icon-edit"></i></a> <a class="btn btn-error" href="javascript:deleteWaypoint(waypoints[${parentidx}].route, ${i})"><i class="icon icon-delete"></i></a></h4><button class="btn btn-sm btn-error" onclick="javascript:deleteEntireRoute(${parentidx})">Delete entire route</button>`)
+                        .addTo(mapmarkers);
+                    latlngs.push([wps[i].lat, wps[i].lon]);
+                    lastroutepoint = [wps[i].lat, wps[i].lon];
+                } else {
+                    L.marker([wps[i].lat, wps[i].lon], {title: wps[i].name})
+                        .bindPopup(`<h4><b>${wps[i].name}</b> <a class="btn btn-primary" href="javascript:renameWaypoint(waypoints,${i})"><i class="icon icon-edit"></i></a> <a class="btn btn-error" href="javascript:deleteWaypoint(waypoints, ${i})"><i class="icon icon-delete"></i></a></h4><button class="btn btn-sm btn-primary" onclick="javascript:makeRoute(${i})">Make route</button>`)
+                        .addTo(mapmarkers);
+                }
+            }
+            if (isroute) {
+                L.polyline(latlngs, { color:'black'}).addTo(mapmarkers);
+                L.featureGroup(getArrows(latlngs, 'black', 2, map)).addTo(mapmarkers)
+            }
+        }
+
+        function renderAllWaypoints() {
+            mapmarkers.clearLayers();
+            renderWaypoints(waypoints, false, 0);
+            map.addLayer(mapmarkers);
+        }
+
+        /*** routes ***/
+
+        function openRoute(i) {
+            editingroute = i;
+            console.log("edit route "+ i);
+            map.on('contextmenu', closeRoute);
+            renderAllWaypoints();
+        }
+
+        function makeRoute(i) {
+            waypoints[i].route = [{
+                name: waypoints[i].name,
+                lat: waypoints[i].lat,
+                lon: waypoints[i].lon,
+            }];
+            openRoute(i);
+            dirty();
+        }
+
+        function closeRoute() {
+            map.off('contextmenu', closeRoute);
+            editingroute = null;
+            renderAllWaypoints();
+            routestatus();
+        }
+
+        function deleteEntireRoute(i) {
+            swal({
+                icon: 'warning',
+                text: "Really delete entire route '" + waypoints[i].name + "'?",
+                buttons: true,
+            }).then((v) => {
+                console.log(v)
+                if (v) {
+                    deleteWaypoint(waypoints, i);
+                }
             });
         }
-        waypoints = waypoints.filter((p,i) => i!==index)
-        renderWaypoints()
-      }
 
-      function renderWaypoints(){
-        $list.innerHTML = ''
-        waypoints.forEach((waypoint,index) => {
-          var $waypoint = document.createElement('tr')  
-          if (index==0){
-              $waypoint.innerHTML = `<td>${waypoint.name}</td>`
-          } else if(waypoint.lat==undefined){
-          $waypoint.innerHTML = `<td>${waypoint.name}</td><td>------</td><td>-----</td><td><button class="btn btn-action btn-primary" onclick="removeWaypoint(${index})"><i class="icon icon-edit"></i></button></td>`
-          } else {
-          $waypoint.innerHTML = `<td>${waypoint.name}</td><td>${waypoint.lat}</td><td>${waypoint.lon}</td><td><button class="btn btn-action btn-primary" onclick="removeWaypoint(${index})"><i class="icon icon-edit"></i></button></td>`
-          }
-          $list.appendChild($waypoint)
-        })
-        $name.focus()    
-      }
+        /*** util ***/
 
-      function downloadJSONfile(fileid, callback) {
-        Puck.write(`\x10(function() {
-          var pts = require("Storage").readJSON("${fileid}")||[{name:"NONE"}];
-          Bluetooth.print(JSON.stringify(pts));
-         })()\n`,contents=>{
-              var storedpts = JSON.parse(contents);
-              callback(storedpts);
+        // https://stackoverflow.com/a/22706073
+        function escapeHTML(str){
+            return new Option(str).innerHTML;
+        }
+
+        /*** Bangle.js ***/
+
+        function downloadJSONfile(fileid, callback) {
+            Puck.write(`\x10(function() {
+                var pts = require("Storage").readJSON("${fileid}")||[{name:"NONE"}];
+                Bluetooth.print(JSON.stringify(pts));
+            })()\n`, contents => {
+                var storedpts = JSON.parse(contents);
+                callback(storedpts);
+                clean();
+            });
+        }
+
+        function uploadFile(fileid, contents) {
+            Puck.write(`\x10(function() {
+                require("Storage").write("${fileid}",'${contents}');
+                Bluetooth.print("OK");
+            })()\n`, ret => {
+                console.log("uploadFile", ret);
+                if (ret == "OK")
+                    clean();
+            });
+        }
+
+        function gotStored(pts) {
+            waypoints = pts;
+
+            var latlngs = waypoints.map(p => [p.lat, p.lon]);
+            var poly = L.polygon(latlngs);
+            map.fitBounds(poly.getBounds());
+
+            renderAllWaypoints();
+        }
+
+        function onInit() {
+            downloadJSONfile("waypoints.json", gotStored);
+        }
+
+        $('#download').on('click', function() {
+            downloadJSONfile("waypoints.json", gotStored);
         });
-      }
 
-      function uploadFile(fileid, contents) {      
-        Puck.write(`\x10(function() {
-          require("Storage").write("${fileid}",'${contents}');
-          Bluetooth.print("OK");
-         })()\n`,ret=>{
-            console.log("uploadFile",ret);
+        $('#upload').click(function() {
+            var data =  JSON.stringify(waypoints);
+            uploadFile("waypoints.json",data);
         });
-      }
 
-      function gotStored(pts){
-          waypoints = pts;
-          renderWaypoints();
-      }
+        $('#statusarea').click(closeRoute);
 
-      function onInit() {
-         downloadJSONfile("waypoints.json", gotStored);
-      }
+        /*** map arrows ***/
+        // https://stackoverflow.com/a/58686215
+        function getArrows(arrLatlngs, color, arrowCount, mapObj) {
+            if (typeof arrLatlngs === undefined || arrLatlngs == null ||
+        (!arrLatlngs.length) || arrLatlngs.length < 2)
+            return [];
 
-      document.getElementById("Download").addEventListener("click", function() {
-        downloadJSONfile("waypoints.json", gotStored);
-      });
+            if (typeof arrowCount === 'undefined' || arrowCount == null)
+                arrowCount = 1;
 
-      document.getElementById("Upload").addEventListener("click", function() {
-        var data =  JSON.stringify(waypoints);
-        uploadFile("waypoints.json",data); 
-      });
+            if (typeof color === 'undefined' || color == null)
+                color = '';
+            else
+                color = 'color:' + color;
+
+            var result = [];
+            for (var i = 1; i < arrLatlngs.length; i++) {
+                var icon = L.divIcon({ className: 'arrow-icon', bgPos: [5, 5], html: '<div style="' + color + ';transform: rotate(' + getAngle(arrLatlngs[i - 1], arrLatlngs[i], -1).toString() + 'deg)">▶</div>' });
+                for (var c = 1; c <= arrowCount; c++) {
+                    result.push(L.marker(myMidPoint(arrLatlngs[i], arrLatlngs[i - 1], (c / (arrowCount + 1)), mapObj), { icon: icon }));
+                }
+            }
+            return result;
+        }
+
+        function getAngle(latLng1, latlng2, coef) {
+            var dy = latlng2[0] - latLng1[0];
+            var dx = Math.cos(Math.PI / 180 * latLng1[0]) * (latlng2[1] - latLng1[1]);
+            var ang = ((Math.atan2(dy, dx) / Math.PI) * 180 * coef);
+            return (ang).toFixed(2);
+        }
+
+        function myMidPoint(latlng1, latlng2, per, mapObj) {
+            if (!mapObj)
+                throw new Error('map is not defined');
+
+            var halfDist, segDist, dist, p1, p2, ratio,
+                points = [];
+
+            p1 = mapObj.project(new L.latLng(latlng1));
+            p2 = mapObj.project(new L.latLng(latlng2));
+
+            halfDist = distanceTo(p1, p2) * per;
+
+            if (halfDist === 0)
+                return mapObj.unproject(p1);
+
+            dist = distanceTo(p1, p2);
+
+            if (dist > halfDist) {
+                ratio = (dist - halfDist) / dist;
+                var res = mapObj.unproject(new Point(p2.x - ratio * (p2.x - p1.x), p2.y - ratio * (p2.y - p1.y)));
+                return [res.lat, res.lng];
+            }
+        }
+
+        function distanceTo(p1, p2) {
+            var x = p2.x - p1.x,
+                y = p2.y - p1.y;
+
+            return Math.sqrt(x * x + y * y);
+        }
+
+        function Point(x, y, round) {
+            this.x = (round ? Math.round(x) : x);
+            this.y = (round ? Math.round(y) : y);
+        }
     </script>
-  </body>
-</html>
+</body>
diff --git a/index.html b/index.html
index 7e818ee72..04851f28e 100644
--- a/index.html
+++ b/index.html
@@ -51,8 +51,8 @@
       <li class="tab-item" id="tab-myappscontainer">
         <a href="javascript:showTab('myappscontainer')">My Apps</a>
       </li>
-      <li class="tab-item" id="tab-aboutcontainer">
-        <a href="javascript:showTab('aboutcontainer')">About</a>
+      <li class="tab-item" id="tab-morecontainer">
+        <a href="javascript:showTab('morecontainer')">More...</a>
       </li>
     </ul>
 
@@ -111,7 +111,7 @@
       </div>
     </div>
 
-    <div class="container apploader-tab" id="aboutcontainer" style="display:none">
+    <div class="container apploader-tab" id="morecontainer" style="display:none">
       <div class="hero bg-gray">
         <div class="hero-body">
           <a href="https://banglejs.com" target="_blank"><img src="img/banglejs-logo-mid.png" alt="Bangle.js"></a>